/* custommpc.com — /custom/ build request form.
   Reuses tokens.css + site.css (.skin-mod, .skin-field, .skin-drop, .btn, .key,
   .chip, .led, .lcd-module). Everything here follows DESIGN.md: no rounded
   corners, no soft gradients, cel shadows only. */

.build { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
@media (max-width: 900px) { .build { grid-template-columns: 1fr; } }

.build__steps { display: grid; gap: var(--s5); min-width: 0; }
.build__side { position: sticky; top: var(--s4); display: grid; gap: var(--s4); }
@media (max-width: 900px) { .build__side { position: static; } }

/* step header inside the legend strip */
.build-step > legend { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.build-step > legend .build-step__num { color: var(--caution); }
.build-step > legend .build-step__state { color: var(--lcd); font-family: var(--font-pixel); letter-spacing: 0.1em; }

/* generic fields (mirror .skin select/input rules for any element in .build) */
.build select,
.build input[type="text"],
.build input[type="email"],
.build input[type="url"],
.build input[type="number"],
.build textarea {
  width: 100%;
  min-height: 40px;
  padding: var(--s2) var(--s3);
  border: var(--line);
  background: var(--steel-100);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.build textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.build select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.build input[type="color"] {
  width: 100%; height: 40px; padding: 2px;
  border: var(--line); background: var(--steel-100); border-radius: 0; cursor: pointer;
}
.build input:focus-visible, .build select:focus-visible, .build textarea:focus-visible {
  outline: 3px solid var(--caution); outline-offset: 0;
}
.build .is-invalid { border-color: var(--alert); box-shadow: inset 0 0 0 1px var(--alert); }
.build-hint {
  font-family: var(--font-mono-alt); font-size: var(--text-xs);
  color: var(--text-muted); margin: 0; letter-spacing: 0.04em;
}
.build-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.build-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s3); }
@media (max-width: 640px) { .build-grid-2, .build-grid-3 { grid-template-columns: 1fr; } }

/* model card strip */
.build-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s2); }
.build-model {
  border: var(--line); background: var(--steel-100); padding: var(--s2) var(--s3);
  font-family: var(--font-mono-alt); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.08em; cursor: pointer; display: grid; gap: 2px; min-width: 0;
  box-shadow: var(--shadow-1); transition: transform var(--speed-ui);
}
.build-model input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.build-model:hover { transform: translate(-1px, -1px); }
.build-model.is-on { background: var(--caution); }
.build-model__gen { color: var(--text-muted); font-size: 10px; letter-spacing: 0.12em; }
.build-model.is-on .build-model__gen { color: var(--ink); }

/* photo drop + thumbs */
.build-drop { position: relative; }
.build-drop.is-full { opacity: 0.6; cursor: not-allowed; }
.build-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s2); }
.build-thumb {
  position: relative; border: var(--line); background: var(--steel-300); aspect-ratio: 1 / 1;
  overflow: hidden; box-shadow: var(--shadow-1);
}
.build-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.build-thumb__x {
  position: absolute; top: 0; right: 0; width: 28px; height: 28px;
  background: var(--alert); color: var(--ink); border: 0; border-left: var(--line); border-bottom: var(--line);
  font-family: var(--font-mono-alt); font-weight: 700; cursor: pointer; line-height: 1; padding: 0;
}
.build-thumb__tag {
  position: absolute; left: 0; bottom: 0; right: 0; background: var(--ink); color: var(--lcd);
  font-family: var(--font-mono-alt); font-size: 10px; padding: 2px var(--s1); letter-spacing: 0.08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.build-thumb--raw { background: var(--ink); color: var(--lcd); display: grid; place-items: center; font-family: var(--font-pixel); font-size: var(--text-xs); text-align: center; padding: var(--s2); }

/* parts picker */
.build-cats { display: flex; flex-wrap: wrap; gap: var(--s1); }
.build-cat {
  border: var(--line); background: var(--steel-100); padding: var(--s1) var(--s3);
  font-family: var(--font-mono-alt); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em;
  cursor: pointer; border-radius: 0;
}
.build-cat[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.build-cat__n { color: var(--alert-deep); margin-left: 4px; }
.build-cat[aria-selected="true"] .build-cat__n { color: var(--caution); }

.build-parts { display: grid; gap: var(--s2); }
.build-part {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--s3); align-items: start;
  border: var(--line-thin); background: var(--paper); padding: var(--s2) var(--s3);
}
.build-part.is-on { background: var(--caution); border: var(--line); box-shadow: var(--shadow-1); }
.build-part input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--alert); margin: 4px 0 0; }
.build-part__name { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; margin: 0; }
.build-part__meta { font-family: var(--font-mono-alt); font-size: var(--text-xs); color: var(--text-muted); margin: 2px 0 0; letter-spacing: 0.04em; }
.build-part.is-on .build-part__meta { color: var(--ink); }
.build-part__price { font-family: var(--font-mono-alt); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; text-align: right; }
.build-part__price small { display: block; font-weight: 400; font-size: 10px; color: var(--text-muted); letter-spacing: 0.08em; }
.build-part.is-on .build-part__price small { color: var(--ink); }
.build-part__opts { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0,1fr) 72px; gap: var(--s2); margin-top: var(--s2); }
.build-part__opts[hidden] { display: none; }
.build-part__opts select, .build-part__opts input { min-height: 36px; font-size: var(--text-xs); background: var(--paper); }
.build-part__link { font-family: var(--font-mono-alt); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.build-parts__empty {
  border: 2px dashed var(--ink); padding: var(--s4); font-family: var(--font-mono-alt); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); text-align: center; margin: 0;
}
.build-parts__more { display: flex; justify-content: center; }

/* sticky summary LCD */
.build-sum__rows { display: grid; gap: var(--s1); margin: var(--s3) 0 0; }
.build-sum__row { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.build-sum__row b { color: var(--caution); font-weight: 400; }
.build-sum__parts { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: 2px; font-size: 11px; max-height: 220px; overflow: auto; }
.build-sum__parts li { display: flex; justify-content: space-between; gap: var(--s2); border-top: 1px solid rgba(0,229,255,0.25); padding-top: 2px; }
.build-sum__parts li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.build-sum__fine { font-size: 10px; color: var(--lcd); opacity: 0.75; margin: var(--s3) 0 0; letter-spacing: 0.04em; }
.build-progress { height: 8px; border: 1px solid var(--lcd); background: var(--ink); margin-top: var(--s3); }
.build-progress > i { display: block; height: 100%; width: 0; background: var(--lcd); transition: width 120ms linear; }
.build-status { font-family: var(--font-pixel); font-size: var(--text-sm); color: var(--caution); margin: var(--s2) 0 0; min-height: 1.4em; }
.build-status.is-error { color: var(--alert); }

/* consent + submit */
.build-consent { display: flex; gap: var(--s2); align-items: flex-start; font-family: var(--font-mono); font-size: var(--text-sm); cursor: pointer; }
.build-consent input { width: 18px; height: 18px; accent-color: var(--alert); margin: 3px 0 0; flex: none; }
.build__submit { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.build__submit .btn:disabled { opacity: 0.5; cursor: wait; }
.build__submit .key:has(.btn:disabled) { filter: none; transform: none; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* success panel */
.build-done[hidden] { display: none; }
.build-done .lcd-module__screen h2 { font-size: var(--text-2xl); }
.build-done__ref { font-family: var(--font-pixel); font-size: var(--text-2xl); color: var(--caution); letter-spacing: 0.1em; margin: var(--s2) 0 var(--s3); }

/* how-it-works strip */
.build-how { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
@media (max-width: 800px) { .build-how { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .build-how { grid-template-columns: 1fr; } }
.build-how__cell { border: var(--line); background: var(--paper); box-shadow: var(--shadow-1); padding: var(--s3); display: grid; gap: var(--s1); }
.build-how__n { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; }
.build-how__t { font-family: var(--font-mono-alt); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.15em; }
.build-how__cell p { margin: 0; font-size: var(--text-sm); }