/* COD Loadout class builder. Everything is scoped under .bld and uses assets/tokens.css custom properties only.
   Layers: panels --surface-1, controls --surface-2, selected/hover --surface-3. Accent only for primary actions,
   current selection and focus. Elevation is borders only. */

.bld,
.bld *,
.bld *::before,
.bld *::after {
  box-sizing: border-box;
}

.bld {
  --bld-hit: 2.75rem; /* 44px touch rows below 1200px */
  position: relative;
  max-width: 120rem;
  margin-inline: auto;
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  accent-color: var(--accent);
}

.bld * {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.bld ::selection {
  background: var(--accent-soft);
  color: var(--text);
}

:where(.bld) button,
:where(.bld) input,
:where(.bld) a {
  font: inherit;
  color: inherit;
}

.bld :focus {
  outline: none;
}

.bld :focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

.bld-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The skip link is the first tab stop of the stage: out of sight until it has focus, then a small button-like link. */
.bld-skip {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.bld-skip:focus-visible {
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--bld-hit);
  padding: 0 var(--space-3);
  background: var(--surface-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
}

.bld-muted { color: var(--text-muted); }
.bld-xs { font-size: var(--text-xs); line-height: 1.4; }
.bld p { margin: 0; }
.bld ul, .bld dl, .bld dd { margin: 0; padding: 0; }
.bld ul { list-style: none; }

/* ---------- headings ---------- */
.bld-h { margin: 0; font-size: var(--text-md); font-weight: 700; line-height: var(--leading-tight); }
.bld-h-lg { font-size: var(--text-lg); }
.bld-h2 { margin: 0; font-size: 0.875rem; font-weight: 700; line-height: var(--leading-tight); }

/* ---------- icons ---------- */
.bld-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- panels ---------- */
.bld-panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  min-width: 0;
}

/* ---------- loading / error ---------- */
/* The builder is far taller than its loading state. Reserve a viewport of height while it loads so the
   page content below stays out of the first screen and does not jump when the app mounts (CLS). */
#builder-root[aria-busy="true"] { min-height: 100dvh; }
.bld-loading { color: var(--text-muted); padding: var(--space-2) 0 var(--space-3); }
.bld-loading-grid { display: grid; gap: var(--space-3); }
.bld-skel { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.bld-skel-rail { height: 14rem; }
.bld-skel-main { height: 22rem; }
.bld-skel-side { height: 12rem; }
@media (min-width: 1200px) {
  .bld-loading-grid { grid-template-columns: 17rem minmax(0, 1fr) 21rem; }
  .bld-skel-rail, .bld-skel-main, .bld-skel-side { height: 30rem; }
}

.bld-error {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  max-width: 40rem;
  padding: var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-lg);
}
.bld-error > .bld-icon { color: var(--negative); margin-top: 2px; }
.bld-error p + p { margin-top: var(--space-1); color: var(--text-muted); }
.bld-error-title { font-weight: 700; font-size: var(--text-md); }
.bld-error .bld-btnrow { margin-top: var(--space-3); }

/* ---------- buttons, links ---------- */
.bld-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--bld-hit);
  padding: 0 var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.bld-btn:hover { background: var(--surface-3); }
.bld-btn:active { background: var(--surface-1); }
.bld-btn[aria-disabled="true"] { color: var(--text-subtle); cursor: not-allowed; border-style: dashed; }
.bld-btn[aria-disabled="true"]:hover { background: var(--surface-2); }
.bld-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.bld-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.bld-btn-primary:active { background: var(--accent); }
.bld-btn-sm { min-height: 2rem; padding: 0 var(--space-3); }
/* Text-style button for the low-stakes or backwards moves (Reset class, Back to weapon): no fill, no border, no amber. */
.bld-btn-quiet { background: transparent; border-color: transparent; color: var(--text-muted); }
.bld-btn-quiet:hover { background: var(--surface-2); color: var(--text); }
.bld-btn-quiet:active { background: var(--surface-1); }
.bld-btnrow { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.bld-iconbtn {
  display: inline-grid;
  place-items: center;
  width: var(--bld-hit);
  height: var(--bld-hit);
  flex: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-muted);
}
.bld-iconbtn:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-control); }

.bld-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--border-control);
  text-underline-offset: 3px;
  white-space: nowrap;
  min-height: var(--bld-hit);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.bld-link:hover { color: var(--text); text-decoration-color: currentColor; }
.bld-link .bld-icon { width: 0.875rem; height: 0.875rem; }
.bld-link-inline { color: var(--text); text-decoration: underline; text-underline-offset: 3px; border-radius: var(--radius-sm); }
.bld-link-inline:hover { text-decoration-color: var(--accent); }

/* ---------- tags ---------- */
.bld-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.3;
  white-space: nowrap;
}
.bld-tag .bld-icon { width: 0.75rem; height: 0.75rem; }
.bld-tag-lock { color: var(--negative); background: var(--negative-soft); }
.bld-tag-info { color: var(--info); background: var(--info-soft); }

/* ---------- top bar (compact level and Copy link below 1200px, link notices) ---------- */
.bld-top { display: contents; }

.bld-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.bld-bar-main { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.bld-bar-level { font-size: var(--text-md); font-weight: 700; }
.bld-bar .bld-btn-sm { min-height: var(--bld-hit); }

/* The status line is a toast at the bottom of the screen, so it never covers or pushes the controls it explains. */
.bld-status {
  display: none;
  position: fixed;
  z-index: 40;
  left: var(--space-3);
  right: var(--space-3);
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  max-width: 36rem;
  margin-inline: auto;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-3);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  line-height: 1.4;
}
.bld-status.has-text { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.bld-status-undo { flex: none; min-height: var(--bld-hit); }

.bld-notices:empty { display: none; }
.bld-notice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  background: var(--info-soft);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-lg);
}
.bld-notice > .bld-icon { color: var(--info); margin-top: 2px; }
.bld-notice-body { flex: 1; min-width: 0; }
.bld-notice-title { font-weight: 700; margin-bottom: var(--space-1); }
.bld-notice li { color: var(--text-muted); padding: 2px 0; line-height: 1.4; }
.bld-notice .bld-iconbtn { margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0; }
.bld-notice .bld-more-sum { min-height: var(--bld-hit); }

/* Below 1200px the canvas is one panel: a hairline and room above mark where each section starts. */
@media (max-width: 1199.98px) {
  .bld-cs-col, .bld-stats { padding-top: var(--space-4); border-top: 1px solid var(--border); }
  .bld-stats:empty { display: none; }
}
@media (max-width: 899.98px) {
  .bld-gunsmith { padding-top: var(--space-4); border-top: 1px solid var(--border); }
}
/* ---------- mobile / tablet flow ---------- */
.bld.is-ready { display: flex; flex-direction: column; gap: var(--space-3); }

/* Below 1200px the builder reads one step larger: the 12px and 13px copy becomes 13px and 14px. */
@media (max-width: 1199.98px) {
  .bld { --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; }
}

/* ---------- rail: the class overview, one tile per slot ---------- */
.bld-rail .bld-h { margin-bottom: var(--space-1); }
.bld-railhint { margin-bottom: var(--space-3); }
.bld-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-2); }
.bld-slots > li { min-width: 0; }
.bld-slot {
  position: relative;
  display: block;
  width: 100%;
  min-height: var(--bld-hit);
  height: 100%;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
button.bld-slot:hover { background: var(--surface-3); }
.bld-slot[aria-current="true"] { background: var(--surface-3); border-color: var(--accent); }
.bld-slot-fixed { cursor: default; background: transparent; border-style: dashed; border-color: var(--border-strong); }
/* Phone: label and meta share the first line, the name follows. Wide screens stack label, name, meta. */
.bld-slot-main { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); row-gap: 1px; min-width: 0; padding-right: 1.5rem; }
.bld-slot-label { order: 1; font-size: var(--text-xs); color: var(--text-muted); }
.bld-slot-meta { order: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.bld-slot-name { order: 3; flex: 1 0 100%; display: flex; align-items: center; gap: var(--space-2); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.bld-slot-name.bld-muted { font-weight: 400; }
.bld-slot-atts { order: 4; flex: 1 0 100%; display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.bld-slot-att { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.35; overflow-wrap: anywhere; }
.bld-slot-state { position: absolute; top: var(--space-2); right: var(--space-2); color: var(--text-muted); display: inline-flex; }
.bld-slot[aria-current="true"] .bld-slot-state { color: var(--text); }
@media (max-width: 899.98px) { .bld-slots > li.is-weapon, .bld-slots > li.is-fixed { grid-column: 1 / -1; } }
@media (min-width: 900px) and (max-width: 1199.98px) { .bld-slots > li.is-weapon { grid-column: span 2; } }
@media (min-width: 1200px) {
  .bld-slot-main { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
  .bld-slot-name, .bld-slot-atts { flex: none; }
  .bld-slot-name { order: 2; }
  .bld-slot-meta { order: 3; }
}

/* ---------- picker ---------- */
.bld-picker { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.bld-picker-head { display: flex; flex-direction: column; gap: var(--space-2); }
.bld-picker-title { display: flex; align-items: baseline; gap: var(--space-1) var(--space-3); flex-wrap: wrap; }
.bld-picker-title .bld-link { margin-left: auto; }
.bld-back { align-self: flex-start; margin-left: calc(-1 * var(--space-2)); }
.bld-opts-note { grid-column: 1 / -1; }
.bld-hint { color: var(--text-muted); }
.bld-filters { display: flex; flex-direction: column; gap: var(--space-2); }
.bld-search { position: relative; display: block; }
.bld-search .bld-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.bld-search input {
  width: 100%;
  min-height: var(--bld-hit);
  padding: 0 var(--space-3) 0 2.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  font-size: 1rem;
}
.bld-search input::placeholder { color: var(--text-subtle); opacity: 1; }
.bld-search input:focus-visible { border-color: var(--accent); }
.bld-fchips { display: flex; gap: var(--space-2); overflow-x: auto; padding: 4px 4px 6px; margin: -4px -4px -6px; }
.bld-fchip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: none;
  min-height: var(--bld-hit);
  padding: 0 var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.bld-fchip:hover { background: var(--surface-3); }
.bld-fchip[aria-pressed="true"] { background: var(--surface-3); border-color: var(--accent); }
.bld-fchip .bld-icon { color: var(--accent); width: 0.875rem; height: 0.875rem; }

.bld-note {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-muted);
  line-height: 1.4;
}
.bld-note > .bld-icon { color: var(--info); }
.bld-note > span { flex: 1 1 12rem; }

.bld-picker-list { min-width: 0; }
.bld-opts-more { grid-column: 1 / -1; display: flex; }
.bld-opts-more .bld-btn { flex: 1; }
.bld-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--space-2); }
.bld-opt-row { display: flex; background: var(--surface-2); border: 1px solid var(--border-control); border-radius: var(--radius-md); transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.bld-opt-row:hover { background: var(--surface-3); }
.bld-opt-row:has(.bld-opt[aria-pressed="true"]) { background: var(--surface-3); border-color: var(--accent); }
.bld-opt-row:has(.bld-opt[aria-disabled="true"]) { background: transparent; border-style: dashed; border-color: var(--border-strong); }
.bld-opt {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  min-height: var(--bld-hit);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.bld-opt:focus-visible { position: relative; z-index: 1; }
.bld-opt[aria-disabled="true"] { cursor: not-allowed; color: var(--text-muted); }
.bld-opt-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 0; }
.bld-opt-name { font-weight: 600; }
.bld-opt-meta { font-size: var(--text-xs); color: var(--text-muted); }
.bld-opt-sum { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.4; }
.bld-opt-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: 2px; }
/* The marker takes its own line under the text, so it never takes width from the body. */
.bld-opt-check { flex: 1 0 100%; order: 3; display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: 600; }
.bld-opt-lead + .bld-opt-body + .bld-opt-check { padding-left: calc(1.25rem + var(--space-3)); }
.bld-opt-lead:has(.bld-thumb) + .bld-opt-body + .bld-opt-check { padding-left: calc(3.25rem + var(--space-3)); }
.bld-opt-check .bld-icon { color: var(--accent); }
.bld-opt-link { flex: none; padding: 0 var(--space-3); border-left: 1px solid var(--border); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--text-xs); }
.bld-opt-link:focus-visible { position: relative; z-index: 1; }

.bld-empty { padding: var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-muted); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.bld-empty-title { color: var(--text); font-weight: 700; font-size: var(--text-md); }

/* ---------- canvas ---------- */
.bld-canvas { display: flex; flex-direction: column; gap: var(--space-4); }
.bld-canvas[hidden], .bld-picker[hidden] { display: none; }
.bld-wpanel { position: relative; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.bld-stats { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.bld-canvas-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.bld-canvas-title { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.bld-sub { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; color: var(--text-muted); }
.bld-canvas-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.bld-weaponpage { align-self: flex-start; margin-top: var(--space-2); }
.bld-lead { color: var(--text-muted); line-height: var(--leading-body); max-width: 62ch; }
.bld-visual { display: flex; flex-direction: column; gap: var(--space-2); }
/* The frame has the artwork's own 8:3 shape, so it is sized before the picture arrives and the picture can never spill out
   of it, whatever the column width. */
.bld-silhouette {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 3;
  max-height: 9rem;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  color: var(--text);
}
.bld-silhouette .bld-art, .bld-silhouette .bld-glyph { position: absolute; inset: 0; width: 100%; height: 100%; padding: var(--space-2); object-fit: contain; }
.bld-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.bld-glyph { display: block; width: 100%; height: 100%; }

.bld-sec { display: flex; flex-direction: column; gap: var(--space-2); }
.bld-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.bld-count { font-weight: 600; }

.bld-stat { display: flex; flex-direction: column; gap: 6px; padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.bld-stat-top { display: flex; justify-content: space-between; gap: var(--space-3); }
.bld-stat-label { color: var(--text-muted); }
.bld-stat-value { font-weight: 700; }
.bld-meter { height: 0.5rem; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.bld-meter-fill { display: block; height: 100%; background: var(--text-muted); border-radius: 2px; }
.bld-stat-foot { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.bld-stat-range { flex: none; color: var(--text-subtle); }

.bld-dlist { display: flex; flex-direction: column; }
.bld-drow { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.bld-drow dt { color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.bld-drow dd { font-weight: 700; text-align: right; }

/* ---------- gunsmith: one row per attachment type, the Apex row below, one row open at a time ---------- */
.bld-name-list { display: flex; flex-direction: column; gap: var(--space-1); }
/* The row: type icon, the type with what it holds on its right, a chevron; the top effects of a chosen name sit under them. */
.bld-name-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-2);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-3);
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.bld-name-btn:hover { background: var(--surface-3); }
.bld-name-row.is-open > .bld-name-btn { background: var(--surface-3); border-color: var(--accent); }
.bld-name-main { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.bld-name-type { flex: none; display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; }
.bld-name-type .bld-icon { width: 0.875rem; height: 0.875rem; color: var(--accent); }
.bld-name-val { flex: 1 1 0; min-width: 0; text-align: right; overflow-wrap: anywhere; line-height: 1.3; }
.bld-name-btn > .bld-icon:last-child { transition: transform var(--dur-fast) var(--ease-out); color: var(--text-muted); }
.bld-name-btn[aria-expanded="true"] > .bld-icon:last-child { transform: rotate(180deg); }
.bld-name-fx { grid-column: 2 / -1; grid-row: 2; min-width: 0; padding-bottom: var(--space-1); }
.bld-name-fx:empty { display: none; }
.bld-name-fx .bld-choice-fx { flex-direction: row; flex-wrap: wrap; gap: 0 var(--space-3); margin-top: 0; }
/* A row that cannot be used right now (blocked by the Apex, limit reached): dashed, quiet, still focusable to read why. */
.bld-name-btn[aria-disabled="true"] { background: transparent; border-style: dashed; border-color: var(--border-strong); color: var(--text-muted); cursor: not-allowed; }
.bld-name-btn[aria-disabled="true"]:hover { background: transparent; }
.bld-name-row.is-blocked .bld-name-main, .bld-name-row.is-limit .bld-name-main { grid-column: 2 / -1; }
.bld-name-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0 var(--space-2); min-width: 0; }
.bld-name-body[hidden] { display: none; }
.bld-name-act { align-self: flex-start; margin-left: calc(-1 * var(--space-3)); text-decoration: underline; text-decoration-color: var(--border-control); text-underline-offset: 3px; }
.bld-name-act:hover { text-decoration-color: currentColor; }
.bld-typedesc { line-height: 1.45; }

/* The Apex Attachment: one compact row below the slot rows; what it does sits behind a disclosure. */
.bld-apex { display: flex; flex-direction: column; margin-top: var(--space-1); padding: var(--space-1) var(--space-3) 0; background: var(--surface-2); border: 1px solid var(--border-control); border-radius: var(--radius-md); }
.bld-apex.is-on { border-color: var(--accent); }
.bld-apex-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.bld-apex-id { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-2); align-items: center; min-width: 0; }
.bld-apex-id .bld-pic { grid-row: 1 / span 2; }
.bld-apex-name { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.bld-apex-blocks { line-height: 1.4; }
.bld-apex-sum { line-height: 1.45; }
.bld-apex-req { display: flex; gap: var(--space-1); align-items: center; font-weight: 600; color: var(--text); }
.bld-apex .bld-more { padding-bottom: var(--space-1); }
.bld-honest { line-height: 1.5; }

/* The free-text name box, for a name the cards do not list. */
.bld-nameinput {
  width: 100%;
  min-width: 0;
  min-height: var(--bld-hit);
  padding: 0 var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  font-size: 1rem;
}
.bld-nameinput::placeholder { color: var(--text-subtle); opacity: 1; }
.bld-nameinput:focus-visible { border-color: var(--accent); }
.bld-nameinfo { display: flex; flex-direction: column; gap: var(--space-2); }
.bld-nameinfo:empty { display: none; }
.bld-nameinfo-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bld-nameinfo-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); }
.bld-nameinfo-h { font-weight: 700; margin-bottom: 2px; }
.bld-nameinfo li { color: var(--text-muted); line-height: 1.4; padding: 1px 0; }
.bld-nameinfo-about { font-weight: 600; line-height: 1.4; }
.bld-choice-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.bld-choice-tools .bld-search { flex: 1 1 12rem; max-width: 22rem; }
.bld-filter-count { font-size: var(--text-xs); color: var(--text-muted); }
.bld-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: var(--space-2); }
.bld-choice {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--bld-hit);
  padding: var(--space-2);
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.bld-choice[hidden] { display: none; }
.bld-choice:hover { background: var(--surface-3); }
.bld-choice[aria-pressed="true"] { background: var(--surface-3); border-color: var(--accent); }
.bld-choice-lead { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; }
.bld-choice-lead .bld-pic { width: 1.5rem; height: 1.5rem; color: var(--text-muted); }
.bld-choice[aria-pressed="true"] .bld-choice-lead .bld-pic { color: var(--accent); }
.bld-apic { display: block; width: 2.5rem; height: 2.5rem; object-fit: contain; }
.bld-apic-info { flex: none; }
.bld-choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bld-choice-name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.bld-choice-about { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.35; overflow-wrap: anywhere; }

/* The official and derived numbers below 1200px: one closed disclosure, no longer the first thing a phone shows. */
.bld-fold-sum {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--bld-hit);
  padding: 0 var(--space-3);
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.bld-fold-sum::-webkit-details-marker { display: none; }
.bld-fold-sum:hover { background: var(--surface-3); }
.bld-fold-sum .bld-icon { color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-out); }
.bld-fold[open] > .bld-fold-sum .bld-icon { transform: rotate(180deg); }
.bld-fold > .bld-sec { margin-top: var(--space-4); }

/* ---------- community stats: change chips on name cards, the Stats section, effects under a named attachment ---------- */
.bld-choice-fx { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; min-width: 0; }
.bld-eff { display: block; min-width: 0; font-size: var(--text-xs); line-height: 1.35; color: var(--text-muted); white-space: normal; overflow-wrap: anywhere; }
/* "ADS 13% slower": the figure and its word stay together in the verdict colour, the stat name before them may wrap. */
.bld-eff-pct { font-weight: 700; white-space: nowrap; }
.bld-eff-pct.is-better, .bld-cs-delta.is-better { color: var(--positive); }
.bld-eff-pct.is-worse, .bld-cs-delta.is-worse { color: var(--negative); }
.bld-cs-delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bld-cs-delta .bld-dir { width: 0.875rem; height: 0.875rem; }

/* The page already pads scrolling by the site header (base.css); this clears the sticky level bar below 1200px. */
.bld-cstats { gap: var(--space-2); min-width: 0; scroll-margin-top: 3.25rem; }
.bld-cstats .bld-sec-head { justify-content: flex-start; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.bld-cstats .bld-sec-head .bld-h2:focus-visible { border-radius: var(--radius-sm); }
.bld-cs-status { font-weight: 600; }
.bld-cs-honest { display: flex; flex-direction: column; gap: 2px; }
.bld-cs-groups { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-2); }
.bld-cs-ghead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-1); }
.bld-cs-gname { margin: 0; font-size: var(--text-sm); font-weight: 700; }
.bld-cs-gsum { color: var(--text-muted); }
.bld-cs-rows { display: flex; flex-direction: column; }
/* Rows carry their own side padding so the change highlight has room; the hairline stays as wide as the text. */
.bld-cs-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-3);
  align-items: baseline;
  padding: 6px var(--space-2);
  margin-inline: calc(-1 * var(--space-2));
  border-radius: var(--radius-sm);
}
.bld-cs-row::before { content: ""; position: absolute; top: 0; left: var(--space-2); right: var(--space-2); border-top: 1px solid var(--border); }
.bld-cs-name { color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; }
.bld-cs-row.is-changed .bld-cs-name { color: var(--text); }
.bld-cs-row.is-changed .bld-cs-val { grid-column: 1 / -1; grid-row: 2; font-weight: 700; font-variant-numeric: tabular-nums; }
.bld-cs-row.is-changed .bld-cs-delta { grid-column: 2; grid-row: 1; }
.bld-cs-right { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--space-2); text-align: right; }
.bld-cs-row.is-same .bld-cs-val { font-variant-numeric: tabular-nums; }
.bld-cs-same { color: var(--text-muted); font-size: var(--text-xs); }
.bld-cs-note { grid-column: 1 / -1; }
.bld-cs-tools { display: flex; margin-top: var(--space-1); }
.bld-cs-toggle { min-height: var(--bld-hit); font-variant-numeric: tabular-nums; }
.bld-cs-toggle[hidden] { display: none; }
.bld-cs-toggle[aria-pressed="true"] { background: var(--surface-3); border-color: var(--accent); }

/* At a glance: the biggest wins and losses in plain words. The verdict is also a word at the end of each line. */
.bld-glance { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-1); }
.bld-glance[hidden] { display: none; }
.bld-glance-list { display: flex; flex-direction: column; }
.bld-glance-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 3px 0; }
.bld-glance-text { min-width: 0; overflow-wrap: anywhere; }
.bld-glance-change { font-weight: 700; white-space: nowrap; }
.bld-glance-change.is-better { color: var(--positive); }
.bld-glance-change.is-worse { color: var(--negative); }
.bld-glance-verdict { flex: none; font-size: var(--text-xs); color: var(--text-muted); }
/* Below 1200px the grouped table is one closed disclosure under the glance. */
.bld-cs-fold { margin-top: var(--space-2); }
.bld-cs-fold[hidden] { display: none; }
.bld-cs-fold > .bld-cs-groups { margin-top: var(--space-4); }

/* The one moment of feedback: a row whose value just moved is tinted, then the tint fades out. */
@keyframes bld-flash { from { background-color: var(--surface-3); } to { background-color: transparent; } }
.bld-cs-row.is-flash { animation: bld-flash 250ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .bld-cs-row.is-flash { animation: none; } }

/* Below 1200px the readout is far from the Gunsmith, so its head offers a jump to it. */
.bld-gs-head { display: flex; flex-direction: column; gap: var(--space-2); }
.bld-digest { width: 100%; justify-content: space-between; font-variant-numeric: tabular-nums; }
.bld-digest[hidden] { display: none; }
.bld-digest .bld-icon { color: var(--text-muted); }

.bld-nameinfo-fx { display: flex; flex-direction: column; gap: var(--space-1); }
.bld-nameinfo-fx .bld-nameinfo-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bld-fx { display: flex; flex-direction: column; }
.bld-fx li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 2px 0; color: var(--text); }
.bld-fx-name { color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; }
.bld-fx-change { font-weight: 700; white-space: nowrap; text-align: right; }
.bld-fx-change.is-better { color: var(--positive); }
.bld-fx-change.is-worse { color: var(--negative); }

/* Native disclosure for the rest of a list ("3 more"). No script; the browser handles Space and Enter. */
.bld-more { display: flex; flex-direction: column; }
.bld-more-body { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-1); }
.bld-more-sum {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-1);
  min-height: var(--bld-hit);
  padding: 0 var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.bld-more-sum::-webkit-details-marker { display: none; }
.bld-more-sum:hover { color: var(--text); }
.bld-more-sum .bld-icon { transition: transform var(--dur-fast) var(--ease-out); }
.bld-more[open] > .bld-more-sum .bld-icon { transform: rotate(180deg); }

.bld-switch {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--bld-hit);
  padding: 0 var(--space-2) 0 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
}
.bld-switch-track {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 1.25rem;
  background: var(--surface-3);
  border: 1px solid var(--border-control);
  border-radius: 999px;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.bld-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.875rem;
  height: 0.875rem;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.bld-switch[aria-checked="true"] .bld-switch-track { background: var(--accent); border-color: var(--accent); }
.bld-switch[aria-checked="true"] .bld-switch-thumb { transform: translateX(1rem); background: var(--accent-ink); }
.bld-switch:hover .bld-switch-track { border-color: var(--text-muted); }

/* ---------- summary ---------- */
.bld-summary { display: flex; flex-direction: column; gap: var(--space-4); }
.bld-req { font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-tight); }
.bld-reset { align-self: flex-start; }
/* Below 1200px the sticky bar carries the one amber Copy link. */
@media (max-width: 1199.98px) { .bld-sum-copy { display: none; } .bld-summary .bld-btnrow:not(:has(.bld-btn:not(.bld-sum-copy))) { display: none; } }
.bld-levelrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.bld-numfield input {
  width: 5rem;
  min-height: var(--bld-hit);
  padding: 0 var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  font-size: 1rem;
}
.bld-numfield input:focus-visible { border-color: var(--accent); }
.bld-warn-text { display: flex; gap: var(--space-1); align-items: flex-start; color: var(--negative); line-height: 1.4; }
.bld-warn-text .bld-icon { margin-top: 1px; width: 0.875rem; height: 0.875rem; }
.bld-urlfield { display: flex; flex-direction: column; gap: var(--space-1); }
.bld-urlfield input {
  width: 100%;
  min-height: var(--bld-hit);
  padding: 0 var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  font-size: 1rem;
  text-overflow: ellipsis;
}
.bld-urlfield input:focus-visible { border-color: var(--accent); }

/* ---------- tablet: two-column canvas ---------- */
/* Left: weapon, Stats, official numbers. Right: the Gunsmith across all of them. */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .bld-canvas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "w g" "c g" "s g";
    grid-template-rows: auto auto 1fr;
    align-items: start;
    gap: var(--space-4);
  }
  .bld-canvas:not(:has(> .bld-cs-col)) {
    grid-template-areas: "w g" "s g";
    grid-template-rows: auto 1fr;
  }
  .bld-wpanel { grid-area: w; }
  .bld-cs-col { grid-area: c; min-width: 0; }
  .bld-stats { grid-area: s; }
  .bld-gunsmith { grid-area: g; }
}

/* ---------- desktop: create-a-class layout; the page scrolls, rail, Stats and summary stay in view ---------- */
@media (min-width: 1200px) {
  .bld { --bld-hit: 2.25rem; }
  .bld-link { min-height: 1.75rem; }
  .bld-slot { padding: 6px var(--space-3); }
  /* The stage (workbench or option list) fills columns 2-3; the rail and the summary stand either side. The Gunsmith
     (column 3) spans the weapon and Stats rows and the spare height goes to the Stats row (1fr), so nothing opens a gap
     between the two panels. The top row exists only while there are link notes to show. */
  .bld.is-ready {
    --stage: "rail wpan gun sum" "rail cs gun sum" "rail stats stats sum";
    --stage-rows: auto 1fr auto;
    display: grid;
    grid-template-columns: 16rem minmax(0, 1.1fr) minmax(0, 1fr) 18.5rem;
    grid-template-areas: var(--stage);
    grid-template-rows: var(--stage-rows);
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3);
  }
  .bld.is-ready.is-listing { --stage: "rail pick pick sum"; --stage-rows: auto; }
  .bld.is-ready.has-notices { grid-template-areas: "rail top top sum" var(--stage); grid-template-rows: auto var(--stage-rows); }
  .bld-top { display: none; }
  .has-notices .bld-top { display: flex; flex-direction: column; gap: var(--space-2); grid-area: top; min-width: 0; }
  .bld-rail, .bld-summary {
    position: sticky;
    top: calc(var(--header-h) + var(--space-3));
    align-self: start;
    max-height: calc(100dvh - var(--header-h) - 2 * var(--space-3));
    overflow: auto;
  }
  .bld-rail { grid-area: rail; }
  .bld-summary { grid-area: sum; }

  /* The canvas wrapper dissolves: its blocks become panels in the page grid. */
  .bld-canvas { display: contents; }
  .bld-wpanel, .bld-gunsmith, .bld-cstats, .bld-stats, .bld-picker {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
  }
  .bld-wpanel { grid-area: wpan; align-self: stretch; }
  /* No Stats panel (no stats file): the weapon panel takes both rows. */
  .bld-wpanel:not(:has(~ .bld-cs-col)) { grid-row: wpan-start / cs-end; }
  .bld-cs-col { grid-area: cs; align-self: stretch; min-width: 0; }
  .bld-gunsmith { grid-area: gun; align-self: stretch; min-width: 0; }
  /* The live readout follows the page while the long Gunsmith scrolls, like the rail and summary. */
  .bld-cstats {
    position: sticky;
    top: calc(var(--header-h) + var(--space-3));
    align-self: start;
    max-height: calc(100dvh - var(--header-h) - 2 * var(--space-3));
    overflow: auto;
    scroll-margin-top: 0;
  }
  .bld-picker { grid-area: pick; }
  .bld-stats { grid-area: stats; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
  .bld-stats:empty { display: none; }
  .bld-digest { display: none; }

  .bld-bar { display: none; }
  .bld-notices { max-height: 9rem; overflow: auto; }

  .bld-slots { grid-template-columns: 1fr; }
  .bld-search input, .bld-numfield input, .bld-urlfield input, .bld-nameinput { font-size: var(--text-sm); }
  .bld-urlfield input { font-size: var(--text-xs); }
  .bld-silhouette { max-height: 11.25rem; }
  .bld-fchips { flex-wrap: wrap; overflow: visible; padding: 0; margin: 0; }
  .bld-fchip { min-height: 2rem; padding: 0 var(--space-2); }
  .bld-filters { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
  .bld-search { flex: 0 1 10rem; min-width: 9rem; }
  .bld-fchips { flex: 1 1 0; min-width: 24rem; }
}

@media (min-width: 1440px) {
  .bld.is-ready { grid-template-columns: 17.5rem minmax(0, 1.05fr) minmax(0, 1fr) 19.5rem; }
}

/* ---------- pictograms (decorative sprites; sized in CSS so nothing shifts when a sprite loads) ---------- */
.bld-pic { flex: none; display: block; width: 1rem; height: 1rem; fill: currentColor; color: var(--text-muted); }
.bld-tag .bld-pic { width: 1rem; height: 1rem; color: inherit; }
.bld-name-btn .bld-pic { width: 1.25rem; height: 1.25rem; color: var(--text-muted); }
.bld-apex-id .bld-pic { width: 1.25rem; height: 1.25rem; color: var(--text-muted); }

.bld-opt-lead { flex: none; display: inline-flex; width: 1.25rem; height: 1.25rem; margin-top: 1px; color: var(--text-muted); }
.bld-opt-lead .bld-pic { width: 1.25rem; height: 1.25rem; }
.bld-opt[aria-pressed="true"] .bld-opt-lead .bld-pic { color: var(--text); }
.bld-opt[aria-disabled="true"] .bld-opt-lead { opacity: 0.7; }

.bld-slot-lead { flex: none; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; }
.bld-slot-lead .bld-pic { width: 1.25rem; height: 1.25rem; }
.bld-slot[aria-current="true"] .bld-slot-lead .bld-pic { color: var(--text); }

/* ---------- weapon thumbnails (8:3, fixed boxes) ---------- */
.bld-thumb { display: block; width: 3.25rem; height: 1.25rem; }
.bld-thumb .bld-art, .bld-thumb .bld-glyph { width: 100%; height: 100%; object-fit: contain; }
.bld-thumb .bld-glyph { color: var(--text-muted); }
.bld-opt-lead:has(.bld-thumb) { width: 3.25rem; }
.bld-slot-thumb { width: 2.5rem; height: 1rem; }
@media (max-width: 1199.98px) { .bld-slot-thumb { display: none; } }
.bld-slot-thumb .bld-art, .bld-slot-thumb .bld-glyph { width: 100%; height: 100%; object-fit: contain; }
.bld-slot-thumb .bld-glyph { color: var(--text-muted); }
.bld-pic-img { object-fit: contain; }

/* ---------- community tier badge (muted letter, no colour meaning) ---------- */
.tier-badge { display: inline; margin-left: var(--space-1); font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }