/* One-bag multiswap: a readonly review, not a settings panel. Scoped to its dialog. */
#sheet.multiswap {
  --swap-bg: #182124;
  --swap-receive: #242f31;
  --swap-line: #344341;
  --swap-muted: #bdc8c1;
  --swap-secondary: #a9b6ad;
  --swap-accent: #d7ff65;
  width: min(600px, calc(100vw - 32px));
  max-width: min(600px, calc(100% - 32px)); max-height: min(920px, calc(100% - 40px));
  padding: 0; border: 1px solid var(--swap-line); border-radius: 24px;
  background: var(--swap-bg); color: var(--ink); box-shadow: 0 32px 96px #0008;
  overflow: hidden; overscroll-behavior: contain; margin: auto;
}
#sheet.multiswap[open] {display: flex; flex-direction: column;}
#sheet.multiswap::backdrop {background: #080e10ba; backdrop-filter: blur(7px);}
#sheet.multiswap .sheet-header {flex: none; padding: 12px 22px; min-height:64px; gap: 12px; border-bottom: 0; background: var(--swap-bg);}
#sheet.multiswap .sheet-header h2 {font-size: 1.1875rem; font-weight: 650; letter-spacing: -.025em; line-height: 1.3;}
#sheet.multiswap .sheet-header .sample-dialog-badge {font-size: .6875rem; font-weight: 500; margin-inline-start: 8px; vertical-align: middle;}
#sheet.multiswap .sheet-header .icon-button {border-color: transparent; color: var(--swap-muted); width: 40px; height: 40px; flex: none;}
#sheet.multiswap .sheet-body {flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 22px 18px; scrollbar-gutter: stable;}
#sheet.multiswap .sheet-footer {flex: none; padding: 12px 22px 13px; border-top: 1px solid var(--swap-line); background: var(--swap-bg); box-shadow: 0 -8px 24px #0001;}
.multi-review {min-width: 0; font-size: .8125rem; font-variant-numeric: tabular-nums;}
.swap-stage-nav {display: flex; gap: 12px; padding: 0; margin: 0 0 12px; list-style: none; align-items: center;}
.swap-stage-nav li {display: flex; align-items: center; gap: 7px; flex: 1; color: var(--swap-secondary); font-size: .75rem;}
.swap-stage-nav li:not(:last-child)::after {content: ''; height: 1px; flex: 1; background: var(--swap-line); margin-inline-start: 7px;}
.swap-stage-nav li:last-child {flex: none;}
.swap-stage-nav li>span {display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--swap-line); border-radius: 50%; font-size: .6875rem;}
.swap-stage-nav li.current {color: var(--ink); font-weight: 600;}
.swap-stage-nav li.current>span {background: var(--swap-accent); color: var(--action-ink); border-color: transparent;}
.swap-stage-nav li.complete>span {color: var(--swap-accent); border-color: #7b8b4e;}
.swap-stage-nav .icon {width: 12px; height: 12px;}
.swap-sample-note {font-size: .6875rem; color: var(--swap-secondary); margin: -2px 0 10px;}
.swap-overview {background: var(--swap-receive); border-radius: 16px; padding: 13px 16px;}
.swap-source-strip {display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--swap-line);}
.swap-source-avatars {display: flex; padding-inline-end: 3px;}
.swap-source-avatars .token-icon {width: 30px; height: 30px; border: 2px solid var(--swap-receive); margin-inline-end: -7px; flex: none; font-size: .65rem;}
.swap-source-avatars .token-icon img {width: 100%; height: 100%; object-fit: cover;}
.swap-more {width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); font-size: .6875rem; border: 2px solid var(--swap-receive);}
.swap-sources-caption {display: flex; flex-direction: column; gap: 3px; flex: 1;}
.swap-sources-caption strong {font-size: .875rem; font-weight: 600;}
.swap-sources-caption>span {font-size: .6875rem; color: var(--swap-secondary);}
.swap-merge-label {display: flex; align-items: center; gap: 5px; color: var(--swap-muted); font-size: .6875rem;}
.swap-merge-label .icon {width: 16px; height: 16px; transform: rotate(90deg);}
.swap-receive {display: flex; align-items: center; gap: 16px; padding-top: 12px;}
.swap-receive-copy {min-width: 0; flex: 1;}
.swap-field-label {font-size: .75rem; color: var(--swap-muted);}
.swap-big-number {font-size: 1.8125rem; line-height: 1.2; letter-spacing: -.035em; font-weight: 650; margin-block: 5px 5px; overflow-wrap: anywhere;}
.swap-big-number .swap-symbol {color: var(--swap-accent); font-size: 1.25rem; font-weight: 550; letter-spacing: -.02em;}
.swap-target-logo.token-icon {width: 48px; height: 48px; flex: none; border-color: var(--swap-line); background: var(--swap-bg); font-size: .875rem;}
.swap-target-logo.token-icon img {width: 100%; height: 100%; object-fit: cover;}
.swap-destination-meta {display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: .6875rem; line-height: 1.5; color: var(--swap-secondary);}
.swap-destination-meta i {font-style: normal;}
.swap-remaining-estimate {display: flex; gap: 12px; justify-content: space-between; margin-block-start: 14px; padding-block-start: 12px; border-top: 1px solid var(--swap-line); color: var(--swap-muted); font-size: .75rem; line-height: 1.5;}
.swap-remaining-estimate strong {font-weight: 500; text-align: end; overflow-wrap: anywhere; color: var(--ink);}
.swap-facts {margin: 13px 2px 16px; display: grid; gap: 7px;}
.swap-fact {display: flex; align-items: baseline; justify-content: space-between; gap: 16px; line-height: 1.4; font-size: .75rem;}
.swap-fact dt {color: var(--swap-muted); flex-shrink: 0; max-width: 52%;}
.swap-fact dt small {display: block; font-size: .625rem; line-height: 1.5; color: var(--swap-secondary); margin-block-start: 1px;}
.swap-fact dt small.inline-hint {display:inline; font-size:inherit;}
.swap-fact dd {margin: 0; text-align: end; min-width: 0; overflow-wrap: anywhere; font-weight: 550;}
.swap-fact.minimum {padding-block-end: 11px; margin-block-end: 1px; border-bottom: 1px solid var(--swap-line); font-size: .8125rem;}
.swap-fact.minimum dd {font-weight: 650;}
.swap-cost-caveat {color: var(--warning); font-size: .6875rem; line-height: 1.5;}
.swap-queue-title {display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-block-end: 10px;}
.swap-queue-title h3 {font-size: .8125rem; font-weight: 600;}
.swap-queue-title>span {text-align: end; color: var(--swap-muted); font-size: .6875rem;}
.swap-progress {height: 4px; background: var(--swap-line); border-radius: 8px; overflow: hidden; margin-block-end: 12px;}
.swap-progress>span {display: block; height: 100%; border-radius: inherit; background: var(--swap-accent);}
.swap-leg-list {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;}
.swap-leg {border: 1px solid var(--swap-line); border-radius: 12px; background: transparent; min-width: 0;}
.swap-leg.ready,.swap-leg.active {border-color: #708448; background: #222d27;}
.swap-leg.failed,.swap-leg.unknown,.swap-leg.expired {border-color: #88734a;}
.swap-leg summary {padding: 9px 9px; display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; border-radius: 11px; min-height: 56px;}
.swap-leg summary::-webkit-details-marker {display: none;}
.swap-leg-index {width: 18px; flex: none; font-size: .625rem; color: var(--swap-secondary); text-align: center; display: grid; place-items: center;}
.swap-leg-index .icon,.swap-leg-index .spinner {width: 14px; height: 14px;}
.swap-leg.done .swap-leg-index {color: var(--swap-accent);}
.swap-leg .token-icon {width: 29px; height: 29px; flex: none; font-size: .625rem;}
.swap-leg .token-icon img {width: 100%; height: 100%; object-fit: cover;}
.swap-leg-identity {display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; overflow-wrap: anywhere;}
.swap-leg-identity strong {font-size: .8125rem; font-weight: 550; line-height: 1.3;}
.swap-leg-identity>span {font-size: .6875rem; line-height: 1.4; color: var(--swap-secondary);}
.swap-leg-state {font-size: .6875rem; line-height: 1.45; color: var(--swap-muted); text-align: end; max-width: 100px;}
.swap-leg-state.ready,.swap-leg-state.done,.swap-leg-state.active {color: var(--swap-accent);}
.swap-leg-state.unknown,.swap-leg-state.expired {color: var(--warning);}
.swap-leg-state.failed {color: var(--danger);}
.swap-leg-chevron {display: flex; color: var(--swap-secondary); flex: none;}
.swap-leg-chevron .icon {width: 13px; height: 13px;}
.swap-leg details[open] .swap-leg-chevron {transform: rotate(180deg);}
.swap-leg-extra {padding: 2px 14px 14px 45px;}
.swap-leg-extra dl {margin: 0; display: grid; gap: 9px;}
.swap-leg-extra dl>div {display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 12px; font-size: .6875rem; line-height: 1.5;}
.swap-leg-extra dt {color: var(--swap-secondary);}
.swap-leg-extra dd {margin: 0; text-align: end; overflow-wrap: anywhere;}
.swap-leg-extra code {font-size: .625rem;}
.swap-explorer {display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-block-start: 6px; font-size: .75rem; color: var(--info);}
.swap-explorer .icon {width: 13px; height: 13px;}
.swap-destination-id {display: flex; justify-content: space-between; align-items: start; gap: 14px; margin-block-start: 14px; padding-inline: 2px; font-size: .625rem; color: var(--swap-secondary); line-height: 1.5;}
.swap-destination-id>span {flex: none;}
.swap-destination-id code {font-size: .625rem; overflow-wrap: anywhere; text-align: end; max-width: 75%;}
.swap-separate-note {display: flex; align-items: flex-start; gap: 8px; color: var(--swap-secondary); font-size: .6875rem; line-height: 1.5; margin-block-start: 16px;}
.swap-separate-note>.icon {width: 13px; height: 13px; margin-block-start: 2px;}
.swap-inline-error,.swap-inline-notice,.swap-complete-note {display: flex; align-items: start; gap: 9px; padding: 12px; border-radius: 10px; margin-block-start: 12px; color: var(--warning); background: #302c23; font-size: .75rem; line-height: 1.5;}
.swap-inline-error {color: var(--danger); background: #342628;}
.swap-complete-note {color: var(--swap-accent); background: #253021;}
.swap-inline-error>.icon,.swap-inline-notice>.icon,.swap-complete-note>.icon {width: 16px; height: 16px; margin-block-start: 2px;}
.swap-footer-status {display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-end: 10px; font-size: .6875rem; line-height: 1.4; color: var(--swap-muted); font-variant-numeric: tabular-nums;}
.swap-footer-status [data-review-expiry] {text-align: end; color: var(--swap-secondary);}
.swap-footer-status [data-review-expiry].expired {color: var(--warning);}
#sheet.multiswap .swap-primary {min-height: 48px; font-size: .9375rem; border-radius: 12px;}
#sheet.multiswap .swap-footer-hint {font-size: .625rem; line-height: 1.5; color: var(--swap-secondary); text-align: center; margin-top: 9px;}
.swap-lock-note {color: var(--warning); font-size: .75rem; line-height: 1.5; margin-block-end: 10px;}
@media (hover:hover) {.swap-leg summary:hover {background: #ffffff06;}#sheet.multiswap .sheet-header .icon-button:hover {background: var(--raised);}}
@media (prefers-reduced-motion:no-preference) {
  html[data-motion=on] .swap-progress>span {transition: width 180ms var(--ease);}
  html[data-motion=on] .swap-leg {transition: border-color 150ms var(--ease),background-color 150ms var(--ease);}
  html[data-motion=on] #sheet.multiswap .swap-primary:active {transform: scale(.96);}
}
@media (prefers-reduced-motion:reduce) {#sheet.multiswap .spinner {animation:none;}#sheet.multiswap * {scroll-behavior:auto;}}
html[data-motion=off] #sheet.multiswap .spinner {animation:none;}
@media(max-width:620px) {
  #sheet.multiswap {width:calc(100vw - 20px);max-height:calc(100% - 20px);border-radius:20px;}
  #sheet.multiswap .sheet-header {padding:12px 14px;}
  #sheet.multiswap .sheet-body {padding:0 14px 14px;scrollbar-gutter:auto;}
  #sheet.multiswap .sheet-footer {padding:12px 14px max(12px,env(safe-area-inset-bottom));}
  .swap-overview {padding:14px;}
  .swap-facts {gap:8px;margin-block:13px 18px;}
  .swap-big-number {font-size:1.5625rem;}
  .swap-big-number .swap-symbol {font-size:1.0625rem;}
  .swap-target-logo.token-icon {width:40px;height:40px;}
  .swap-merge-label {font-size:.625rem;}
  .swap-leg summary {gap:6px;padding:10px 7px;}
  .swap-leg-index {width:15px;}
  .swap-leg .token-icon {width:26px;height:26px;}
  .swap-leg-state {max-width:65px;font-size:.6875rem;}
  .swap-leg-identity strong {font-size:.75rem;}
  .swap-leg-identity>span {font-size:.625rem;}
  .swap-leg-extra {padding-inline:12px;}
  .swap-leg-extra dl>div {grid-template-columns:90px minmax(0,1fr);}
  .swap-fact {font-size:.6875rem;gap:10px;}
  .swap-fact.minimum {font-size:.75rem;}
  .swap-destination-id {flex-wrap:wrap;gap:3px;}
  .swap-destination-id code {max-width:100%;text-align:start;}
}
@media(forced-colors:active) {.swap-leg,.swap-overview,.swap-progress {border:1px solid CanvasText;}.swap-progress>span {background:Highlight;}.swap-stage-nav li.current>span {border:1px solid CanvasText;}}

.multi-review:not([data-review-stage="review"]) .swap-queue {margin-block-start:18px;}
.multi-review:not([data-review-stage="review"]) .swap-facts {padding-block-start:12px;border-top:1px solid var(--swap-line);margin-block-start:16px;}
/* Very large portfolios must not force the summary wider than its viewport. */
.swap-sources-caption {min-width:0; overflow-wrap:anywhere;}
.swap-source-avatars {flex-shrink:0;}
.swap-merge-label {flex-shrink:0;}