/* Bioms · nav-wallet pill styles — shared across all primary pages.
   Companion to nav-wallet.js. Pages opt in by loading both files. */

/* Disconnected: solid ink chip (CTA, demands a click) */
.nav-wallet {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink);
  font: inherit;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em;
  padding: 7px 14px; border-radius: 999px;
  cursor: pointer; line-height: 1;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.nav-wallet:hover { opacity: 0.88; }
.nav-wallet:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav-wallet[disabled] { cursor: wait; opacity: 0.7; }

/* "Approve in wallet…" pulsing state — gives the user clear feedback
   that the request was sent and MetaMask popup is open (just out of
   view). Without this, the button visually doesn't change and people
   assume the click did nothing. */
.nav-wallet.connecting {
  animation: nav-wallet-pulse 1.4s ease-in-out infinite;
}
@keyframes nav-wallet-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1.0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-wallet.connecting { animation: none; opacity: 0.85; }
}

/* Connected: paper-on-ink, green dot signals active session */
.nav-wallet.connected {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule);
}
.nav-wallet.connected:hover { border-color: var(--ink); opacity: 1; }
/* Connected dot — quiet ok-green (matches the global --ok token from
   design.css). The halo is the same hue at 18% alpha so it reads as a
   soft glow without a second colour. */
.nav-wallet-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok, #4a6b4a);
  box-shadow: 0 0 0 2px rgba(74, 107, 74, 0.18);
  flex: 0 0 auto;
}

/* Dropdown shown when connected pill is clicked */
.nav-wallet-dropdown {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 10px;
  min-width: 240px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-wallet-dd-addr {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--ink-3);
  word-break: break-all;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 6px;
  line-height: 1.4;
}
.nav-wallet-dropdown a,
.nav-wallet-dropdown button {
  background: none; border: 0;
  font: inherit; font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  padding: 9px 10px; border-radius: 6px;
  cursor: pointer; text-align: left;
  transition: background 0.12s;
  width: 100%;
  display: block;
}
.nav-wallet-dropdown a:hover,
.nav-wallet-dropdown button:hover {
  background: rgba(28, 26, 22, 0.05);
}
/* Disconnect action — burn-rust to signal "destructive, intentional".
   Inherits --burn from design.css; fallback hex matches the global token. */
.nav-wallet-dd-disconnect {
  color: var(--burn, #b8492c) !important;
}

/* ===========================================================
   Wallet-picker modal — opens when disconnected pill is clicked.
   Lists every EIP-6963-announced wallet so users can pick MetaMask,
   Rabby, Coinbase, Phantom, etc. instead of fighting over
   window.ethereum.
   =========================================================== */
/* Backdrop — heavier blur + warmer dim for the "this is important"
   cue. The dim layer is the cream-paper black, not pure black, so
   the focus on the modal feels like part of the same world. */
.nav-wallet-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(28, 26, 22, 0.46);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: nav-wallet-fade-in 0.22s ease-out;
}
@keyframes nav-wallet-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Modal — soft generous padding, two-layer shadow (rim light + drop),
   matched-radius interior for the "carved from one piece" feel. */
.nav-wallet-modal {
  background: var(--paper);
  border: 1px solid rgba(28, 26, 22, 0.08);
  border-radius: 20px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,        /* top inner rim — micro highlight */
    0 30px 60px -12px rgba(0, 0, 0, 0.22),         /* main drop */
    0 12px 24px -8px rgba(0, 0, 0, 0.12),          /* close drop */
    0 0 0 1px rgba(0, 0, 0, 0.03);                 /* hairline */
  width: 100%;
  max-width: 400px;
  padding: 24px 22px 18px;
  animation: nav-wallet-slide-in 0.28s cubic-bezier(0.22, 0.94, 0.32, 1.18);
}
@keyframes nav-wallet-slide-in {
  from { transform: translateY(12px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-wallet-modal-backdrop, .nav-wallet-modal { animation: none; }
}

.nav-wallet-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2px;
}
.nav-wallet-modal-head h2 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}
.nav-wallet-modal-close {
  background: none; border: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  width: 32px; height: 32px;
  margin: -6px -8px -6px 0;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-wallet-modal-close:hover { background: rgba(28,26,22,0.06); color: var(--ink); }
.nav-wallet-modal-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.nav-wallet-modal-sub {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0 0 18px;
  line-height: 1.45;
}

.nav-wallet-modal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Section label between "Installed" extensions and "Mobile" deep-links.
   Quiet — just a small subtitle, not a heading. */
.nav-wallet-modal-section-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 12px 4px 6px;
}
.nav-wallet-modal-section-label:first-child {
  padding-top: 0;
}

/* Mobile deep-link rows look the same as installed but use ↗ arrow
   and decorate slightly differently to hint "this opens externally". */
.nav-wallet-modal-mobile {
  text-decoration: none;
  color: var(--ink);
}
.nav-wallet-modal-mobile .nav-wallet-modal-arrow {
  font-size: 14px;
}

.nav-wallet-modal-option {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg);
  border: 1px solid rgba(28, 26, 22, 0.06);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--ink);
  transition: border-color 0.16s, background 0.16s, transform 0.16s, box-shadow 0.16s;
  position: relative;
}
.nav-wallet-modal-option:hover {
  border-color: rgba(28, 26, 22, 0.22);
  background: var(--paper);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.08);
}
.nav-wallet-modal-option:active {
  transform: translateY(0);
  box-shadow: none;
}
.nav-wallet-modal-option:disabled {
  cursor: wait;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}
.nav-wallet-modal-option:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.nav-wallet-modal-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  flex: 0 0 auto;
  object-fit: contain;
  /* No white background — the SVG icons carry their own brand colour.
     The 8px radius softens the corner without erasing the logo. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06) inset;
}
.nav-wallet-modal-icon-blank {
  width: 32px; height: 32px;
  border-radius: 8px;
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(28,26,22,0.08), rgba(28,26,22,0.04));
}
.nav-wallet-modal-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.nav-wallet-modal-arrow {
  color: var(--ink-3);
  font-size: 16px;
  transition: transform 0.16s, color 0.16s;
}
.nav-wallet-modal-option:hover .nav-wallet-modal-arrow {
  color: var(--ink);
  transform: translateX(2px);
}

.nav-wallet-modal-empty {
  text-align: center;
  padding: 24px 8px;
}
.nav-wallet-modal-empty p {
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 8px;
}
.nav-wallet-modal-empty-sub {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  line-height: 1.55;
}
.nav-wallet-modal-empty a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Mobile — full-width sheet */
@media (max-width: 600px) {
  .nav-wallet {
    padding: 6px 12px;
    font-size: 11px;
  }
  .nav-wallet-modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .nav-wallet-modal {
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    padding: 18px 16px 24px;
  }
}