/* The swap card (swap/card.js), on /swap/ and in the front page's Swap tab: every rule is under the card's .swc, so it reaches nothing else on
   the page. It reads the page's tokens (--paper --card --field --ink --mute --hair --hair-2 --orange --ok --warn --err --mono --serif --tap
   --ease --spring, and --soft: a field's surface, a shade off --card). /swap/ links it before its own styles, so a rule of the page's own of equal weight wins; the front page adds it after.
   The card's fields are that shade off its surface rather than outlined boxes, and its edges are hairlines, never dashes (a shielded side is told by its lock mark and
   its dashed token ring). */
.swc { --field: var(--soft, color-mix(in srgb, var(--ink) 4.5%, var(--card))); }
.swc img.tk { object-fit: contain; }
/* a coin held in the Pay pool: the private ETH mark's dashed ring, on the token's own logo */
.swc .tk.pvt { outline: 1.5px dashed var(--ink); outline-offset: 1.5px; }
/* where a side is held, as a mark before its name (the wallet's glyph, a pool's own mark, Bitcoin's); a pool's mark says private by itself, so the lock goes */
.swc .pl { width: 14px; height: 14px; flex: none; }
.swc .where .tk, .swc .where .pl { width: 14px; height: 14px; }
.swc .where.priv.pool::before, .swc .pk-g.pool::before { display: none; }
.swc .where.go-pick { cursor: pointer; border-radius: 6px; transition: color .12s; }
.swc .where.go-pick:hover, .swc .where.go-pick:focus-visible { color: var(--ink); }
.swc .pk-d { margin: 4px 8px 8px; font-size: 11.5px; line-height: 1.45; color: var(--mute); opacity: .85; }
.swc .pk-g .pl { display: inline-block; margin-right: 6px; vertical-align: -3px; }
.swc .pk-kind button .tk, .swc .pk-kind button .pl { width: 14px; height: 14px; margin: 0; }
.swc .tk.letter { display: grid; place-items: center; font: 500 13px/1 var(--mono); color: #fff; background: var(--c, #8F8979); }
.swc .mode { display: inline-flex; gap: 2px; margin: 0 0 12px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: 12.5px; }
.swc .mode button { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 2px 14px; border: 0; border-radius: 999px; background: none; color: var(--mute); cursor: pointer; transition: background .15s, color .15s; }
.swc .mode button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent); }
.swc .mode .lock { width: 9px; height: 10px; border: 1.5px dashed currentColor; border-radius: 2px; }
.swc .mode button[data-mode="bitcoin"] { padding: 2px 10px; } .swc .mode button .tk { width: 16px; height: 16px; opacity: .55; transition: opacity .15s; }
.swc .mode button[aria-checked="true"] .tk, .swc .mode button:hover .tk { opacity: 1; }
.swc .mode button[data-mode="bitcoin"] { position: relative; } .swc .mode button[data-mode="bitcoin"][data-nudge] .tk { opacity: 1; }
.swc .mode button[data-mode="bitcoin"][data-nudge]::after { content: ''; position: absolute; top: 3px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--card); }
.swc.btc > :not(.mode):not(#btc):not(.sr) { display: none; }
/* the front page's card reaches the lane by its places: the switch shows only in the lane, as the way back */
.swc.mv:not(.btc) > .mode { display: none; }
.swc .tk.xs { width: 14px; height: 14px; }
.swc #btc .coin { cursor: default; } .swc #btc .ack label { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--mute); }
.swc .brd { display: grid; gap: 6px; margin: 10px 2px 0; font-size: 12px; line-height: 1.5; color: var(--mute); } .swc .brd em { font-style: normal; color: var(--warn); }
.swc .brd button.link { padding: 0; font: 12px var(--mono); color: var(--ink); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.swc .snt { display: grid; gap: 8px; margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--mute); }
.swc .snt > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 14px; }
.swc .snt b { font-weight: 500; color: var(--ink); } .swc .snt .what { grid-column: 1 / -1; color: var(--ink); } .swc .snt small { grid-column: 1 / -1; font-size: 12px; } .swc .snt a { color: var(--ink); }
.swc .snt .dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--orange); }
.swc .snt .ok .dot { background: var(--ok); } .swc .snt .warn .dot { background: var(--warn); }
.swc .snt .wait .dot { animation: swc-snt-pulse 1.8s ease-in-out infinite; } @keyframes swc-snt-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .swc .snt .wait .dot { animation: none; } }
.swc .snt button.link { padding: 0 2px; font: 14px/1 var(--mono); color: var(--mute); background: none; border: 0; cursor: pointer; }
@media (pointer: coarse) { .swc .mode button { min-height: 38px; } }
.swc .f { padding: 12px 14px 10px; background: var(--field); border: 1px solid color-mix(in srgb, var(--ink) 4%, transparent); border-radius: 16px; transition: border-color .15s, box-shadow .15s; }
.swc .f:focus-within { border-color: color-mix(in srgb, var(--ink) 26%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 5%, transparent); }
.swc .fh, .swc .ff { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 22px; font-size: 12px; color: var(--mute); }
.swc .ff { min-height: 28px; }                                              /* the quick amounts' row, drawn by the script */
.swc .fh .where { display: inline-flex; align-items: center; gap: 6px; }
.swc .fh button.where { padding: 0; font: inherit; color: inherit; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.swc .fh button.where:disabled { text-decoration: none; cursor: default; }
.swc .to { margin: 6px 0 4px; }
.swc .to input { width: 100%; min-height: 38px; padding: 8px 10px; font: 400 13px var(--mono); color: var(--ink); background: transparent; border: 1px solid var(--hair-2); border-radius: 8px; outline: none; }
.swc .to input:focus { border-color: var(--ink); } .swc .to input[aria-invalid="true"] { border-color: var(--err); }
.swc .to small { display: block; min-height: 0; margin-top: 6px; font-size: 11.5px; line-height: 1.4; color: var(--mute); overflow-wrap: anywhere; } .swc .to small:empty { display: none; } .swc .to small.err { color: var(--err); }
.swc .sides { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.swc .sides button { display: inline-flex; align-items: center; gap: 6px; min-height: 20px; padding: 1px 10px; font: 12px var(--mono); color: var(--mute); background: none; border: 0; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.swc .sides button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); }
.swc .sides .lock { flex: none; width: 8px; height: 9px; border: 1.5px dashed currentColor; border-radius: 2px; }
.swc .sides button:disabled { opacity: .35; cursor: default; }
@media (pointer: coarse) { .swc .sides button { min-height: 34px; padding: 1px 12px; } }
.swc .ffr { display: inline-flex; align-items: center; gap: 10px; }
.swc .ff .where { display: inline-flex; align-items: center; gap: 6px; }
.swc .ff .where:disabled { text-decoration: none; cursor: default; }
.swc .ff .where.priv::before { content: ''; width: 8px; height: 9px; border: 1.5px dashed currentColor; border-radius: 2px; }
.swc .fh .where.priv::before { content: ''; width: 8px; height: 9px; border: 1.5px dashed currentColor; border-radius: 2px; }
.swc .fm { display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 2px 0; }
.swc .fm .amt, .swc .fm .big { flex: 1; min-width: 0; padding: 0; font: 400 44px/1.1 var(--serif); letter-spacing: -.01em; color: var(--ink); background: none; border: 0; outline: none; font-variant-numeric: tabular-nums; }
.swc .fm .big { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a move that says where rather than how much (Private, All): a word, not a figure */
.swc .fm .big.word { font-size: 30px; color: var(--mute); }
.swc .fm .amt.long, .swc .fm .big.long { font-size: 34px; } .swc .fm .amt.longer, .swc .fm .big.longer { font-size: 27px; }
.swc .fm .amt::placeholder { color: var(--hair-2); opacity: 1; } .swc .fm .big.ph { color: var(--hair-2); }
.swc .fm .big.busy { opacity: .45; transition: opacity .15s; }
.swc .rows.stale, .swc .rcpt.stale { opacity: .5; transition: opacity .15s; }
.swc .coin { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 44px; padding: 0 12px 0 6px; font-size: 15px; font-weight: 500; background: var(--card); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 999px; box-shadow: 0 1px 2px color-mix(in srgb, #000 10%, transparent); cursor: pointer; transition: border-color .15s, transform .15s; }
.swc .coin .tk { width: 32px; height: 32px; transition: transform .4s var(--spring); }
.swc .coin .car { position: relative; flex: none; width: 10px; height: 10px; font-size: 0; color: var(--mute); transition: transform .2s var(--ease), color .15s; }
.swc .coin .car::before { content: ''; position: absolute; left: 1.5px; top: 0; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(1px) rotate(45deg); }
@media (hover: hover) { .swc .coin:not(.one):hover .car { color: var(--ink); transform: translateY(1px); } }
@media (hover: hover) { .swc .coin:hover { border-color: var(--ink); } .swc .coin:hover .tk { transform: rotate(-8deg); } }
.swc .coin:active { transform: scale(.97); }
.swc .ff button { padding: 0; font: 12px var(--mono); color: var(--mute); background: none; border: 0; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; cursor: pointer; transition: color .15s; }
.swc .ff button.over { color: var(--warn); }
@media (hover: hover) { .swc .ff button:hover { color: var(--ink); text-decoration-color: currentColor; } }
.swc .quick { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.swc .quick button { padding: 3px 10px; font: 12px var(--mono); color: var(--mute); text-decoration: none; background: none; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 999px; cursor: pointer; transition: border-color .15s, color .15s; }
@media (hover: hover) { .swc .quick button:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 45%, transparent); } }
@media (pointer: coarse) { .swc .quick button { padding: 7px 13px; } }
.swc .mid { position: relative; z-index: 1; height: 8px; }
.swc .flip { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 0; display: grid; place-items: center; background: var(--card); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 50%; box-shadow: 0 0 0 4px var(--card); color: var(--ink); cursor: pointer; transition: transform .3s var(--spring), border-color .15s; }
.swc .flip svg { width: 16px; height: 16px; }
@media (hover: hover) { .swc .flip:hover { transform: rotate(180deg); border-color: var(--ink); } }
.swc .flip:disabled { opacity: .4; cursor: default; transform: none; }

/* the ways to fill it, one to choose */
.swc .rows { margin-top: 8px; overflow: hidden; background: var(--field); border: 1px solid color-mix(in srgb, var(--ink) 4%, transparent); border-radius: 16px; }
.swc .rows-h { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px 1px; font-size: 12px; color: var(--mute); }
.swc .rows button { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; width: 100%; padding: 6px 14px 7px; text-align: left; color: inherit; background: none; border: 0; border-top: 1px solid var(--hair); font: inherit; cursor: pointer; transition: background .15s; }
.swc .rows-h + button { border-top: 0; }
@media (hover: hover) { .swc .rows button:hover { background: color-mix(in srgb, var(--hair) 40%, transparent); } }
.swc .rows button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.swc .rows .rt { display: grid; min-width: 0; line-height: 1.3; }
.swc .rows .rt b { font: 400 19px/1.1 var(--serif); letter-spacing: -.01em; color: var(--mute); transition: color .15s; }
.swc .rows .rt small { font-size: 12px; color: var(--mute); text-wrap: pretty; }
.swc .rows .ra { display: grid; justify-items: end; line-height: 1.3; font-size: 15px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--mute); }
.swc .rows .ra small { font: 11px var(--mono); color: var(--mute); } .swc .rows .ra em { font: 11px var(--mono); font-style: normal; color: var(--ok); }
.swc .rows [aria-checked="true"] .rt b, .swc .rows [aria-checked="true"] .ra { color: var(--ink); }
.swc .rd { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--hair-2); transition: box-shadow .2s var(--spring), border-color .15s; }
.swc .rows [aria-checked="true"] .rd { border-color: var(--ink); box-shadow: inset 0 0 0 3.5px var(--field), inset 0 0 0 9px var(--ink); }
.swc .rows .wait .ra { opacity: .45; }
.swc .rcpt .flip-px { padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
@media (hover: hover) { .swc .rcpt .flip-px:hover { text-decoration: underline; text-underline-offset: 3px; } }
.swc .rows-h .more-q { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--mute); vertical-align: 1px; animation: swc-more 1s ease-in-out infinite; }
@keyframes swc-more { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .swc .rows-h .more-q { animation: none; } }
.swc .rows button.more { display: block; padding: 8px 14px 10px; font: 12px var(--mono); color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .swc .rows button.more:hover { color: var(--ink); } }
@media (max-width: 380px) { .swc .rows .rt b { font-size: 19px; } .swc .rows .ra { font-size: 14px; } }

/* the receipt: dotted rows */
.swc .rcpt { margin: 10px 2px 0; display: grid; gap: 2px; font-size: 12.5px; }
.swc .rcpt div { display: flex; align-items: baseline; gap: 8px; color: var(--mute); }
.swc .rcpt div::after { content: ''; order: 1; flex: 1; min-width: 12px; border-bottom: 1px dotted var(--hair); transform: translateY(-4px); }
.swc .rcpt dt { order: 0; flex: none; white-space: nowrap; } .swc .rcpt dd { order: 2; margin: 0; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.swc .rcpt dd.warn { color: var(--warn); } .swc .rcpt dd.ok { color: var(--ok); } .swc .rcpt dd.err { color: var(--err); }
.swc .ack { display: flex; gap: 10px; align-items: flex-start; margin: 12px 2px 0; padding: 8px 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink); background: color-mix(in srgb, var(--warn) 9%, transparent); border-radius: 10px; cursor: pointer; }
.swc .ack input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.swc .act { position: sticky; bottom: 0; z-index: 2; margin: 6px -16px 0; padding: 8px 16px max(8px, env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--card) 8px); }
.swc .act .go { margin-top: 0; }
/* A button that cannot be pressed yet has no reason to follow the screen: pinned, it covers the rows under it (most of them on a small phone). */
.swc .act:has(.go:disabled) { position: static; background: none; }
.swc .act .ack { margin: 0 2px 8px; }
.swc .go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin-top: 14px; padding: 10px 16px; font-size: 15px; font-weight: 500; color: var(--card); background: var(--ink); border: 1px solid var(--ink); border-radius: 16px; cursor: pointer; transition: background .15s, color .15s, opacity .15s; text-decoration: none; }
.swc .go:hover:not(:disabled) { background: transparent; color: var(--ink); }
.swc .go:disabled { cursor: not-allowed; }
.swc .go.priv { background: transparent; color: var(--ink); }
@media (prefers-color-scheme: dark) { .swc .go:not(.priv) { background: color-mix(in srgb, var(--ink) 82%, var(--card)); border-color: transparent; } .swc .go.priv { border-color: var(--hair-2); } }
.swc .go.priv:hover:not(:disabled) { background: var(--ink); color: var(--card); border-style: solid; }
/* what cannot be pressed yet rests as a soft block of the tile's own tone, not the button faded */
.swc .go:disabled, .swc .go.priv:disabled { color: var(--mute); background: color-mix(in srgb, var(--ink) 6%, transparent); border-color: transparent; }
.swc .q { min-height: 20px; margin: 10px 2px 0; font-size: 12px; line-height: 1.55; color: var(--mute); overflow-wrap: anywhere; }
.swc .q a, .swc .q button.link { color: var(--ink); }
.swc .q:empty { min-height: 0; margin: 0; }
.swc .q.err { color: var(--err); } .swc .q.ok { color: var(--ok); }
.swc .link { padding: 0; font: inherit; color: var(--ink); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.swc .sw-foot[hidden] { display: none; }
.swc .sw-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 2px 2px 0; padding-top: 4px; font-size: 12px; color: var(--mute); }
/* Swap privately: one row that switches it, the buffer and the three steps it takes while it is on; and the swaps in progress, as the same steps */
.swc .later { margin: 10px 2px 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 16px; transition: border-color .15s; }
.swc .later.on { border-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.swc .later .tgl { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 28px; padding: 0; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; font-size: 13.5px; }
.swc .later .tgl b { flex: 1; font-weight: 500; }
.swc .later .tgl .tg-t { flex: 1; display: grid; line-height: 1.25; }
.swc .later .tgl small { font-size: 12px; color: var(--mute); }
.swc .later .pill { position: relative; width: 34px; height: 20px; flex: none; border-radius: 999px; background: var(--hair-2); transition: background .15s; }
.swc .later .pill::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s var(--spring); }
.swc .later .tgl[aria-checked="true"] .pill { background: color-mix(in srgb, var(--ink) 85%, var(--card)); }
.swc .later .tgl[aria-checked="true"] .pill::after { transform: translateX(14px); }
.swc .later .buf { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font-size: 12.5px; color: var(--mute); }
.swc .later .via { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 4px; margin: 12px 0 0; font-size: 12.5px; color: var(--mute); }
.swc .later .via > span { flex: 1; }
/* the pool pills are the slippage pills: an ink fill when chosen */
.swc .later .via .vp { min-height: 26px; padding: 1px 9px; font: 12px var(--mono); color: var(--mute); background: none; border: 1px solid var(--hair-2); border-radius: 999px; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.swc .later .via .vp:hover:not(:disabled) { border-color: var(--ink); }
.swc .later .via .vp[aria-pressed="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, transparent); border-color: transparent; }
.swc .later .via .vp:disabled { opacity: .5; cursor: default; }
.swc .later .via .link { position: relative; }
.swc .later .via .link::after { content: ''; position: absolute; inset: -8px -6px; }
@media (pointer: coarse) { .swc .later .via .vp { min-height: 34px; padding: 1px 12px; } }
/* figures of the other route, while this one is priced */
.swc .later.stale .buf b, .swc .later.stale .st.pre { opacity: .5; transition: opacity .15s; }
.swc .later .buf input { flex: 1; min-width: 0; accent-color: var(--ink); }
.swc .later .buf b { min-width: 76px; text-align: right; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.swc .st { display: grid; margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.swc .st li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 0 10px; padding-bottom: 14px; color: var(--mute); }
.swc .st li:last-child { padding-bottom: 0; }
.swc .st li::before { content: ''; position: absolute; left: 10.5px; top: 24px; bottom: 2px; width: 1px; background: var(--hair-2); }
.swc .st li:last-child::before { display: none; }
.swc .st li.done::before { background: var(--ink); }
.swc .st .mk { display: grid; place-items: center; width: 22px; height: 22px; font: normal 11px var(--mono); color: var(--mute); background: var(--card); border: 1px solid var(--hair-2); border-radius: 50%; }
.swc .st li.done .mk { color: var(--card); background: var(--ink); border-color: var(--ink); }
.swc .st li.now { color: var(--ink); }
.swc .st li.now .mk { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent); }
.swc .st li.now .mk::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: swc-st-pulse 1.8s ease-in-out infinite; }
.swc .st li.fail .mk { color: var(--err); border-color: var(--err); }
@keyframes swc-st-pulse { 50% { opacity: .25; } }
.swc .st .t { display: grid; gap: 1px; min-width: 0; padding-top: 2px; }
.swc .st .t > span { font-size: 13px; color: var(--mute); }
.swc .st li.done .t > span, .swc .st li.now .t > span, .swc .st li.fail .t > span { color: var(--ink); }
.swc .st .t small { font-size: 12px; color: var(--mute); overflow-wrap: anywhere; }
.swc .st .a { align-self: start; padding-top: 0; text-align: right; } .swc .st .a a { display: inline-block; padding-top: 2px; color: var(--ink); }
/* the preview under the switch: the same three steps in a row */
.swc .st.pre { display: flex; align-items: center; margin: 12px 0 0; }
.swc .st.pre li { display: flex; flex: none; align-items: center; gap: 6px; padding: 0; white-space: nowrap; }
.swc .st.pre li::before { display: none; }
.swc .st.pre li + li { flex: 1 1 auto; min-width: 0; }
.swc .st.pre li + li::before { content: ''; display: block; position: static; flex: 1; min-width: 8px; height: 1px; margin: 0 8px; background: var(--hair-2); }
.swc .st.pre li span { font-size: 12.5px; color: var(--ink); } .swc .st.pre li b { font-weight: 500; }
.swc .st.pre .mk { flex: none; width: 18px; height: 18px; font-size: 10px; }
.swc .steps { display: grid; gap: 10px; margin: 12px 2px 0; font-size: 12.5px; }
.swc .steps .plan { padding: 12px 14px; background: var(--field); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 16px; }
.swc .steps header { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 14px; }
.swc .steps .now { margin: -8px 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.swc .steps .now a { color: inherit; }
.swc .st .mix { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.swc .st .mix i { width: 10px; height: 4px; background: var(--hair-2); border-radius: 2px; }
.swc .st .mix i.on { background: var(--ink); }
.swc .steps header b { flex: none; font-weight: 500; font-size: 13.5px; white-space: nowrap; }
.swc .steps header small { flex: 1; min-width: 0; overflow: hidden; color: var(--mute); text-overflow: ellipsis; white-space: nowrap; }
.swc .steps header .x { flex: none; width: 28px; height: 28px; margin: -4px -6px -4px auto; font-size: 20px; line-height: 1; color: var(--mute); background: none; border: 0; border-radius: 50%; cursor: pointer; }
@media (hover: hover) { .swc .steps header .x:hover { color: var(--ink); background: var(--hair); } }
.swc .steps .offer { display: grid; gap: 10px; margin: 14px 0 0; padding: 12px; background: var(--card); border: 1px solid var(--ink); border-radius: 10px; }
.swc .steps .offer b { display: block; font: 400 19px/1.15 var(--serif); letter-spacing: -.01em; }
.swc .steps .offer small { color: var(--mute); }
.swc .steps .acts { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.swc .steps .acts .btn, .swc .steps .cta .btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
.swc .steps .cta { display: grid; gap: 8px; margin: 14px 0 0; }
.swc .steps .cta .btn { width: 100%; }
.swc .steps .cta small { font-size: 12px; line-height: 1.45; color: var(--mute); text-align: center; }
.swc .steps .chip { flex: none; padding: 2px 8px; font: normal 11px var(--mono); font-style: normal; color: var(--mute); border: 1px solid var(--hair-2); border-radius: 999px; white-space: nowrap; }
.swc .steps .chip.ok { color: var(--ink); border-color: var(--ink); } .swc .steps .chip.err { color: var(--err); border-color: var(--err); }
.swc .steps .note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--mute); }
.swc .steps .note.warn { color: var(--warn); } .swc .steps .note.err { color: var(--err); }
.swc .recent { margin: 8px 2px 0; font-size: 12px; color: var(--mute); }
.swc .recent summary { width: fit-content; list-style: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.swc .recent summary::-webkit-details-marker { display: none; }
.swc .recent ol { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.swc .recent li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.swc .recent a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair-2); overflow-wrap: break-word; }
.swc .recent time { white-space: nowrap; }
.swc .slip { display: inline-flex; gap: 4px; min-height: 26px; }
.swc .slip button { min-height: 26px; padding: 1px 9px; font: 12px var(--mono); color: var(--mute); background: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer; }
.swc .slip button:hover { border-color: var(--hair-2); }
.swc .slip button[aria-pressed="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, transparent); border-color: transparent; }
@media (pointer: coarse) { .swc .slip { min-height: 34px; } .swc .slip button { min-height: 34px; padding: 1px 12px; } }
/* the coin picker: a sheet that rises inside the card */
.swc .pk { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 21px; background: color-mix(in srgb, var(--paper) 62%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.swc .pk-s { display: flex; flex-direction: column; max-height: 92%; background: var(--card); border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 20px 20px 0 0; box-shadow: 0 -18px 40px -28px rgba(0,0,0,.45); animation: swc-up .3s var(--ease); }
/* with the switch between the kinds, the sheet keeps its height, so choosing one does not resize it */
.swc .pk-s:has(.pk-kind) { height: 94%; max-height: 94%; }
@keyframes swc-up { from { transform: translateY(40px); opacity: 0; } }
.swc .pk-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 10px 6px 18px; }
.swc .pk-h b { font: italic 400 24px/1 var(--serif); }
.swc .pk-x { width: 36px; height: 36px; font-size: 22px; color: var(--mute); background: none; border: 0; border-radius: 50%; cursor: pointer; }
@media (hover: hover) { .swc .pk-x:hover { color: var(--ink); background: var(--field); } }
.swc .pk-q { margin: 2px 18px 10px; padding: 11px 14px; font: 13px var(--mono); background: var(--field); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 14px; outline: none; transition: border-color .15s, box-shadow .15s; }
.swc .pk-q:focus { border-color: color-mix(in srgb, var(--ink) 30%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 5%, transparent); }
.swc .pk-l { display: flex; flex-direction: column; overflow: auto; padding: 0 10px 14px; }
.swc .pk-l > [hidden] { display: none; }
.swc .pk-g { margin: 10px 8px 4px; font-size: 12px; color: var(--mute); }
/* where a coin is held, as three plain choices: the list below is that kind's coins; a search looks in all of them */
.swc .pk-kind { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; margin: 0 18px 6px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.swc .pk-kind[hidden] { display: none; }
.swc .pk-kind button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; padding: 2px 10px; font: inherit; font-size: 13px; color: var(--mute); background: none; border: 0; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.swc .pk-kind button[aria-checked="true"] { color: var(--ink); background: var(--card); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent); }
@media (hover: hover) { .swc .pk-kind button:hover { color: var(--ink); } }
.swc .pk-kind .lock { flex: none; width: 8px; height: 9px; border: 1.5px dashed currentColor; border-radius: 2px; }
@media (pointer: coarse) { .swc .pk-kind button { min-height: 40px; } }
/* a kind's heading is for screen readers: the switch above the list says which it is */
.swc .pk-g.kh { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.swc .pk-g.priv { display: flex; align-items: center; gap: 6px; }
.swc .pk-g .tk { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -3px; }
.swc .cm { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; vertical-align: -3px; }
.swc .cm svg.tk { width: 16px; height: 16px; }
.swc .pk-g.priv::before { content: ''; width: 8px; height: 9px; border: 1.5px dashed currentColor; border-radius: 2px; }
.swc .pk-r { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; text-align: left; color: inherit; background: none; border: 0; border-radius: 14px; cursor: pointer; transition: background .12s; }
.swc .pk-r .tk { width: 34px; height: 34px; }
.swc .pk-r { content-visibility: auto; contain-intrinsic-size: auto 52px; }
.swc .pk-r > span:not(.tk) { flex: 1; display: grid; line-height: 1.3; min-width: 0; }
.swc .pk-r b { font-weight: 500; } .swc .pk-r small { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* on a narrow screen what a row is for may take a second line, rather than be cut */
@media (max-width: 480px) { .swc .pk-r small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; } }
.swc .pk-r em { flex: none; font-style: normal; font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
/* a balance still being read */
.swc .pk-r .pk-rd { animation: pk-rd 1.2s ease-in-out infinite; }
@keyframes pk-rd { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .swc .pk-r .pk-rd { animation: none; } }
.swc .pk-r[aria-current="true"] { background: var(--field); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.swc .pk-r.off { opacity: .45; }
@media (hover: hover) { .swc .pk-r:hover { background: var(--field); } }
.swc .pk-n { margin: 6px 8px 0; font-size: 12px; color: var(--mute); }
.swc .btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; margin-top: 14px; padding: 10px 16px; font-weight: 500; text-decoration: none; color: var(--card); background: var(--ink); border: 1px solid var(--ink); border-radius: 12px; cursor: pointer; transition: background .15s, color .15s; }
.swc .btn:hover:not(:disabled) { background: transparent; color: var(--ink); }
.swc .btn:disabled { opacity: .4; cursor: not-allowed; }
.swc .btn.ghost { color: var(--ink); background: transparent; border-color: var(--hair-2); }
.swc .btn.sm { width: auto; min-height: 28px; padding: 2px 12px; font-size: 12px; margin: 0; border-radius: 8px; }
/* rules of the front page's own for some of the same names (its forms' .amt and .big, its receipts, its lists, its console's flip): undone here */
.swc .fm .amt { display: block; margin: 0; }
.swc .fm .big { margin: 0; }
.swc .rcpt { padding: 0; border: 0; }
.swc .acts { border: 0; }
.swc .ack input[type="checkbox"] { accent-color: var(--ink); }
.swc .mid .flip { display: grid; margin: -18px 0 0 -18px; }
.swc .btn:hover:not(:disabled), .swc .btn:active:not(:disabled) { transform: none; box-shadow: none; }
.swc .tk.sm { width: 18px; height: 18px; }

/* what the front page's tile draws with these parts besides the swap (Shield, Send, Earn, Borrow): a coin chosen from a list, a row that is the only
   way, the line that opens the others, an arrow where nothing flips, an address or a word in place of an amount, a unit after a figure, a ₿ place */
.swc .coin { position: relative; }
.swc .coin select { position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px; pointer-events: none; }
.swc .coin.one { cursor: default; padding-right: 14px; }
@media (hover: hover) { .swc .coin.one:hover { border-color: var(--hair-2); } .swc .coin.one:hover .tk { transform: none; } }
.swc .coin:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.swc .sides .tk { width: 14px; height: 14px; transition: filter .15s, opacity .15s; }
.swc .sides button[aria-checked="false"] .tk { filter: grayscale(1); opacity: .6; }
.swc .sides button[data-held][aria-checked="false"]::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.swc .held { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.swc .held .from { color: var(--mute); }
@media (max-width: 640px) {
  .swc .sides .tk { display: none; }
  .swc .held { flex: 1 1 100%; }
  .swc .held .sides { flex: 1; min-width: 0; }
  .swc .held .sides button { flex: 1; justify-content: center; min-width: 0; padding: 1px 8px; }
}
@media (max-width: 359px) { .swc .held .sides button { padding: 1px 4px; gap: 4px; } }
.swc .rows .c { grid-template-columns: 34px minmax(0, 1fr) auto 18px; }
.swc .rows .c > .tk { width: 34px; height: 34px; transition: opacity .15s; }
.swc .rows .c[aria-checked="false"] > .tk { opacity: .6; }
.swc .rows > .one { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px 9px; border-top: 1px solid var(--hair); }
.swc .rows > .one.c { grid-template-columns: 34px minmax(0, 1fr) auto; }
.swc .rows-h + .one { border-top: 0; }
.swc .rows > .one .rt b, .swc .rows > .one .ra { color: var(--ink); }
.swc .rows .ra output { font: inherit; }
.swc .rows .ra output.busy { opacity: .45; }
.swc .rows button.fold { display: block; width: auto; padding: 2px 14px 12px; font-size: 12px; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; border-top: 0; }
@media (hover: hover) { .swc .rows button.fold:hover { color: var(--ink); background: none; } }
.swc .rows.folded [data-hxd]:not([hidden]) { border-top: 0; }
.swc .rows.folded .c { grid-template-columns: 34px minmax(0, 1fr) auto; }
.swc .rows.folded .c .rd { display: none; }
.swc .rows [data-wait] .ra, .swc .rows [aria-disabled="true"] > :not(.rt) { opacity: .45; }
.swc .mid .arr { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; color: var(--mute); background: var(--card); border: 1px solid var(--hair-2); border-radius: 50%; }
.swc .mid .arr svg { width: 14px; height: 14px; }
.swc .fm .addr { flex: 1; min-width: 0; padding: 8px 0; font: 16px var(--mono); color: var(--ink); text-overflow: ellipsis; background: none; border: 0; outline: none; }
.swc .fm .addr::placeholder { color: var(--mute); opacity: .6; }
.swc .fm .word { flex: 1; min-width: 0; font: 400 34px/1.15 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.swc .fm .say { flex: 1; min-width: 0; font: 13px/1.5 var(--mono); color: var(--mute); overflow-wrap: anywhere; }
.swc .fm .unit { flex: none; font-size: 12px; color: var(--mute); white-space: nowrap; }
.swc .fh .where { color: var(--mute); }
.swc .q.warn { color: var(--warn); }
.swc .quick button.rd svg { width: 8px; height: 10px; margin: 0 4px -1px -2px; fill: var(--ok); }

.swc .buf small { color: var(--mute); }

/* the copy-link icon and the optional 'to your wallet' default stay quiet until hovered */
.swc .cp, #hx-copy.cp { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; color: var(--mute); background: none; border: 0; border-radius: 6px; opacity: .6; cursor: pointer; }
.swc .cp[hidden], #hx-copy.cp[hidden] { display: none; }
.swc .cp svg, #hx-copy.cp svg { width: 15px; height: 15px; }
@media (hover: hover) { .swc .cp:hover, #hx-copy.cp:hover { color: var(--ink); opacity: 1; } }
.swc .ff button.where:not(.priv) { text-decoration: none; }
@media (hover: hover) { .swc .ff button.where:not(.priv):hover { text-decoration: underline; text-underline-offset: 3px; } }

.swc .act .cp, .act #hx-copy.cp { display: flex; margin: 2px auto 0; }
.swc .act .cp[hidden], .act #hx-copy.cp[hidden] { display: none; }
.swc .rows-h .chg { text-decoration: underline; text-underline-offset: 3px; }

/* the TAC mark beside a points figure (a route's note, a home's cue, a receipt line) */
.swc .pt { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; white-space: nowrap; }
.swc .pt .tk, .swc dt .tk.xs { flex: none; }
.swc dt .tk.xs { display: inline-block; margin-right: 5px; vertical-align: -2px; }

/* a split across the two TAC pools, drawn as on the TAC trading page: each pool's share, named */
.swc .splitbar { display: flex; gap: 2px; height: 18px; margin-top: 3px; min-width: 150px; font: 10.5px var(--mono); letter-spacing: .02em; }
.swc .splitbar span { display: flex; align-items: center; min-width: 0; padding: 0 6px; overflow: hidden; white-space: nowrap; color: #fff; }
.swc .splitbar .pp { background: #4a63d6; border-radius: 3px 0 0 3px; } .swc .splitbar .tp { background: #15803d; border-radius: 0 3px 3px 0; }

/* a token row's kind: Private (dashed, like the ring on its mark), Public, Bitcoin; shown only while searching, when the switch and the headings are gone */
.swc .pk-r b .pk-t { display: none; margin-left: 8px; padding: 0 6px; font: 500 9.5px/16px var(--mono); letter-spacing: .07em; text-transform: uppercase; border-radius: 999px; vertical-align: 2px; color: var(--mute); border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.swc .pk-r b .pk-t::after { content: attr(data-t); }
.swc .pk-r b .pk-t-defi, .swc .pk-r b .pk-t-pay { border-style: dashed; color: var(--ink); }
.swc #pk-l.srch .pk-r b .pk-t { display: inline-block; }