/* ============================================================
   MIND MATTER — Print Rack (WallArtStage v2)
   Floating print stage. Chrome stays quiet; the piece is the loudest
   thing on screen. Mirrors the closet's visual language.
   ============================================================ */
#waRoot {
  position: fixed;
  inset: 0;
  display: none;
  background: #070d18;
  z-index: 900;
}
#waRoot.open { display: block; }

.wa-stage { position: absolute; inset: 0; }
.wa-stage canvas { display: block; width: 100%; height: 100%; }

.wa-hud { position: absolute; inset: 0; pointer-events: none; }
.wa-hud button, .wa-hud input { pointer-events: auto; }

/* ---------- top bar ---------- */
.wa-topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(7,10,18,0.82), rgba(7,10,18,0));
}
.wa-brand {
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(233,228,216,0.9);
}
.wa-brand b { color: #d9a441; }
.wa-count {
  font-family: 'Space Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(233,228,216,0.5); margin-right: auto;
}
.wa-modes { display: flex; gap: 2px; border: 1px solid rgba(233,228,216,0.16); border-radius: 999px; padding: 2px; }
.wa-mode {
  background: none; border: 0; cursor: pointer; border-radius: 999px;
  padding: 5px 14px; color: rgba(233,228,216,0.6);
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.wa-mode.on { background: rgba(255,45,111,0.16); color: #fff; }
.wa-modes[hidden], .wa-edit-actions[hidden], .wa-thumbs[hidden] { display: none; }
.wa-scale, .wa-bag, .wa-exit {
  background: none; border: 1px solid rgba(233,228,216,0.18); border-radius: 999px;
  cursor: pointer; padding: 6px 14px; color: rgba(233,228,216,0.75);
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: all 0.2s;
}
.wa-scale:hover, .wa-bag:hover, .wa-exit:hover { border-color: #d9a441; color: #fff; }
.wa-scale.on { border-color: #d9a441; color: #d9a441; }
.wa-bag b { color: #d9a441; margin-left: 4px; }

/* ---------- browse arrows ---------- */
.wa-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1; cursor: pointer; pointer-events: auto;
  color: rgba(233,228,216,0.7);
  background: rgba(13,17,26,0.55);
  border: 1px solid rgba(233,228,216,0.14);
  transition: all 0.2s;
}
.wa-arrow:hover { color: #fff; border-color: #d9a441; background: rgba(13,17,26,0.85); }
.wa-arrow.off { opacity: 0.22; pointer-events: none; }
.wa-arrow-prev { left: 22px; }
.wa-arrow-next { right: 22px; }

.wa-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 0.1em; color: rgba(233,228,216,0.42);
  white-space: nowrap; transition: opacity 0.3s;
}
.wa-hint.fade { opacity: 0; }

/* ---------- thumbnail rail ---------- */
.wa-thumbs {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
  display: flex; gap: 8px; max-width: min(72vw, 720px);
  overflow-x: auto; padding: 6px 8px;
  pointer-events: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wa-thumbs::-webkit-scrollbar { display: none; }
.wa-thumbs:empty { display: none; }
.wa-thumb {
  flex: 0 0 auto; width: 46px; height: 46px; padding: 0;
  border-radius: 6px; border: 1px solid rgba(233,228,216,0.14);
  background: rgba(13,17,26,0.6); cursor: pointer; overflow: hidden;
  opacity: 0.55; transition: opacity 0.2s, border-color 0.2s, transform 0.2s;
}
.wa-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-thumb:hover { opacity: 0.9; }
.wa-thumb[aria-selected="true"] { opacity: 1; border-color: #ff2d6f; transform: translateY(-3px); }

/* ---------- artist link on the plaque ---------- */
.wa-profile-link {
  display: inline-block; margin-top: 10px; pointer-events: auto;
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #d9a441; text-decoration: none; border-bottom: 1px solid rgba(217,164,65,0.35);
}
.wa-profile-link:hover { color: #fff; border-color: #fff; }
.wa-profile-link[hidden] { display: none; }

/* ---------- plaque ---------- */
.wa-plaque {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: min(300px, calc(100vw - 44px));
  background: rgba(13,17,26,0.94);
  border: 1px solid rgba(233,228,216,0.14);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.6);
  opacity: 0; pointer-events: none; transition: opacity 0.28s;
  z-index: 3;
}
.wa-plaque.show { opacity: 1; pointer-events: auto; }
.wa-plaque-inner { padding: 18px; }
.wa-plaque-label {
  font-family: 'Space Mono', monospace; font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(233,228,216,0.45);
}
.wa-plaque h3 {
  margin: 8px 0 2px; font-family: 'Space Grotesk', sans-serif;
  font-size: 19px; line-height: 1.25; color: #e9e4d8;
}
.wa-plaque p {
  margin: 0; font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 0.12em; color: rgba(233,228,216,0.55);
}
.wa-spec { margin-top: 6px !important; color: rgba(233,228,216,0.42) !important; letter-spacing: 0.06em !important; }
.wa-plaque-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px;
}
.wa-price { font-family: 'Space Grotesk', sans-serif; font-size: 21px; color: #d9a441; }

.wa-btn {
  background: rgba(20,24,34,0.9); border: 1px solid rgba(233,228,216,0.18);
  border-radius: 999px; cursor: pointer; color: #e9e4d8;
  font-family: 'Space Mono', monospace; letter-spacing: 0.1em;
  text-transform: uppercase; transition: all 0.2s;
}
.wa-btn:hover { border-color: #d9a441; color: #fff; }
.wa-btn-sm { padding: 7px 15px; font-size: 10px; }
.wa-btn-gold { background: #d9a441; border-color: #d9a441; color: #14110b; font-weight: 700; }
.wa-btn-gold:hover { background: #e8b95a; }
.wa-btn.armed { border-color: #ff2d6f; background: rgba(255,45,111,0.16); color: #fff; }

.wa-edit-actions { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 6px; margin-top: 12px; }
.wa-edit-actions button {
  background: rgba(20,24,34,0.8); border: 1px solid rgba(233,228,216,0.14);
  border-radius: 8px; padding: 8px 4px; cursor: pointer; color: #e9e4d8;
  font-family: 'Space Mono', monospace; font-size: 10px;
}
.wa-edit-actions button:hover { border-color: #d9a441; }
.wa-edit-actions button.danger:hover { border-color: #ff2d6f; color: #ff2d6f; }

.wa-browser { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.wa-browser-count {
  font-family: 'Space Mono', monospace; font-size: 10px;
  color: rgba(233,228,216,0.45); white-space: nowrap;
}
.wa-slider { flex: 1; accent-color: #d9a441; }

/* ---------- creator bar + tray ---------- */
.wa-editorbar {
  position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; z-index: 4;
  background: rgba(13,17,26,0.94);
  border: 1px solid rgba(233,228,216,0.14);
  border-radius: 999px;
}
.wa-editorbar[hidden] { display: none; }
.wa-editorbar-title {
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(233,228,216,0.55); margin-right: 4px;
}

.wa-tray {
  position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px)); max-height: 200px; overflow: auto;
  background: rgba(13,17,26,0.94);
  border: 1px solid rgba(255,45,111,0.3);
  border-radius: 12px; padding: 12px; z-index: 4;
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}
.wa-tray[hidden] { display: none; }
.wa-tray-head {
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(233,228,216,0.55); margin-bottom: 10px;
}
.wa-tray-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.wa-tray-item {
  display: flex; flex-direction: column; gap: 6px; padding: 8px;
  background: rgba(20,24,34,0.8); border: 1px solid rgba(233,228,216,0.14);
  border-radius: 8px; cursor: pointer; transition: all 0.2s;
  color: #e9e4d8; font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; text-align: left;
}
.wa-tray-item:hover { border-color: #ff2d6f; background: rgba(255,45,111,0.1); }
.wa-tray-item img { width: 100%; height: 64px; object-fit: cover; border-radius: 4px; }
.wa-tray-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-tray-size {
  font-family: 'Space Mono', monospace !important; font-size: 9px !important;
  color: rgba(233,228,216,0.5) !important;
}
.wa-tray-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 4px 2px 2px; font-family: 'Space Grotesk', sans-serif;
}
.wa-tray-empty[hidden] { display: none; }
.wa-tray-empty b { font-size: 13px; color: #e9e4d8; }
.wa-tray-empty span { font-size: 12px; line-height: 1.45; color: rgba(233,228,216,0.6); }

@media (max-width: 720px) {
  .wa-plaque { right: 12px; left: 12px; width: auto; top: auto; bottom: 92px; transform: none; }
  .wa-arrow { width: 44px; height: 44px; font-size: 26px; }
  .wa-arrow-prev { left: 10px; }
  .wa-arrow-next { right: 10px; }
  .wa-tray { bottom: 130px; }
  .wa-topbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .wa-count { display: none; }
  .wa-hint { display: none; }
  .wa-thumbs { bottom: 14px; max-width: 92vw; }
  .wa-thumb { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-thumb, .wa-arrow, .wa-plaque { transition: none; }
}