/* Unified bridge — one interface over two engines.

   Everything here is built on the tokens in home.css and adds only the
   components the rest of the site does not already have. Two rules hold the
   whole file together:

   1. The user never learns which engine is running. "NEAR Intents" and
      "Skip" are implementation, not vocabulary. The tabs are named after
      where the user's money is, because that is the only thing they know.
   2. One column on mobile, and every control at least 44px tall. The swap
      card is the only place that goes two-up, and only above 620px.        */

:root {
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  --good: #365d49;
  --warn: #7d5a1c;
  --bad: #8c3a30;
}

/* ------------------------------------------------------------------ shell */

/* Fills the site container; the form inside splits into two columns on
   wide screens rather than leaving a third of the row empty. */
.bridge {
  max-width: 1180px;
}

/* Tabs. Not "providers" — these are the three places assets come from, and
   which engine answers is a consequence the user never sees. */
.bridge-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.bridge-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  min-height: 44px;
  padding: 15px 15px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .16s ease;
}
.bridge-tab:hover { border-color: var(--line-strong); }
.bridge-tab:active { transform: scale(.985); }
.bridge-tab.is-active { border-color: var(--ink); background: var(--surface); }
.bridge-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bridge-tab strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.bridge-tab small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}
/* Chain marks double as the tab's illustration, so the tab says where you
   are without needing to be read. */
.bridge-tab-marks {
  display: flex;
  gap: 5px;
  height: 18px;
}
.bridge-tab-marks img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: grayscale(1) saturate(0) contrast(1.15);
  mix-blend-mode: multiply;
  opacity: .55;
  transition: opacity .18s ease, filter .18s ease;
}
.bridge-tab.is-active .bridge-tab-marks img {
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}

.bridge-stage {
  padding: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
}
.bridge-panel[hidden] { display: none; }

/* ------------------------------------------------------- two-column form

   The site's container is 1180px and the form is naturally about 700px, so
   one column left a third of the row empty and pushed the button below the
   fold. Splitting it puts the quote and the details the user must fill in
   side by side, and the safety reminder ends up next to the button it is
   about rather than a scroll away from it.

   Below 940px this collapses to the source order, which is already the
   order the flow reads in: quote, then addresses, then confirm.           */

.bridge-cols { display: grid; gap: 26px; }
.bridge-col { min-width: 0; }

@media (min-width: 940px) {
  .bridge-cols {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 34px;
    align-items: start;
  }
  /* A rule rather than a gap alone — it reads as one form split in two,
     not two unrelated panels. */
  .bridge-cols > .bridge-col + .bridge-col {
    padding-left: 34px;
    border-left: 1px solid var(--line);
  }
  .bridge-fields { margin-top: 0; }
}

/* Inside the bridge the safety note is a sibling of the button, not a page
   footnote, so it drops the section-level spacing home.css gives it. */
.bridge-col .safety-note { margin-top: 22px; }

/* ------------------------------------------------------------- swap card */

/* The familiar send/receive pair. Two panels split by a rule carrying the
   direction and the route, so "where is this going" is answered without
   reading a label. */
.swap {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
}
.swap-side { padding: 17px 18px 15px; }
.swap-side-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.swap-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.swap-amt {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(28px, 5.5vw, 38px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.swap-amt::placeholder { color: var(--line-strong); }
.swap-amt:focus { outline: none; }
.swap-amt:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
.swap-amt.is-out { color: var(--muted); }
.swap-amt.is-out.has-value { color: var(--ink); }
.swap-usd {
  min-height: 15px;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* The asset button opens the picker. Sized so the token mark, the ticker and
   the chain all fit without wrapping at 320px. */
.asset-btn {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 7px 12px 7px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.asset-btn:hover { border-color: var(--ink); }
.asset-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.asset-btn[disabled] { opacity: .5; cursor: default; }
.asset-btn .tok { flex: none; }
.asset-btn > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}
.asset-btn strong {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.asset-btn small {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.asset-btn .chev {
  flex: none;
  margin-left: 2px;
  color: var(--muted);
  font-size: 10px;
}

.swap-mid {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.swap-arrow {
  display: grid;
  flex: none;
  width: 26px;
  height: 26px;
  margin: -13px 0;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: var(--paper);
  color: var(--muted);
  font-size: 11px;
}
.swap-via {
  padding: 9px 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.5;
}

/* ------------------------------------------------------------ token marks */

.tok {
  width: 26px;
  height: 26px;
  border-radius: 99px;
  object-fit: cover;
  background: var(--surface);
}
.tok-lg { width: 34px; height: 34px; }
/* Marks we ship are transparent and not square — the Solana mark is taller
   than it is wide. They need containing and a ground to sit on, where a
   square CDN raster wants cropping to the circle. */
.tok--own {
  padding: 4px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  object-fit: contain;
}
.tok-lg.tok--own { padding: 5px; }
/* Marks that carry their own coin-shaped ground fill the circle instead of
   sitting on ours, so they are not a small square inside a ring. */
.tok--coin { padding: 0; background: none; box-shadow: none; object-fit: cover; }
/* Deterministic monogram — the guaranteed floor for the long tail, so a
   missing logo never renders as a broken image. */
.tok-mono {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 99px;
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.tok-lg-mono { width: 34px; height: 34px; font-size: 10.5px; }
/* The chain badge that rides on a token mark, so "USDC" and "which USDC"
   are one glyph rather than two lines of text. */
.tok-wrap { position: relative; display: inline-flex; flex: none; }
.tok-chain {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 14px;
  height: 14px;
  padding: 1.5px;
  border-radius: 99px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line);
  object-fit: contain;
}

/* ------------------------------------------------------------- quote meta */

.quote-meta {
  margin: 18px 0 0;
  border-top: 1px solid var(--line);
}
.quote-meta[hidden] { display: none; }
.quote-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 1px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.quote-row dt { color: var(--muted); }
.quote-row dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.quote-row dd.is-good { color: var(--good); }
.quote-row dd.is-warn { color: var(--warn); }

details.breakdown { margin-top: 13px; }
details.breakdown > summary {
  color: var(--focus);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
details.breakdown > summary::-webkit-details-marker { display: none; }
details.breakdown .quote-meta { margin-top: 9px; border-top: 0; }
details.breakdown .quote-row { padding: 8px 1px; font-size: 11.5px; }
details.breakdown .quote-row dd { font-weight: 400; }
.bd-note {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

/* ---------------------------------------------------------------- fields */

.bridge-fields {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}
.field { display: block; min-width: 0; }
.field > span,
.field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.field > span i,
.field-label i {
  font-style: normal;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
}
.field-row { display: flex; gap: 8px; }
.field input[type="text"] {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
}
.field input[type="text"]:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 22%, transparent);
}
.field input.is-bad { border-color: var(--bad); }

.note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
}
.note.ok { color: var(--good); }
.note.warn { color: var(--warn); }
.note.bad { color: var(--bad); }
.note:empty { display: none; }

.textbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--focus);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.textbtn:disabled { color: var(--muted); cursor: default; }
.fill-btn {
  flex: none;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.fill-btn:hover { border-color: var(--ink); }
.fill-btn[hidden] { display: none; }

.button--ghost {
  min-width: 0;
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink);
}
.button--ghost:hover { background: var(--surface); }
.button--sm { min-height: 42px; min-width: 0; gap: 14px; padding: 0 16px; font-size: 12px; }
.button--block { width: 100%; justify-content: center; gap: 14px; }
.button[disabled] { opacity: .4; pointer-events: none; }
.bridge-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

/* Spinner for in-flight buttons. */
.spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,.32);
  border-top-color: #fff;
  border-radius: 99px;
  animation: bridge-spin .7s linear infinite;
}
@keyframes bridge-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ deposit step */

.bridge-step[hidden] { display: none; }
.bridge-step-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 6px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.bridge-step-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(21px, 3vw, 27px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.bridge-step-num {
  flex: none;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.bridge-step-note {
  max-width: 56ch;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}

.addr-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 22px 0 8px;
}
.addr-head span:first-child {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.addr-net {
  padding: 4px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.addr {
  padding: 15px 16px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  word-break: break-all;
}
/* The deposit pair sits side by side on desktop and stacks on mobile — the
   QR is worth its space on a phone only when it can be scanned by another
   device, which is exactly the desktop case. */
.deposit-grid {
  display: grid;
  gap: 20px;
  align-items: start;
  margin-top: 18px;
}
.qr {
  display: grid;
  margin: 0;
  padding: 14px;
  place-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}
.qr svg, .qr img { display: block; width: 100%; max-width: 190px; height: auto; }
.qr figcaption {
  color: var(--muted);
  font-size: 10.5px;
  text-align: center;
}
.copy-row { display: grid; gap: 10px; }

.notice {
  margin: 14px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.notice strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
}
.notice--alert { border-color: var(--bad); }
.notice--warn { border-color: var(--warn); }

/* ---------------------------------------------------------------- progress */

.status-line {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 22px 0 18px;
  font-size: 13.5px;
  font-weight: 700;
}
.status-hint {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.55;
}
.status-line { align-items: flex-start; }
.status-line .beacon { margin-top: 5px; }
.beacon {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--muted);
}
.beacon.live {
  background: var(--focus);
  animation: bridge-pulse 1.7s ease-in-out infinite;
}
.beacon.done { background: var(--good); }
.beacon.bad { background: var(--bad); }
@keyframes bridge-pulse { 50% { opacity: .3; } }

.track { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.track li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 1px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}
.track li .mk {
  flex: none;
  width: 15px;
  height: 15px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
}
.track li.on { color: var(--ink); font-weight: 700; }
.track li.on .mk { border-color: var(--focus); box-shadow: inset 0 0 0 3px var(--focus); }
.track li.past { color: var(--ink); }
.track li.past .mk { border-color: var(--good); background: var(--good); }

/* ------------------------------------------------------------ asset picker */

/* A dialog on desktop, a bottom sheet on mobile. Same markup, and the
   difference is entirely in the media query at the end of this file. */
.picker {
  width: min(460px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 80px));
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.picker::backdrop { background: rgba(23,24,22,.42); }
.picker-inner { display: flex; flex-direction: column; max-height: inherit; }
.picker-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.picker-head h4 {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -.02em;
}
.picker-close {
  display: grid;
  flex: none;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: none;
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
}
.picker-close:hover { background: var(--surface); }
.picker-search { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.picker-search input {
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
}
.picker-search input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 22%, transparent);
}
.picker-list {
  flex: 1 1 auto;
  margin: 0;
  padding: 6px 0 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.picker-group {
  padding: 14px 16px 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 9px 16px;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.picker-item:hover, .picker-item:focus-visible { background: var(--surface); outline: none; }
.picker-item.is-on { background: var(--surface); }
.picker-item > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.picker-item strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.picker-item small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.picker-item .picker-on { flex: none; color: var(--focus); font-size: 13px; font-weight: 700; }
.picker-empty { padding: 34px 16px; color: var(--muted); font-size: 12.5px; text-align: center; }

/* ------------------------------------------------------------ resume banner */

.bridge-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--focus);
  border-radius: 4px;
  background: var(--surface);
}
.bridge-resume[hidden] { display: none; }
.bridge-resume p { flex: 1 1 220px; margin: 0; font-size: 12.5px; line-height: 1.6; }
.bridge-resume strong { display: block; font-size: 13px; }

/* ------------------------------------------------------------ engine notice */

/* Shown while the Cosmos bundle is fetched. It is the one place the two
   engines visibly differ, so it gets a real message rather than a spinner
   with no explanation. */
.engine-loading {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 44px 4px;
  color: var(--muted);
  font-size: 12.5px;
}
.engine-loading .spin {
  border-color: var(--line-strong);
  border-top-color: var(--focus);
}
.engine-error {
  padding: 30px 4px;
  color: var(--bad);
  font-size: 12.5px;
  line-height: 1.7;
}

/* -------------------------------------------------------------- legal foot */

.bridge-legal {
  max-width: 720px;
  margin-top: 22px;
}
.bridge-legal p {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}
.bridge-legal a { color: var(--muted); text-underline-offset: 3px; }
.bridge-alt {
  max-width: 720px;
  margin: 18px 0 0;
  font-size: 12.5px;
}
.bridge-alt a { color: var(--ink); font-weight: 700; text-underline-offset: 4px; }

/* ------------------------------------------------------------------ mobile */

@media (min-width: 620px) {
  .deposit-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .copy-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .bridge-tabs { grid-template-columns: 1fr; gap: 8px; }
  /* Horizontal on a phone: the marks move beside the label so a tab costs
     one row instead of three, and all three stay visible without scrolling. */
  .bridge-tab {
    flex-direction: row;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
  }
  .bridge-tab-marks { flex: none; }
  .bridge-tab > span:last-child { min-width: 0; }
  .bridge-stage { padding: 16px; border-radius: 4px; }
  .swap-side { padding: 15px 15px 13px; }
  .swap-mid { padding: 0 15px; }
  .asset-btn { padding: 6px 10px 6px 8px; }
  .asset-btn small { display: none; }
  .bridge-actions .button { width: 100%; justify-content: space-between; }
}

@media (max-width: 560px) {
  /* Bottom sheet. Anchored to the bottom edge so it sits under the thumb,
     and tall enough that the search field never hides the first result. */
  .picker {
    width: 100%;
    max-width: none;
    max-height: 82vh;
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: 12px 12px 0 0;
  }
  .picker-item { min-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
  .beacon.live { animation: none; }
  .bridge-tab:active { transform: none; }
}

/* ============================================================ cosmos engine

   Styles for the Skip/Keplr leg. They live here rather than inside the Cosmos
   bundle so there is exactly one stylesheet for the bridge and the two engines
   cannot drift apart visually.

   Everything is scoped to the panel. The engine's markup was written for a
   page of its own and uses generic names — .step, .asset, .tag, .queue —
   that would otherwise be a standing collision risk against the rest of the
   site.                                                                    */

/* The Cosmos flow is a tall column of steps, so it keeps a reading measure
   instead of stretching across the full container the way the two-column
   NEAR form does. */
#bridge-panel-cosmos { max-width: 720px; }
#bridge-panel-cosmos .cosmos-intro {
  max-width: 60ch; margin: 0 0 4px; color: var(--muted);
  font-size: 12.5px; line-height: 1.7;
}

#bridge-panel-cosmos .step { padding: 26px 0; border-top: 1px solid var(--line); }
#bridge-panel-cosmos .step:first-child { padding-top: 4px; border-top: 0; }
#bridge-panel-cosmos .step[hidden] { display: none; }
#bridge-panel-cosmos .step-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-bottom: 6px;
}
#bridge-panel-cosmos .step-title {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 3vw, 27px); line-height: 1.1; letter-spacing: -.03em;
}
#bridge-panel-cosmos .step-num {
  flex: none; color: var(--muted); font-size: 9.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
#bridge-panel-cosmos .step-note {
  max-width: 56ch; margin: 10px 0 0; color: var(--muted);
  font-size: 12.5px; line-height: 1.7;
}
#bridge-panel-cosmos .step.settled .step-title,
#bridge-panel-cosmos .step.settled .step-note { opacity: .5; }
#bridge-panel-cosmos .step-actions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px;
}

#bridge-panel-cosmos .checkline {
  display: flex; gap: 12px; align-items: flex-start; max-width: 520px;
  margin-top: 24px; cursor: pointer;
}
#bridge-panel-cosmos .checkline input {
  width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--focus); flex: none;
}
#bridge-panel-cosmos .checkline b { display: block; font-size: 13px; font-weight: 700; }
#bridge-panel-cosmos .checkline > span > span {
  display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.6;
}

/* portfolio ---------------------------------------------------------------- */
#bridge-panel-cosmos .total-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
#bridge-panel-cosmos .total-row strong {
  font-family: var(--serif); font-size: clamp(32px, 6vw, 44px); font-weight: 400;
  line-height: .9; letter-spacing: -.04em;
}
#bridge-panel-cosmos .total-row span {
  color: var(--muted); font-size: 9px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}
#bridge-panel-cosmos .assets { margin-top: 22px; border-top: 1px solid var(--line); }
#bridge-panel-cosmos .asset-group { border-bottom: 1px solid var(--line); }
#bridge-panel-cosmos .asset {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 16px;
  align-items: center; padding: 14px 2px; cursor: pointer;
}
#bridge-panel-cosmos .asset:hover { background: var(--paper); }
/* Sits outside the row's label on purpose — nested inside it, every click on
   the input would toggle the checkbox it belongs to. */
#bridge-panel-cosmos .amount-line {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: 10px; padding: 0 2px 13px; font-size: 11px; color: var(--muted);
}
#bridge-panel-cosmos .amount-line .mono { font-family: var(--mono); }
#bridge-panel-cosmos .amount-line input {
  width: 150px; padding: 8px; text-align: right; color: inherit;
  border: 1px solid var(--line); border-radius: 4px; background: var(--paper);
  font-family: var(--mono); font-size: 12px;
}
#bridge-panel-cosmos .amount-line input:focus { outline: none; border-color: var(--focus); }
#bridge-panel-cosmos .amount-line.over input { border-color: #b4472f; }
#bridge-panel-cosmos .asset.blocked { opacity: .42; cursor: not-allowed; }
#bridge-panel-cosmos .asset input { width: 18px; height: 18px; margin: 0; accent-color: var(--focus); }
#bridge-panel-cosmos .asset .name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
#bridge-panel-cosmos .asset .where { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
#bridge-panel-cosmos .asset .val { text-align: right; font-variant-numeric: tabular-nums; }
#bridge-panel-cosmos .asset .usd { font-size: 14px; font-weight: 700; }
#bridge-panel-cosmos .asset .amt {
  display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-family: var(--mono);
}
#bridge-panel-cosmos .assets-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px;
}
#bridge-panel-cosmos .tally {
  color: var(--muted); font-size: 10px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}

/* review ------------------------------------------------------------------- */
#bridge-panel-cosmos .lines { max-width: 520px; border-top: 1px solid var(--line); }
#bridge-panel-cosmos .lines .row {
  display: flex; justify-content: space-between; gap: 20px; padding: 13px 0;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
#bridge-panel-cosmos .lines .row .k { color: var(--muted); }
#bridge-panel-cosmos .lines .row .v { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; }
#bridge-panel-cosmos .lines .row.big .v {
  font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -.03em;
}
#bridge-panel-cosmos details.more { max-width: 520px; margin-top: 14px; }
#bridge-panel-cosmos details.more summary {
  cursor: pointer; color: var(--focus); font-size: 12px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 4px;
}
#bridge-panel-cosmos details.more .lines { margin-top: 10px; border-top: 0; }
#bridge-panel-cosmos details.more .row { font-size: 12.5px; padding: 9px 0; }
#bridge-panel-cosmos details.more .row .v { font-weight: 400; }
#bridge-panel-cosmos .callout {
  max-width: 520px; margin: 20px 0 0; padding-left: 14px;
  border-left: 2px solid var(--line-strong); color: var(--muted);
  font-size: 12px; line-height: 1.7;
}
#bridge-panel-cosmos .callout.warn { border-color: var(--warn); }

/* queue -------------------------------------------------------------------- */
#bridge-panel-cosmos .queue { max-width: 560px; border-top: 1px solid var(--line); }
#bridge-panel-cosmos .qrow {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 15px 2px; border-bottom: 1px solid var(--line);
}
#bridge-panel-cosmos .qrow .name { font-size: 14px; font-weight: 700; }
#bridge-panel-cosmos .qrow .where { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
#bridge-panel-cosmos .tag {
  font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 4px;
  color: var(--muted); white-space: nowrap;
}
#bridge-panel-cosmos .tag.run { border-color: var(--focus); color: var(--focus); }
#bridge-panel-cosmos .tag.sign { border-color: var(--warn); color: var(--warn); }
#bridge-panel-cosmos .tag.ok { background: var(--focus); border-color: var(--focus); color: var(--paper); }
#bridge-panel-cosmos .tag.bad { border-color: var(--bad); color: var(--bad); }

/* overall progress --------------------------------------------------------- */
#bridge-panel-cosmos .progress { max-width: 560px; margin-top: 24px; }
#bridge-panel-cosmos .progress-track {
  height: 6px; border-radius: 99px; background: var(--line); overflow: hidden;
}
#bridge-panel-cosmos .progress-fill {
  position: relative; height: 100%; width: 0; border-radius: 99px; background: var(--focus);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--focus) 55%, transparent);
  transition: width .7s cubic-bezier(.4,0,.2,1);
}
/* A sheen travelling the filled portion — the signal that work is happening
   even while a relay sits still for a minute. It stops when nothing is in
   flight, because an animation outliving its work reads as a hang. */
#bridge-panel-cosmos .progress-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: cosmos-sheen 1.9s ease-in-out infinite;
}
#bridge-panel-cosmos .progress.settled .progress-fill::after { animation: none; opacity: 0; }
#bridge-panel-cosmos .progress.settled .progress-fill { box-shadow: none; }
#bridge-panel-cosmos .progress-label {
  margin-top: 11px; font-size: 11px; color: var(--muted); letter-spacing: .02em;
}
@keyframes cosmos-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* per-row step pips -------------------------------------------------------- */
#bridge-panel-cosmos .pips { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
#bridge-panel-cosmos .pip {
  width: 24px; height: 4px; border-radius: 99px; background: var(--line-strong);
  transition: background .35s ease, box-shadow .35s ease;
}
#bridge-panel-cosmos .pip.on { background: var(--focus); }
#bridge-panel-cosmos .pip.live {
  background: var(--focus);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--focus) 65%, transparent);
  animation: cosmos-pulse 1.25s ease-in-out infinite;
}
#bridge-panel-cosmos .pip.bad { background: var(--bad); }
@keyframes cosmos-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

#bridge-panel-cosmos .log-wrap { max-width: 560px; margin-top: 20px; }
#bridge-panel-cosmos .log-wrap summary { cursor: pointer; font-size: 11px; color: var(--muted); }
#bridge-panel-cosmos .log {
  max-width: 560px; margin-top: 10px; max-height: 170px; overflow: auto;
  font-family: var(--mono); font-size: 11px; line-height: 1.9; color: var(--muted);
}
#bridge-panel-cosmos .spinner {
  display: inline-block; width: 12px; height: 12px; vertical-align: -1px;
  border: 2px solid var(--line-strong); border-top-color: var(--focus);
  border-radius: 50%; animation: bridge-spin .7s linear infinite;
}

@media (max-width: 640px) {
  #bridge-panel-cosmos .step-head { flex-direction: column; gap: 4px; }
  #bridge-panel-cosmos .asset { gap: 12px; }
  #bridge-panel-cosmos .step-actions .button { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  #bridge-panel-cosmos .spinner { animation: none; }
  #bridge-panel-cosmos .progress-fill::after,
  #bridge-panel-cosmos .pip.live { animation: none; }
  #bridge-panel-cosmos .progress-fill { transition: none; }
}