/* AR Beam — robust modal viewport constraints + content inset (2026-09-03, v3)
   - Modal always fully inside the visible viewport: >= ~24px clearance on
     desktop, ~12-16px on small screens; width never exceeds the viewport;
     the bottom can never disappear below the viewport.
   - One scrollbar only: the modal body scrolls internally; the overlay
     itself never scrolls (no double scrollbars).
   - Content inset: modal data sits comfortably inside the card (not flush
     against the edges), and the sticky close button stays well inside the
     rounded corner — never cropped, never overlapping the card border.
   - Rounded corners, outer shadow, header and close button stay intact
     (no radius removal, no text shrinking, no cosmetic hacks).
   Height math uses --arb-vh (set by modal-viewport.js from the real visible
   height) with a plain vh fallback, so mobile/iPad browser chrome cannot
   push the modal out of view. */
.emp-modal-overlay {
  overflow: hidden !important; /* single scrollbar lives inside the modal */
}
.card-modal {
  width: min(1240px, calc(100vw - 48px)) !important;
  max-height: calc(var(--arb-vh, 1vh) * 100 - 48px) !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Content inset: keep data off the card edges (was zero padding). */
  padding: 14px 28px 26px !important;
}
/* Sticky close bar: keep the X inside the padded area, clear of the corner. */
.card-modal-bar {
  padding: 6px 0 10px !important;
}
/* Other height-capped modals get the same real-viewport treatment. */
.emp-modal {
  max-height: calc(var(--arb-vh, 1vh) * 100 - 48px) !important;
}
.mini-modal {
  max-height: calc(var(--arb-vh, 1vh) * 100 - 40px) !important;
}
/* Small screens: ~12-16px clearance, slightly tighter inner inset. */
@media (max-width: 720px) {
  .card-modal {
    width: calc(100vw - 28px) !important;
    max-height: calc(var(--arb-vh, 1vh) * 100 - 28px) !important;
    padding: 12px 16px 20px !important;
  }
  .emp-modal {
    max-height: calc(var(--arb-vh, 1vh) * 100 - 28px) !important;
  }
}
/* Long names/IDs/descriptions wrap instead of breaking the layout. */
.card-modal dd, .card-modal dt, .card-modal p, .card-modal h3, .card-modal span {
  overflow-wrap: anywhere;
}

/* ---- Equipment Detail: QR section rebalance -----------------------------
   Keeps the QR prominent and centered while removing excess vertical dead
   space; metadata, description, and Chain of Custody keep clear separation.
   Two-column metadata on desktop is untouched (base stylesheet already
   collapses to one column at <=640px). */
.eq-qr {
  padding: 4px 8px !important;
  gap: 4px !important;
}
.eq-qr img {
  width: 164px !important;
  height: 164px !important;
}
.eq-sub {
  margin: 12px 0 6px !important;
}