/* =========================================================
   CURRENT DEBUG SOURCE OF TRUTH

   Final intended behavior:
   - normal mode and ?copydebug=1 use identical wallet/email hitbox geometry
   - debug mode adds visible colors/labels only

   Future nav-debug.css extraction should only move:
   - #navCopyDebug panel styles
   - visible-only debug color/label rules from this final block

   Do not move geometry rules first.
========================================================= */

/* FINAL CLEAN WALLET/EMAIL COPY HITBOX RULES
   Normal mode and ?copydebug=1 use identical hitbox geometry.
   Debug mode only adds visible colors/labels. */

/* Wallet/email card uses equal vertical spacing:
   top spacer = middle spacer = bottom spacer */
.png-wallet-card {
  height: 90px !important;
  min-height: 90px !important;
  max-height: 90px !important;

  display: grid !important;
  grid-template-rows: 10px 30px 10px 30px 10px !important;
  align-items: center !important;

  gap: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;

  cursor: default !important;
  pointer-events: none !important;
}

/* Wallet row */
.png-wallet-card .wallet-line:not(.email-line) {
  grid-row: 2 !important;
}

/* Email row */
.png-wallet-card .wallet-line.email-line {
  grid-row: 4 !important;
  margin-top: 0 !important;
}

/* Rows are visual holders only. They must never catch/route clicks. */
.png-wallet-card .wallet-line {
  position: relative !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin-top: 0 !important;
  cursor: default !important;
  pointer-events: none !important;

  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* These two boxes are the ONLY clickable copy targets. */
#navAddr.clickcopy,
#navEmail.clickcopy {
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;

  width: 90% !important;
  max-width: 90% !important;
  min-width: 0 !important;

  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  line-height: 30px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Normal mode: same hitboxes, invisible debug styling. */
body:not(.copy-debug-mode) #navAddr.clickcopy,
body:not(.copy-debug-mode) #navEmail.clickcopy,
html:not(.copy-debug-mode) #navAddr.clickcopy,
html:not(.copy-debug-mode) #navEmail.clickcopy {
  background: transparent !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Debug mode: visible colors only. No geometry changes. */
.copy-debug-mode .png-wallet-card {
  outline: 2px dashed rgba(255, 0, 255, 0.95) !important;
}

.copy-debug-mode #navAddr.clickcopy {
  background: rgba(0, 90, 255, 0.55) !important;
  outline: 2px solid rgba(0, 160, 255, 0.95) !important;
  color: #ffffff !important;
}

.copy-debug-mode #navEmail.clickcopy {
  background: rgba(255, 0, 210, 0.55) !important;
  outline: 2px solid rgba(255, 60, 235, 0.95) !important;
  color: #ffffff !important;
}

.copy-debug-mode #navAddr.clickcopy::before {
  content: "WALLET";
  position: absolute;
  left: -58px;
  top: 50%;
  transform: translateY(-50%);
  color: #69b7ff;
  font-size: 11px;
  font-weight: 900;
  pointer-events: none;
}

.copy-debug-mode #navEmail.clickcopy::before {
  content: "EMAIL";
  position: absolute;
  left: -48px;
  top: 50%;
  transform: translateY(-50%);
  color: #ff6df2;
  font-size: 11px;
  font-weight: 900;
  pointer-events: none;
}