/* ══════════════════════════════════════════════════════════════
   WALLET POSITION LEDGER - shared styles for js/wallet-position.js
   Mounted on BOTH /wallet/:addr and /dex/wallet/:addr, so it lives in its own
   shared stylesheet (not a per-page css). Includes the reusable price-behaviour
   chart core (.pb-*), which the DEX timeline also uses - the timeline only adds
   its own placement padding (in dex.css).
   ══════════════════════════════════════════════════════════════ */

/* ── Per-asset ledger ── */
.wp-ledger { display: flex; flex-direction: column; }
.wp-ledger-head, .wp-row {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) minmax(120px, 1.1fr) minmax(84px, 0.9fr) minmax(90px, 1fr) minmax(120px, 1fr) 20px;
  align-items: center; gap: 10px;
}
.wp-ledger-head { padding: 4px 8px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-lo); border-bottom: 1px solid var(--border); }
.wp-asset { border-bottom: 1px solid var(--border); }
.wp-row { padding: 11px 8px; cursor: pointer; list-style: none; }
.wp-row::-webkit-details-marker { display: none; }
.wp-row:hover { background: var(--bg-hover, rgba(255,255,255,.03)); }

.wp-asset-id { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.wp-asset-id img, .wp-asset-id .asset-icon { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.wp-asset-sym { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wp-stance { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; width: fit-content; white-space: nowrap; }
.wp-stance .wp-arrow { font-style: normal; font-size: 10px; }
.wp-stance.acc   { color: var(--flow-in);  background: color-mix(in srgb, var(--flow-in) 13%, transparent); }
.wp-stance.dist  { color: var(--flow-out); background: color-mix(in srgb, var(--flow-out) 13%, transparent); }
.wp-stance.route { color: var(--accent-2, #9b72ff); background: color-mix(in srgb, var(--accent-2, #9b72ff) 13%, transparent); }
.wp-stance.churn { color: var(--text-lo); background: var(--bg-hover, rgba(255,255,255,.05)); }

.wp-net { font-family: var(--mono); font-weight: 700; font-size: 13px; }
.wp-net.in  { color: var(--flow-in); }
.wp-net.out { color: var(--flow-out); }
.wp-net.flat { color: var(--text-md); }
.wp-where { font-size: 12px; color: var(--text-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-io { font-family: var(--mono); font-size: 11px; color: var(--text-lo); white-space: nowrap; }
.wp-chev { color: var(--text-lo); font-size: 11px; transition: transform .15s; text-align: center; }
.wp-asset[open] .wp-chev { transform: rotate(180deg); }

.wp-detail { padding: 4px 8px 14px; background: var(--bg-inset, rgba(0,0,0,.12)); }
.wp-moves { display: flex; flex-direction: column; }
.wp-move { display: flex; align-items: center; gap: 9px; padding: 7px 2px; border-top: 1px solid var(--border); font-size: 12.5px; flex-wrap: wrap; }
.wp-move-verb { font-weight: 600; min-width: 62px; }
.wp-move.in  .wp-move-verb { color: var(--flow-in); }
.wp-move.out .wp-move-verb { color: var(--flow-out); }
.wp-move-usd { font-family: var(--mono); font-weight: 700; }
.wp-move-meta { color: var(--text-lo); font-size: 11px; }
.wp-move .tx-verify { margin-left: auto; }
.wp-empty { color: var(--text-lo); font-size: 12px; padding: 8px 2px; }
.wp-foot { font-size: 11px; color: var(--text-lo); padding: 10px 8px 2px; line-height: 1.5; }

/* Mobile: drop the two least-critical columns into the expandable detail. */
@media (max-width: 620px) {
  .wp-ledger-head { grid-template-columns: minmax(60px, 1fr) minmax(104px, 1.1fr) minmax(74px, 0.8fr) 18px; }
  .wp-row { grid-template-columns: minmax(60px, 1fr) minmax(104px, 1.1fr) minmax(74px, 0.8fr) 18px; }
  .wp-h-where, .wp-h-io, .wp-where, .wp-io { display: none; }
}

/* ── Market-maker proof (linked to X - N transfers, each verifiable) ── */
.wp-proof { margin-bottom: 10px; }
.wp-proof-d { border: 1px solid color-mix(in srgb, var(--accent-2, #7fb2ff) 24%, transparent); background: color-mix(in srgb, var(--accent-2, #7fb2ff) 8%, transparent); border-radius: 9px; }
.wp-proof-d > summary { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 9px 11px; cursor: pointer; list-style: none; font-size: 12.5px; color: var(--text-md); }
.wp-proof-d > summary::-webkit-details-marker { display: none; }
.wp-proof-d > summary::after { content: "\25be"; font-size: 11px; color: var(--accent-2, #7fb2ff); margin-left: auto; transition: transform .15s; }
.wp-proof-d[open] > summary::after { transform: rotate(180deg); }
.wp-proof-d b { color: var(--text-hi); font-family: var(--mono); }
.wp-proof-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2, #7fb2ff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2, #7fb2ff) 18%, transparent); flex: none; }
.wp-proof-note { color: var(--text-lo); font-size: 11px; }
.wp-proof-txs { display: flex; flex-direction: column; padding: 2px 8px 8px; }
.wp-proof-tx { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px; padding: 6px 4px; border-top: 1px solid color-mix(in srgb, var(--accent-2, #7fb2ff) 14%, transparent); font-size: 12px; }
.wp-proof-dir { color: var(--text-lo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-proof-usd { font-family: var(--mono); font-weight: 700; text-align: right; }
.wp-proof-tx.in  .wp-proof-usd { color: var(--flow-in); }
.wp-proof-tx.out .wp-proof-usd { color: var(--flow-out); }
.wp-proof-when { color: var(--text-lo); font-size: 11px; white-space: nowrap; }

/* ── Price-behaviour chart core (shared with the DEX timeline) ── */
.pbrow { padding: 2px 4px 10px; }
.pb-svg { width: 100%; height: 84px; display: block; border-radius: 10px; background: var(--bg-hover, rgba(255,255,255,.03)); border: 1px solid var(--border); }
.pb-band { fill: color-mix(in srgb, var(--accent-2, #9b72ff) 15%, transparent); }
.pb-area { opacity: .13; }
.pbrow.up   .pb-area { fill: var(--flow-in); }
.pbrow.down .pb-area { fill: var(--flow-out); }
.pb-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.pbrow.up   .pb-line { stroke: var(--flow-in); }
.pbrow.down .pb-line { stroke: var(--flow-out); }
.pb-mark { vector-effect: non-scaling-stroke; }
.pb-mark.first { stroke: var(--accent-2, #9b72ff); stroke-width: 1.5; }
.pb-mark.last  { stroke: var(--text-lo); stroke-width: 1; stroke-dasharray: 3 3; opacity: .65; }
.pb-legend { display: flex; align-items: center; gap: 9px; margin-top: 7px; font-size: 11px; color: var(--text-lo); flex-wrap: wrap; }
.pb-key { display: inline-flex; align-items: center; gap: 5px; }
.pb-d { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pb-d.first { background: var(--accent-2, #9b72ff); }
.pb-d.last  { background: var(--text-hi); }
.pb-flex { flex: 1 1 auto; min-width: 8px; }
.pb-delta { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 12.5px; padding: 3px 9px; border-radius: 8px; }
.pb-delta i { font-style: normal; font-weight: 600; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.pb-delta.up   { color: var(--flow-in);  background: color-mix(in srgb, var(--flow-in) 13%, transparent); }
.pb-delta.down { color: var(--flow-out); background: color-mix(in srgb, var(--flow-out) 13%, transparent); }
.pb-delta.muted { color: var(--text-lo); background: var(--bg-hover, rgba(255,255,255,.04)); }
@media (max-width: 560px) { .pb-svg { height: 78px; } }

/* ── Wallet timeline (DEX tab) - unified movements feed, rendered by js/wallet-timeline.js ──
   Moved here from dex.css when the DEX wallet page merged into the main wallet page's DEX tab, so
   both surfaces share ONE copy. Filter chips + day chapters + folded runs + verify chips. */
.pulse-empty { color: var(--text-lo); font-size: 11px; }
.trace-timeline { display: flex; flex-direction: column; gap: 2px; }
.trace-row { display: grid; grid-template-columns: 42px 14px 1fr auto; align-items: center; gap: 8px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.trace-kind { font-family: var(--mono); font-size: 9.5px; font-weight: 700; text-align: center; padding: 2px 0; border-radius: 4px; margin-top: 2px; }
.trace-kind.cex { color: #f5c400; background: rgba(245,196,0,.12); }
.trace-kind.dex { color: var(--accent, #6ea8fe); background: color-mix(in srgb, var(--accent, #6ea8fe) 14%, transparent); }
.trace-kind.transfer { color: var(--text-lo); background: var(--bg-hover, rgba(255,255,255,.06)); }
.trace-kind.entity { color: #b98bff; background: rgba(155,114,255,.13); font-size: 8.5px; }
.trace-term { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; margin-left: 6px; }
.trace-term.t-mixer { color: #f59e0b; background: rgba(245,158,11,.14); }
.trace-term.t-bridge { color: #6ea8fe; background: rgba(110,168,254,.14); }
.trace-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.trace-dot.in  { background: var(--flow-in); }
.trace-dot.out { background: var(--flow-out); }
.trace-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trace-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-hi); }
.trace-line img, .trace-line .asset-icon { width: 18px; height: 18px; border-radius: 50%; }
.trace-asset { font-weight: 600; }
.trace-quote { color: var(--text-lo); font-size: 11.5px; }
.trace-usd { font-family: var(--mono); font-weight: 700; margin-left: 4px; }
.trace-meta { font-size: 11px; color: var(--text-lo); }
.trace-chain { text-transform: capitalize; }
.trace-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.trace-cp { color: var(--accent, #6ea8fe); text-decoration: none; }
.trace-cp:hover { text-decoration: underline; }
.trace-day { border-bottom: 1px solid var(--border); }
.trace-day > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 4px; }
.trace-day > summary::-webkit-details-marker { display: none; }
.trace-day > summary:hover { background: var(--bg-hover, rgba(255,255,255,.02)); }
.trace-day-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-hi); position: relative; padding-left: 16px; }
.trace-day-label::before { content: "▸"; position: absolute; left: 0; color: var(--text-lo); font-size: 10px; transition: transform .15s; }
.trace-day[open] > summary .trace-day-label::before { transform: rotate(90deg); }
.trace-day-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; }
.trace-day-count { color: var(--text-lo); }
.trace-day-net { font-family: var(--mono); font-weight: 700; }
.trace-day-net.in  { color: var(--flow-in); }
.trace-day-net.out { color: var(--flow-out); }
.trace-day-body { padding-bottom: 6px; }
.trace-run > summary { list-style: none; cursor: pointer; position: relative; }
.trace-run > summary::-webkit-details-marker { display: none; }
.trace-run > summary::after { content: "▸"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--text-lo); font-size: 11px; transition: transform .15s; }
.trace-run[open] > summary::after { transform: translateY(-50%) rotate(90deg); }
.trace-run-count { margin-left: 6px; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-lo); background: var(--bg-hover, rgba(255,255,255,.07)); padding: 1px 6px; border-radius: 8px; }
.trace-run-items { padding: 2px 0 8px 50px; display: flex; flex-direction: column; gap: 2px; }
.trace-sub { display: flex; align-items: center; gap: 8px; padding: 4px 0 4px 10px; border-left: 2px solid var(--border); flex-wrap: wrap; }
.trace-sub .trace-usd { font-family: var(--mono); font-size: 12.5px; font-weight: 700; margin-left: 0; }
.trace-sub.in  .trace-usd { color: var(--flow-in); }
.trace-sub.out .trace-usd { color: var(--flow-out); }
.trace-sub-meta { color: var(--text-lo); font-size: 11px; }
.trace-row-tx { margin-left: 8px; }
.trace-sub-tx { margin-left: auto; }
.trace-item { border-bottom: 1px solid var(--border); }
.trace-item > .trace-row { border-bottom: none; }
.trace-run > summary.trace-row { border-bottom: none; }
.trace-run { border-bottom: 1px solid var(--border); }
.trace-item > .trace-run { border-bottom: none; }
.trace-timeline .pbrow { padding: 2px 4px 12px 50px; }
.trace-timeline .pb-svg { height: 88px; }
@media (max-width: 560px) { .trace-run-items { padding-left: 22px; } .trace-timeline .pbrow { padding-left: 38px; } }