/* Nav and the stat strip. Agent 1. Slot rules stay under the two tiles.
   The connect dialog is the v1 wallet modal, painted on body because the nav row clips overflow. */
[data-tile="nav"] .v2-logo {
  letter-spacing: var(--v2-track-logo);
}
[data-tile="nav"] a.v2-navb {
  text-decoration: none;
}
[data-tile="nav"] button.v2-cap {
  appearance: none;
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  color: var(--v2-muted);
  font: inherit;
  letter-spacing: var(--v2-track-label);
  cursor: pointer;
}
[data-tile="nav"] button.v2-cap:hover,
[data-tile="nav"] .v2-wallet-go:hover,
[data-tile="nav"] .v2-wallet:hover b,
[data-tile="nav"] .v2-copy:hover {
  color: var(--v2-rose);
}
[data-tile="nav"] .v2-cap b {
  color: var(--v2-text);
  font-weight: 400;
}
[data-tile="nav"] .v2-wallet {
  gap: 8px;
}
/* Shared top-bar wallet. Disconnected / overflow fallback uses a soft cap;
   connected state lifts it via .v2-wallet-fit in acctmenu.css. */
.v2-nav .v2-wallet {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(28vw, 14em);
}
.v2-nav .v2-wallet-go {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.v2-nav .v2-wallet-go > span,
.v2-nav .v2-wallet-addr {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.v2-nav .v2-wallet-go > span[hidden] {
  display: none;
}
[data-tile="nav"] .v2-wallet-go {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--v2-muted);
  font: inherit;
  letter-spacing: var(--v2-track-label);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0;
  cursor: pointer;
}
[data-tile="nav"] .v2-copy {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--v2-muted);
  width: 22px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-tile="nav"] .v2-copy[hidden] {
  display: none;
}
[data-tile="nav"] .v2-copy svg {
  width: 12px;
  height: 12px;
  display: block;
}
[data-tile="stats"] > .v2-stat {
  min-width: 0;
}
[data-tile="stats"] > .v2-stat[hidden] {
  display: none;
}
[data-tile="stats"] .v2-selector {
  background: var(--v2-header);
}
/* Hover outline is inset (-1px). While the list is open it makes the pop look wider; drop it. */
[data-tile="stats"] .v2-selector.v2-mkt-open,
[data-tile="stats"] .v2-selector.v2-mkt-open:hover {
  outline: none;
  z-index: 96;
}
[data-tile="stats"] .v2-stat .v2-val {
  font-size: var(--v2-fs-stat);
}
[data-tile="stats"] button.v2-mkt {
  appearance: none;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
[data-tile="stats"] .v2-caret {
  color: var(--v2-rose);
  font-family: var(--mono);
  font-size: var(--fs-12);
  font-weight: 700;
}
[data-tile="stats"] .v2-spark {
  height: 20px;
  width: 100%;
  display: block;
}
[data-tile="stats"] .v2-histo {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 20px;
}
[data-tile="stats"] .v2-histo i {
  flex: 1;
  background: var(--v2-rose);
  min-height: 1px;
}
[data-tile="stats"] .v2-histo i.v2-soft {
  background: var(--v2-bone);
}
[data-tile="stats"] .v2-ratio {
  display: flex;
  height: 10px;
  gap: 1px;
}
[data-tile="stats"] .v2-ratio i {
  display: block;
  min-height: 10px;
}
[data-tile="stats"] .v2-ratio i:first-child {
  background: var(--v2-rose);
}
[data-tile="stats"] .v2-ratio i:last-child {
  background: var(--v2-bone);
}

.v2-pop {
  position: fixed;
  z-index: 95;
  width: 320px;
  max-height: 360px;
  background: var(--v2-tile);
  color: var(--v2-text);
  display: flex;
  flex-direction: column;
  /* Market mode sets width/left/top to the selector tile; top sits on the tile bottom edge. */
  box-sizing: border-box;
}
.v2-pop[data-v2-pop="mkt"] {
  /* Width comes from the market tile so left/right edges match exactly. */
  max-width: none;
  border-color: var(--v2-rose);
  z-index: 95;
}
.v2-pop[hidden] {
  display: none;
}
.v2-pop-q {
  padding: 8px 10px;
  border-bottom: var(--v2-rule) solid var(--v2-line);
  min-height: 32px;
}
.v2-pop-list {
  overflow: auto;
  min-height: 0;
}
.v2-pop-list button {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  background: var(--v2-tile);
  color: var(--v2-text);
  border: 0;
  border-bottom: var(--v2-rule) solid var(--v2-line);
  font: inherit;
  letter-spacing: var(--v2-track-label);
  text-transform: uppercase;
  padding: 0 10px;
  height: 30px;
  cursor: pointer;
  text-align: left;
}
.v2-pop-list button:hover,
.v2-pop-list button.v2-cur {
  background: var(--v2-header);
  color: var(--v2-rose);
}
.v2-pop-list button.on,
.v2-pop-list button.on:hover {
  background: var(--v2-rose);
  color: var(--ink);
  font-weight: 700;
}
.v2-pop-list button span:nth-child(n + 2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.v2-pop-empty {
  padding: 10px;
  color: var(--v2-muted);
}

#tdModal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--v2-veil);
  display: flex;
  align-items: center;
  justify-content: center;
}
#tdModal[hidden] {
  display: none;
}
#tdModal .mdlc {
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: 90vh;
  overflow: auto;
  background: var(--v2-tile);
  border: var(--v2-rule) solid var(--v2-rose);
  color: var(--v2-text);
  font: 400 var(--v2-fs) / var(--v2-lh) var(--v2-mono);
  letter-spacing: var(--v2-track);
}
#tdModal h3 {
  margin: 0;
  padding: 8px 14px;
  background: var(--v2-header);
  border-bottom: var(--v2-rule) solid var(--v2-line);
  font-size: var(--v2-fs);
  font-weight: 400;
  letter-spacing: var(--v2-track-label);
  text-transform: uppercase;
  color: var(--v2-muted);
}
#tdModal p {
  margin: 10px 14px;
}
#tdModal .mut {
  color: var(--v2-muted);
}
#tdModal .neg {
  color: var(--crit-tx);
}
#tdModal .wl {
  display: flex;
  flex-direction: column;
}
#tdModal .wli {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--v2-tile);
  color: var(--v2-text);
  border: 0;
  border-bottom: var(--v2-rule) solid var(--v2-line);
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
#tdModal .wli:hover {
  background: var(--v2-header);
  color: var(--v2-rose);
}
#tdModal .wli img,
#tdModal .wico {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}
#tdModal .mdlb {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v2-rule);
  background: var(--v2-line);
  border-top: var(--v2-rule) solid var(--v2-line);
}
#tdModal .btn,
#tdModal .btnw,
#tdModal .tpgo {
  appearance: none;
  width: 100%;
  border: 0;
  background: var(--v2-tile);
  color: var(--v2-text);
  font: inherit;
  letter-spacing: var(--v2-track-label);
  text-transform: uppercase;
  height: 30px;
  cursor: pointer;
}
#tdModal .btn:hover,
#tdModal .btnw:hover {
  background: var(--v2-header);
  color: var(--v2-rose);
}
#tdModal .tpgo,
#tdModal .tpgo.long {
  background: var(--v2-buy);
  color: var(--v2-bg);
}
#tdModal .tpgo:disabled {
  opacity: 0.55;
}
#tdModal .wcqr {
  width: 240px;
  margin: 12px auto;
  padding: 8px;
  background: var(--v2-bone);
  color: var(--v2-bg);
}
#tdModal .wcqr svg {
  width: 100%;
  height: auto;
  display: block;
}