/* RED BASTION — Phase 7 build surfaces: the architect panel (#rb-architect)
   and the build-mode HUD (#rb-buildhud). Both roots live INSIDE #hud, so the
   palette vars (--gold, --bone, --dim, --red, --redhi, --panel) and the
   .menu-btn base style cascade in from hud.css; this file only shapes them.
   Loaded by a <link> the coordinator adds next to hud.css. */

/* ==================== ARCHITECT PANEL ==================== */

#rb-architect {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 8, 6, 0.68);
  pointer-events: auto;
  text-transform: uppercase;
}
#rb-architect.hidden { display: none !important; }

#rb-architect .rb-arch-panel {
  display: flex; flex-direction: column;
  width: min(940px, 94vw); max-height: 90vh;
  padding: 16px 22px 12px;
  background: var(--panel); border: 1px solid var(--dim);
  outline: 1px solid rgba(201, 162, 39, 0.18); outline-offset: 5px;
  box-shadow: 0 0 0 4px rgba(8, 6, 4, 0.35), 0 12px 40px rgba(0, 0, 0, 0.55);
}

#rb-architect .rb-arch-head { display: flex; align-items: center; gap: 14px; }
#rb-architect .rb-arch-title {
  font-size: 17px; letter-spacing: 0.4em; color: var(--gold-hi);
  white-space: nowrap;
}
#rb-architect .rb-arch-res { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
#rb-architect .rb-arch-chip {
  padding: 2px 7px; border: 1px solid var(--dim); background: rgba(20, 16, 8, 0.4);
  font-size: 9.5px; letter-spacing: 0.12em; color: var(--bone); white-space: nowrap;
}
#rb-architect .rb-arch-chip b { color: var(--gold-hi); }
#rb-architect .rb-arch-close {
  display: inline-block; padding: 6px 14px; font-size: 11px; letter-spacing: 0.22em;
  margin: 0; flex: none;
}

#rb-architect .rb-arch-sub {
  margin-top: 6px; font-size: 9.5px; letter-spacing: 0.28em;
  color: rgba(201, 162, 39, 0.6);
  border-bottom: 1px solid rgba(201, 162, 39, 0.18); padding-bottom: 6px;
}
#rb-architect .rb-arch-stats { display: flex; gap: 22px; padding: 7px 0 4px; }
#rb-architect .rb-arch-stat { font-size: 10.5px; letter-spacing: 0.2em; color: rgba(201, 162, 39, 0.8); }
#rb-architect .rb-arch-stat b { color: var(--bone); margin-left: 6px; }

#rb-architect .rb-arch-body {
  display: flex; gap: 14px; margin-top: 6px; min-height: 340px; overflow: hidden;
}

/* category tabs (menu-btn base, resized) */
#rb-architect .rb-arch-tabs { display: flex; flex-direction: column; gap: 6px; width: 168px; flex: none; }
#rb-architect .rb-arch-tab {
  padding: 9px 8px; font-size: 10.5px; letter-spacing: 0.2em; margin: 0;
}
#rb-architect .rb-arch-tab.active {
  background: rgba(201, 162, 39, 0.2); color: #fff0c8; border-color: var(--gold-hi);
}

/* zone rows (menu-btn base for gamepad reach; row look on top) */
#rb-architect .rb-arch-zones {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto; padding-right: 4px; min-width: 0;
}
#rb-architect .rb-zone {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 7px 11px; margin: 0; letter-spacing: 0.1em; font-size: 11px;
}
#rb-architect .rb-zone.active {
  background: rgba(201, 162, 39, 0.16); border-color: var(--gold-hi);
}
/* locked rows stay fully clickable — the press answers in words; the red
   edge marks the seal without dimming the reachable button */
#rb-architect .rb-zone.locked { border-color: rgba(142, 47, 42, 0.75); }
#rb-architect .rb-z-name { color: var(--gold-hi); font-size: 11.5px; letter-spacing: 0.14em; }
#rb-architect .rb-z-pips { color: var(--gold); font-size: 10px; letter-spacing: 0.2em; }
#rb-architect .rb-z-state { color: rgba(216, 207, 180, 0.6); font-size: 9.5px; letter-spacing: 0.14em; }
#rb-architect .rb-arch-note {
  margin-top: 4px; padding: 6px 10px; border: 1px dashed rgba(201, 162, 39, 0.3);
  font-size: 9px; letter-spacing: 0.16em; color: rgba(216, 207, 180, 0.5);
}

/* preview column */
#rb-architect .rb-arch-preview {
  width: 250px; flex: none; display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
}
#rb-architect .rb-arch-thumb {
  width: 220px; height: 160px; border: 1px solid var(--dim); background: #111;
  align-self: center;
}
#rb-architect .rb-arch-pname { font-size: 12px; letter-spacing: 0.16em; color: var(--gold-hi); }
#rb-architect .rb-arch-pdesc {
  font-size: 10.5px; line-height: 1.5; color: var(--bone);
  letter-spacing: 0.04em; text-transform: none;
}
#rb-architect .rb-arch-cost-h {
  font-size: 9.5px; letter-spacing: 0.24em; color: var(--gold);
  border-bottom: 1px solid rgba(201, 162, 39, 0.18); padding-bottom: 3px; margin-bottom: 4px;
}
#rb-architect .rb-arch-cost-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 10px; letter-spacing: 0.1em; color: var(--bone); padding: 2px 0;
}
#rb-architect .rb-arch-cost-row.short { color: var(--redhi); }
#rb-architect .rb-arch-cost-row.dim { color: rgba(216, 207, 180, 0.45); }
#rb-architect .rb-arch-meta-row {
  font-size: 9.5px; letter-spacing: 0.14em; color: rgba(201, 162, 39, 0.7); padding: 1px 0;
}
#rb-architect .rb-arch-upgrade {
  margin-top: auto; padding: 10px 8px; font-size: 11px; letter-spacing: 0.18em;
}

#rb-architect .rb-arch-foot {
  margin-top: 10px; text-align: center; font-size: 9.5px; letter-spacing: 0.28em;
  color: rgba(216, 207, 180, 0.4);
  border-top: 1px solid rgba(201, 162, 39, 0.14); padding-top: 7px;
}

/* ==================== BUILD-MODE HUD ==================== */

/* the placement reticle replaces the HUD crosshair — hud.js toggles
   'build-open' on #hud from G.build.active() (one-line coordinator hook) */
#hud.build-open .crosshair { visibility: hidden; }

#rb-buildhud {
  position: absolute; inset: 0; z-index: 16;
  pointer-events: none;   /* build HUD is read-only; input flows through keys */
  text-transform: uppercase;
  font-family: 'Consolas', 'Lucida Console', 'Courier New', monospace;
}
#rb-buildhud.hidden, #rb-buildhud .hidden { display: none !important; }

/* -- the 9-plan radial (hold Q) -- */
#rb-b-radial { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#rb-b-hub {
  position: absolute; left: -85px; top: -22px; width: 170px;
  text-align: center; font-size: 10px; letter-spacing: 0.14em; line-height: 1.5;
  color: var(--bone); text-shadow: 0 1px 2px #000;
}
#rb-buildhud .rb-b-slot {
  position: absolute; left: 0; top: 0; width: 66px; margin-left: -33px; margin-top: -44px;
  transform: rotate(var(--a)) translateX(158px) rotate(calc(-1 * var(--a)));
  padding: 5px 4px 4px; text-align: center;
  background: var(--panel); border: 1px solid var(--dim);
}
#rb-buildhud .rb-b-slot canvas { display: block; margin: 0 auto; width: 48px; height: 48px; }
#rb-buildhud .rb-b-slot.sel {
  border-color: var(--gold-hi); background: rgba(201, 162, 39, 0.2);
  box-shadow: 0 0 10px rgba(201, 162, 39, 0.35);
}
#rb-buildhud .rb-b-slot.armed { border-color: var(--gold); }
/* unaffordable: red and inert-LOOKING, but still listed and selectable —
   the release answers the refusal in words */
#rb-buildhud .rb-b-slot.disabled { border-color: rgba(201, 79, 58, 0.8); }
#rb-buildhud .rb-b-slot.disabled canvas { opacity: 0.45; }
#rb-buildhud .rb-b-slot.disabled .rb-b-cost { color: var(--redhi); }
#rb-buildhud .rb-b-name { font-size: 8.5px; letter-spacing: 0.16em; color: var(--gold); margin-top: 2px; }
#rb-buildhud .rb-b-cost { font-size: 8.5px; letter-spacing: 0.1em; color: rgba(216, 207, 180, 0.7); }

/* -- placement reticle (center; replaces the HUD crosshair) -- */
#rb-b-reticle { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#rb-b-reticle .rb-b-frame {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px;
  border: 1px solid var(--gold); transform: rotate(45deg);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}
#rb-b-reticle.ok .rb-b-frame { border-color: #4aff6a; }
#rb-b-reticle.bad .rb-b-frame { border-color: #c94f3a; }
#rb-b-reticle .rb-b-label {
  position: absolute; left: -110px; top: 18px; width: 220px; text-align: center;
  font-size: 11px; letter-spacing: 0.18em; color: var(--bone); text-shadow: 0 1px 2px #000;
}
#rb-b-reticle .rb-b-sub {
  position: absolute; left: -130px; top: 34px; width: 260px; text-align: center;
  font-size: 9px; letter-spacing: 0.14em; color: rgba(216, 207, 180, 0.6); text-shadow: 0 1px 2px #000;
}
#rb-b-reticle.bad .rb-b-sub { color: var(--redhi); }

/* -- scrap progress -- */
#rb-b-scrap {
  position: absolute; left: 50%; bottom: 31%; width: 250px; margin-left: -125px;
  text-align: center;
}
#rb-b-scrap .rb-b-scrap-label {
  font-size: 9.5px; letter-spacing: 0.18em; color: var(--bone);
  text-shadow: 0 1px 2px #000; margin-bottom: 4px;
}
#rb-b-scrap .rb-b-track {
  height: 6px; border: 1px solid var(--dim); background: rgba(10, 8, 6, 0.55);
  transform: skewX(-12deg); overflow: hidden;
}
#rb-b-scrap .rb-b-fill { height: 100%; width: 0%; background: var(--redhi); }

/* -- tier chip + controls strip -- */
#rb-b-tier {
  position: absolute; right: 22px; bottom: 64px;
  padding: 4px 10px; border: 1px solid var(--dim); background: var(--panel);
  font-size: 10px; letter-spacing: 0.18em; color: var(--gold-hi);
}
#rb-b-help {
  position: absolute; left: 0; right: 0; bottom: 10px; text-align: center;
  font-size: 9.5px; letter-spacing: 0.22em; color: rgba(201, 162, 39, 0.6);
  text-shadow: 0 1px 2px #000;
}