/* Phase 2 — additive overlay only. Nothing in here restyles a host control;
   every rule is for a surface Phase 2 adds, themed with the host's own tokens. */

/* ---------- account pill (replaces the host wallet pill in place) ---------- */

#spice-pill { gap: 8px; }
#spice-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10b981; flex: none;
}
#spice-pill .amt { color: var(--p); }
#spice-pill .sep { color: var(--s); }
#spice-pill .chev { color: var(--s); font-size: 9px; }

/* ---------- modal shell (matches the host's centred 420px modal) ---------- */

.sp-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.42);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.sp-overlay[hidden] { display: none; }

.sp-modal {
  width: 420px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: 12px;
  padding: 16px;
}
.sp-modal.wide { width: 460px; }

.sp-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.sp-modal-title { font-size: 18px; font-weight: 600; }
.sp-x { color: var(--s); font-size: 15px; line-height: 1; }

/* ---------- account panel ---------- */

.sp-acct-head {
  background: var(--main);
  border-radius: 12px;
  padding: 18px 20px;
}
.sp-acct-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
}
.sp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(16, 185, 129, 0.12); color: #0d9268;
  border-radius: 999px; padding: 3px 9px;
  font-size: 11px; font-weight: 600;
}
.sp-badge .d { width: 6px; height: 6px; border-radius: 50%; background: #10b981; }
.sp-total { font-size: 30px; font-weight: 600; margin: 12px 0 4px; letter-spacing: -0.01em; }
.sp-breakdown { font-size: 12px; font-weight: 500; color: var(--s); }
.sp-addr {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 500; color: var(--s);
}
.sp-copy {
  display: flex; align-items: center; gap: 5px;
  color: var(--primary); font-size: 12px; font-weight: 600;
}
.sp-copy svg { width: 13px; height: 13px; display: block; }

.sp-how {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 4px;
  font-size: 13px; font-weight: 500; color: var(--s);
  width: 100%;
}
.sp-how .chev { font-size: 9px; }
.sp-how-body {
  padding: 0 4px 14px;
  font-size: 12px; font-weight: 500; color: var(--s); line-height: 1.55;
}
.sp-how-body[hidden] { display: none; }

.sp-section-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--s); text-transform: uppercase;
  margin: 6px 4px 8px;
}

.sp-list { background: var(--main); border-radius: 12px; padding: 4px; }
.sp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  width: 100%; text-align: left;
}
.sp-row + .sp-row { border-top: 1px solid var(--line); }
.sp-row-mark { position: relative; flex: none; width: 28px; height: 28px; }
.sp-row-mark > img.tok { width: 28px; height: 28px; border-radius: 50%; display: block; object-fit: cover; }
.sp-row-mark > img.chn {
  position: absolute; right: -3px; bottom: -3px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--main); display: block; object-fit: cover;
}
.sp-row-main { flex: 1; min-width: 0; }
.sp-row-sym { font-size: 14px; font-weight: 600; line-height: 1.2; }
.sp-row-sub { font-size: 11px; font-weight: 500; color: var(--s); margin-top: 2px; }
.sp-row-val { text-align: right; }
.sp-row-amt { font-size: 14px; font-weight: 600; line-height: 1.2; }
.sp-row-usd { font-size: 11px; font-weight: 500; color: var(--s); margin-top: 2px; }
.sp-row-usd.pos { color: var(--success); }

.sp-actions { display: flex; gap: 8px; margin-top: 16px; }
.sp-btn {
  flex: 1; height: 44px; border-radius: 8px;
  font-size: 14px; font-weight: 600;
}
.sp-btn.primary { background: var(--primary); color: #fff; }
.sp-btn.ghost { background: var(--pill); color: var(--p); }

/* faint spice-ledger name under the underlying symbol (§13.5) */
.sp-ledger {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 500; color: var(--disabled);
}
.sp-ledger .i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--disabled); font-size: 8px; line-height: 1;
}

/* ---------- source picker (Rule 3 swap-in + modal source rows) ---------- */

.sp-field { background: var(--main); border-radius: 12px; padding: 14px 16px; }
.sp-field + .sp-field { margin-top: 8px; }
.sp-field-cap {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 500; color: var(--s); margin-bottom: 10px;
}

.sp-src {
  display: flex; align-items: center; gap: 8px;
  background: var(--pill);
  border-radius: 8px; padding: 6px 10px;
  font-size: 14px; font-weight: 600;
}
.sp-src .mk { position: relative; width: 22px; height: 22px; flex: none; }
.sp-src .mk img.tok { width: 22px; height: 22px; border-radius: 50%; display: block; object-fit: cover; }
.sp-src .mk img.chn {
  position: absolute; right: -3px; bottom: -3px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--pill); display: block; object-fit: cover;
}
.sp-src .chev { color: var(--s); font-size: 9px; }

/* dropdown of idle balances */
.sp-pop {
  position: absolute; z-index: 60;
  width: 288px;
  background: var(--main);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
.sp-pop[hidden] { display: none; }
.sp-pop-cap {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--s); text-transform: uppercase;
  padding: 9px 12px 6px;
}
.sp-pop .sp-row { cursor: pointer; }
.sp-pop .sp-row:hover { background: var(--hover); }
.sp-pop .sp-row + .sp-row { border-top: 0; }

/* ---------- receive line + fees (host-native surfaces) ---------- */

.sp-receive {
  font-size: 12px; font-weight: 500; color: var(--s);
  padding: 12px 4px 0;
}
.sp-receive b { color: var(--p); font-weight: 600; }

.sp-fees { padding: 12px 4px 10px; }
.sp-fee-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 500; color: var(--s);
  padding: 3px 0;
}
.sp-fee-row .v { color: var(--p); font-weight: 500; }
.sp-attrib {
  font-size: 11px; font-weight: 500; color: var(--disabled);
  padding: 8px 4px 0;
}

/* ---------- fee breakdown card (Spice's own surfaces) ---------- */

.sp-breakdown-card {
  background: var(--main);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 12px;
}
.sp-breakdown-card .sp-fee-row { padding: 4px 0; }
.sp-breakdown-card .sp-fee-row.total {
  border-top: 1px solid var(--line);
  margin-top: 6px; padding-top: 10px;
}
.sp-breakdown-card .sp-fee-row.total .v { font-weight: 600; }
.sp-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11px; font-weight: 500; color: var(--disabled);
}
.sp-foot a { color: var(--primary); font-weight: 600; }

/* ---------- amount input inside modals ---------- */

.sp-amt-row { display: flex; align-items: center; gap: 12px; }
.sp-amt {
  flex: 1; min-width: 0;
  font-size: 24px; font-weight: 600; line-height: 1.2;
}
.sp-amt::placeholder { color: var(--disabled); }
.sp-pcts { display: flex; gap: 8px; margin-top: 12px; }
.sp-pcts button {
  flex: 1; height: 25px; border-radius: 4px;
  background: var(--pill); color: var(--s);
  font-size: 12px; font-weight: 500;
}
.sp-cta {
  width: 100%; height: 48px; border-radius: 8px;
  background: var(--primary); color: #fff;
  font-size: 16px; font-weight: 600;
  margin-top: 16px;
}
.sp-cta[disabled] { background: var(--pill); color: var(--disabled); cursor: default; }

/* chain destination picker (withdraw only) */
.sp-chains { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sp-chain {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 11px; font-size: 13px; font-weight: 500;
}
.sp-chain img { width: 17px; height: 17px; border-radius: 50%; display: block; object-fit: cover; }
.sp-chain.on { border-color: var(--primary); color: var(--primary); background: #eef3ff; }

.sp-rel { position: relative; }

/* "Pay with" row appended under each add-liquidity deposit leg */
.sp-payrow {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 500; color: var(--s);
}
.sp-payrow .sp-pop { top: 100%; right: 0; }

/* Standalone "Pay with" row — one source funds the whole add-liquidity action.
   Matches the host's own Slippage Tolerance row so it reads as native. */
.sp-payrow.solo {
  background: var(--main);
  border-radius: 8px;
  border-top: 0;
  margin-top: 16px;
  padding: 8px 12px;
  font-size: 16px;
  color: var(--p);
}

/* the swap card's from-row picker hangs below the row */
#from-pop { top: 76px; left: 20px; }
#dep-pop, #wd-pop { top: 84px; left: 16px; }