/* ui/results/equip-overlay.css — the equip-from-reveal overlay (loot-vision.md §6, L2).
   Centered modal, same DIM-pass language as ui/shared/item-sheet.css. z-index 36 — above
   the results overlay (35), below toasts (40). Tap targets ≥44px (ui-design-system §7). */

.equip-overlay-root {
  position: fixed;
  inset: 0;
  z-index: 36;
  font-family: 'Courier New', Courier, monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  zoom: var(--ui-scale, 1);  /* menu-zoom accessibility setting, matches item-sheet.css */
}

.eo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 20, 0.68);
}

.eo-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw / var(--ui-scale, 1)));
  max-height: calc(88vh / var(--ui-scale, 1));
  display: flex;
  flex-direction: column;
  background: var(--void, #0a0e2a);
  border: 1px solid var(--amber-dim, rgba(255,176,0,.4));
  box-shadow: 0 0 0 1px rgba(255, 176, 0, .1), 0 12px 48px rgba(0, 0, 0, .7);
  animation: eo-pop-in .18s ease-out;
}
@keyframes eo-pop-in {
  from { transform: translate(-50%, calc(-50% + 16px)); opacity: 0; }
  to   { transform: translate(-50%, -50%);              opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .eo-modal { animation: none; }
}

.eo-header {
  flex-shrink: 0;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--green-dim, rgba(51,255,102,.25));
}
.eo-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--amber, #ffb000);
  text-shadow: 0 0 10px rgba(255,176,0,.35);
}

.eo-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Side-by-side compare row ────────────────────────────────────────────── */
.eo-compare-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.eo-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eo-col .eo-mini-card { margin: 0; }
.eo-col-empty {
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--green-dim, rgba(51,255,102,.25));
  padding: 18px 10px;
}
.eo-empty-note {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--green-dim, rgba(51,255,102,.4));
  text-align: center;
}
.eo-arrow {
  flex: 0 0 auto;
  align-self: center;
  font-size: 18px;
  color: var(--amber, #ffb000);
  opacity: .8;
}

/* Narrow screens — stack the two columns, arrow rotates to point down */
@media (max-width: 620px) {
  .eo-compare-row { flex-direction: column; }
  .eo-arrow { align-self: center; transform: rotate(90deg); }
}

/* ── VS EQUIPPED delta grid (same visual contract as item-sheet.js .is-compare) ── */
.eo-compare {
  border: 1px solid var(--green-dim, rgba(51,255,102,.25));
  background: rgba(51, 255, 102, .03);
  padding: 8px 10px;
}
.eo-compare-head {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--amber, #ffb000);
  margin-bottom: 6px;
}
.eo-compare-empty .eo-compare-head { color: var(--green-dim, rgba(51,255,102,.25)); margin-bottom: 0; }
.eo-compare-grid {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 3px 12px;
  align-items: baseline;
}
.eo-cmp-h {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--green, #33ff66);
  opacity: .55;
}
.eo-cmp-k { font-size: 10px; color: var(--amber, #ffb000); opacity: .85; letter-spacing: .5px; }
.eo-cmp-v { font-size: 11px; color: var(--green, #33ff66); font-weight: 700; text-align: right; }
.eo-cmp-w { font-size: 11px; color: var(--green, #33ff66); opacity: .55; text-align: right; }
.eo-cmp-d { font-size: 10px; text-align: center; min-width: 14px; }
.eo-cmp-up   { color: var(--green, #33ff66); }
.eo-cmp-down { color: var(--red, #ff5a4d); }
.eo-cmp-even { color: var(--green-dim, rgba(51,255,102,.25)); }

/* ── Action row ───────────────────────────────────────────────────────────── */
.eo-actions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--green-dim, rgba(51,255,102,.25));
  align-items: center;
}
.equip-overlay-root .touch-btn { position: static; transform: none; }

.eo-action {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 1.5px;
  cursor: pointer;
  background: none;
  border: 1px solid var(--green-dim, rgba(51,255,102,.25));
  color: var(--green, #33ff66);
  transition: background .1s, color .1s, border-color .1s;
}
.eo-action-equip {
  background: rgba(255, 176, 0, .1);
  border-color: var(--amber, #ffb000);
  color: var(--amber, #ffb000);
  font-weight: 700;
}
.eo-action-equip:hover { background: var(--amber, #ffb000); color: var(--void, #0a0e2a); }
.eo-action-close { flex: 0 1 auto; opacity: .8; }
.eo-equipped-tag {
  flex: 1 1 auto;
  text-align: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--green, #33ff66);
  border: 1px solid var(--green, #33ff66);
}

/* Focused cell (controller) — design-system §5 focus treatment. */
.eo-action.ui-focused {
  outline: 2.5px solid var(--amber, #ffb000);
  outline-offset: 1px;
  box-shadow: 0 0 12px rgba(255, 176, 0, .45);
}

@media (max-height: 480px) {
  .eo-modal { max-height: calc(96vh / var(--ui-scale, 1)); }
  .eo-body { padding: 6px 12px; gap: 6px; }
  .eo-actions { padding: 6px 12px; }
  .eo-action { min-height: 40px; }
}