/* ==========================================================================
   assembly.css - the rocket workshop: 3-column layout
     left   : part catalogue (grouped by category, click to add)
     middle : the rocket stack (visual column, reorderable stages)
     right  : live statistics + validation warnings
   ========================================================================== */

.workshop-screen {
  align-items: stretch;
  background: linear-gradient(180deg, rgba(5, 7, 13, 0.94), rgba(5, 7, 13, 0.9));
}

/* ---------------------------------------------------------------------------
   Host element. Sits above the 3D canvas but BELOW #screen-root (z-index 20),
   so a results/menu overlay still covers the workshop if one ever appears over
   it. `pointer-events: auto` is required because it is a sibling of the
   `pointer-events: none` screen layer.
   --------------------------------------------------------------------------- */
.workshop-host {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: auto;
}

.workshop-host--hidden { display: none !important; }

/* The middle column is the 3D preview, so the workshop's own background must
   NOT cover it: the gradients below are painted on the two side columns only,
   leaving a transparent viewing slot straight down the middle. Without this the
   rocket would be hidden behind the very screen used to configure it. */
.workshop-screen .workshop__col--left,
.workshop-screen .workshop__col--right {
  background: rgba(8, 12, 22, 0.93);
}

.workshop-screen .workshop__head {
  background: rgba(8, 12, 22, 0.96);
}

/* The "back to portfolio" button is the only way out of the game once the
   player is past the gate, so it must stay quiet next to the primary 发射
   action but still read as clickable. `margin-right: auto` pushes it to the far
   left of the action row, away from 排行榜/发射. */
.workshop__exit {
  margin-right: auto;
  font-size: 12.5px;
  color: var(--ink-dim);
}

.workshop__exit:hover {
  color: var(--ink);
  border-color: var(--accent);
}

.workshop {
  display: grid;
  grid-template-columns: 300px 1fr 320px;
  grid-template-rows: auto 1fr;
  gap: 0;
  width: 100vw;
  height: 100vh;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

@media (max-width: 1180px) {
  .workshop {
    grid-template-columns: 260px 1fr 280px;
  }
}

.workshop__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 12, 22, 0.9);
}

.workshop__head h1 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--ink);
}

.workshop__mission {
  font-size: 12px;
  color: var(--ink-faint);
}

.workshop__mission b { color: var(--accent); font-weight: 600; }

.workshop__head-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.workshop__col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(8, 12, 22, 0.86);
}

/* The centre column stays fully transparent: the 3D rocket is rendered there,
   behind the DOM, by the live scene. The stack list is left unfilled for the
   same reason - it is a set of floating rows over the preview, not a panel. */
.workshop__col--mid { background: none; }

.workshop__col--left { border-right: 1px solid var(--line); }
.workshop__col--right { border-left: 1px solid var(--line); }

.workshop__col-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 11px 16px 8px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.workshop__scroll {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  flex: 1;
  padding: 10px 12px 20px;
}

.workshop__scroll::-webkit-scrollbar { width: 9px; }
.workshop__scroll::-webkit-scrollbar-track { background: transparent; }
.workshop__scroll::-webkit-scrollbar-thumb {
  background: #1e2b45;
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.workshop__scroll::-webkit-scrollbar-thumb:hover { background: #2c3d5e; background-clip: content-box; }

/* ------------------------------------------------------- part catalogue */

.cat-group { margin-bottom: 14px; }

.cat-group__head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  margin: 0 0 6px 2px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.cat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
}

.part {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-ghost);
  border-radius: var(--r-sm);
  padding: 7px 9px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.part:hover {
  background: var(--bg-raise);
  border-color: var(--line-glow);
  transform: translateX(2px);
}

.part:active { transform: translateX(2px) scale(0.995); }

.part__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 26px;
  display: block;
}

.part__body { min-width: 0; flex: 1; }

.part__name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.part__specs {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 9px;
}

.part__specs b { color: var(--ink-dim); font-weight: 500; }

/* Price on the catalogue entry. Right-aligned so the numbers form a readable
   column down the list - that column is what the player is actually shopping. */
.part__price {
  flex: 0 0 auto;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--warn);
}

/* Affordable-but-only-just parts stay fully clickable; only genuinely
   unaffordable ones are dimmed. Marked rather than disabled so the tooltip can
   still explain the shortfall. */
.part--unaffordable {
  opacity: 0.42;
  cursor: not-allowed;
}

.part--unaffordable .part__price {
  color: var(--bad);
}

.part--unaffordable:hover {
  border-color: var(--bad);
}

/* Locked: not yet bought. Deliberately distinct from `--unaffordable` above,
   because the two mean different things to the player - "save up for this" vs
   "you cannot have this yet". A locked entry stays fully legible (it is a goal)
   and carries the one-off unlock price instead of the per-launch build price. */
.part--locked {
  border-style: dashed;
}

.part--locked .part__name {
  color: var(--ink-dim);
}

.part--locked .part__price {
  color: var(--ink-ghost);
  text-decoration: line-through;
}

.part__unlock {
  flex: 0 0 auto;
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--warn);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--warn);
  white-space: nowrap;
}

/* Clickable, so it reads as a purchase rather than a dead entry. */
.part--locked:not(.part--unaffordable) {
  cursor: pointer;
}

.part--locked:not(.part--unaffordable):hover {
  border-color: var(--warn);
}

.part--locked.part--unaffordable .part__unlock {
  border-color: var(--bad);
  color: var(--bad);
}

/* --------------------------------------------------------- rocket stack */

.stack-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* The 3D preview canvas region occupies the middle column behind the stack. */
.stack-preview {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stack-list {
  position: relative;
  z-index: 2;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  padding: 14px 18px 90px;
  display: flex;
  flex-direction: column-reverse; /* bottom of rocket at the bottom */
  justify-content: flex-start;
  gap: 4px;
  scrollbar-width: thin;
}

.stack-list::-webkit-scrollbar { width: 9px; }
.stack-list::-webkit-scrollbar-thumb {
  background: #1e2b45;
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.stage-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.stage-divider::before,
.stage-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.stage-divider__tag {
  border: 1px dashed var(--line-strong);
  border-radius: 3px;
  padding: 1px 8px;
  white-space: nowrap;
}

.stack-item {
  position: relative;
  width: min(100%, 460px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(17, 26, 44, 0.82);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  padding: 6px 10px;
  cursor: grab;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.stack-item:hover { background: rgba(29, 43, 74, 0.9); }

.stack-item--dragging { opacity: 0.45; }

.stack-item--drop-before { box-shadow: 0 -3px 0 var(--accent); }
.stack-item--drop-after  { box-shadow: 0  3px 0 var(--accent); }

.stack-item--selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.3), 0 0 18px rgba(56, 189, 248, 0.12);
}

.stack-item__icon {
  width: 18px;
  height: 22px;
  flex: 0 0 auto;
}

.stack-item__name {
  font-size: 12.5px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stack-item__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.stack-item__btns {
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity var(--t-fast);
}

.stack-item:hover .stack-item__btns { opacity: 1; }

.icon-btn {
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--ink-dim);
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn--danger:hover { color: var(--bad); border-color: var(--bad); }

.stack-empty {
  margin: auto;
  text-align: center;
  color: var(--ink-ghost);
  font-size: 13px;
  padding: 40px 20px;
  line-height: 2;
}

.stack-empty kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--ink-faint);
}

.stack-toolbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: linear-gradient(180deg, transparent, rgba(8, 12, 22, 0.95) 45%);
}

/* ------------------------------------------------------------- stats */

.stat-section { margin-bottom: 16px; }

.stat-section__title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  margin-bottom: 7px;
}

.stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-size: 12.5px;
  border-bottom: 1px dotted rgba(30, 43, 69, 0.7);
}

.stat:last-child { border-bottom: 0; }

.stat__k { color: var(--ink-dim); }

.stat__v {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.stat__v--good { color: var(--good); }
.stat__v--warn { color: var(--warn); }
.stat__v--bad { color: var(--bad); }
.stat__v--accent { color: var(--accent); }

.stat__hint {
  font-size: 10.5px;
  color: var(--ink-ghost);
  margin-top: 3px;
  line-height: 1.5;
}

/* The budget shortfall: the one hint on this panel that blocks the launch. */
.stat__hint--bad {
  color: var(--bad);
}

/* delta-v bars */
.dv-row {
  display: grid;
  grid-template-columns: 42px 1fr 62px;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-bottom: 5px;
}

.dv-row__bar {
  height: 7px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.dv-row__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: var(--hud-glow);
  transition: width var(--t-med);
}

.dv-row__val { text-align: right; color: var(--ink-dim); }

/* warnings */
.warn-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.warn-item {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: var(--r-sm);
  padding: 7px 10px;
  border-left: 3px solid var(--ink-ghost);
  background: var(--bg-panel-2);
  color: var(--ink-dim);
}

.warn-item--error {
  border-left-color: var(--bad);
  background: rgba(40, 12, 16, 0.6);
  color: #fecaca;
}

.warn-item--warn {
  border-left-color: var(--warn);
  background: rgba(38, 30, 8, 0.55);
  color: #fde68a;
}

.warn-item--info {
  border-left-color: var(--good);
  background: rgba(10, 34, 26, 0.5);
  color: #a7f3d0;
}

.warn-item__mark {
  font-family: var(--font-mono);
  font-weight: 700;
  flex: 0 0 auto;
}

.warn-empty {
  color: var(--good);
  font-size: 12px;
  padding: 8px 0;
}

/* preset picker */
.preset-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.preset-btn {
  font: inherit;
  font-size: 11px;
  padding: 7px 4px;
  color: var(--ink-dim);
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}

.preset-btn:hover {
  color: var(--accent);
  border-color: var(--line-glow);
  background: var(--bg-raise);
}

/* camera controls hint in the middle column */
.stack-viewhint {
  position: absolute;
  left: 14px;
  top: 12px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-ghost);
  pointer-events: none;
  line-height: 1.7;
}