/* =====================================================================
   The Forge.

   The preview is the point of the screen, so it gets the space and it stays
   put while the controls scroll beside it on desktop. On a narrow screen the
   preview stays visible at the top rather than scrolling away — a slider you
   cannot see the result of is a spreadsheet.
   ===================================================================== */

.forge-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 20px;
  align-items: start;
}

/* ----------------------------------------------------------- the model */
.forge-view {
  position: sticky;
  top: 76px;
  background: radial-gradient(120% 90% at 50% 12%, var(--panel), var(--void) 78%);
  border: 1px solid var(--edge2);
  border-radius: var(--r-lg);
  padding: 12px 14px 14px;
}
.forge-view canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
  cursor: grab;
}
.forge-view canvas:active { cursor: grabbing; }
.view-hint { text-align: center; margin: 2px 0 12px; }

/* The renderer's own words for what it is drawing right now. This is the
   line that keeps a number honest: move Guard and "Plating" changes. */
.build-lines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  border-top: 1px solid var(--edge2);
  padding-top: 12px;
}
.build-line { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.build-line i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dim);
}
.build-line b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: var(--paper);
}

/* -------------------------------------------------------------- budget */
.forge-controls { display: flex; flex-direction: column; gap: 12px; }

.budget-panel .lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dim);
}
.budget-panel .row { margin-bottom: 8px; }
.budget-panel b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
}
.budget-note { margin: 8px 0 0; font-size: 13px; color: var(--dim); }
.budget-note.over { color: var(--coral); }

/* ------------------------------------------------------------- sliders */
.sliders { display: flex; flex-direction: column; gap: 10px; }
.attr-row { padding: 13px 15px 11px; }
.attr-top { margin-bottom: 6px; }
.attr-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .01em;
}
.attr-val {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  color: var(--lantern);
}
.attr-blurb { margin: 6px 0 0; line-height: 1.4; }

/* A range input styled once, here, so all four look like one control. */
.attr-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  /* The slider's own box is the drag target; 26px was under the touch
     floor even though the visible track is thinner. The track and thumb
     below keep their look — only the grabbable area grows. */
  height: 44px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.attr-row input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: var(--sunk);
  border: 1px solid var(--edge2);
}
.attr-row input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: var(--sunk);
  border: 1px solid var(--edge2);
}
.attr-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--lantern);
  border: 2px solid var(--void);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.attr-row input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lantern);
  border: 2px solid var(--void);
}

/* ------------------------------------------------------ derived panel */
.derived .kv b { font-family: var(--mono); font-size: 13.5px; }
.derived .kv b.ember-num { color: var(--lantern); }
.derived .kv b.cyan-num { color: var(--cyan); }

/* -------------------------------------------------------------- mobile */
@media (max-width: 900px) {
  .forge-grid { grid-template-columns: 1fr; }
  .forge-view {
    position: sticky;
    top: 60px;
    z-index: 5;
    /* On a phone the model shrinks rather than disappearing: the slider and
       its consequence must be on screen together. */
    max-height: 46vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .forge-view canvas { max-height: 30vh; width: auto; margin: 0 auto; }
  .build-lines { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .build-line b { font-size: 13px; }
  .build-line i { font-size: 9px; }
}