/* The swap card: /swap and one swap's own page.
 *
 * Split out of pages.css on 2026-08-26 at its own `swap card` banner, which is
 * the same cut forms.css took to make order-form.css. That sheet stood at 749
 * of a hard 750 with a rule still to add, and this block was the one part of it
 * owned by a single product rather than shared by every inner page.
 *
 * ORDER. Linked directly after pages.css and before shelf.css, so every rule
 * that was below these still is. Nothing here shares a selector with the quote
 * widget it now sits after - checked, the two lists are disjoint - so no tie at
 * equal specificity changes hands. */

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

/* One card for the whole page, and the numbers that forced it. Before: a
   `.page-head` 228px tall holding one word, of which 128px was padding; then a
   `.section` adding 48px above and 104px of empty below; then a 566px card at
   40px padding whose three facts each took a 58px row. 1114px of document for
   about twelve lines of text.

   So the head folded into the card, this section carries its own padding
   instead of the site default, and the facts pack by width rather than to a
   fixed two columns - three or four across at 1180px, one on a phone. */
.swap-page { padding: var(--step-10) 0 var(--step-12); }
.swap-card { padding: var(--step-8); }
/* The consent panel moved inside this card on 2026-08-10, so that an `h2` no
   longer renders before the page's `h1`. `.panel + .panel` cannot space it: its
   previous sibling is `.swap-head`, not a panel, and `.swap-head .lede` clears
   its own bottom margin, so the two boxes met with nothing between them. */
.swap-card > .panel { margin-top: var(--step-6); }

/* The state on the left, what it is and what it means on the right. The same
   shape the page head had, at a third of the height, and with the right cell
   always filled - it was empty on every state whose lede was short. */
/* Two rows, and both halves mapped onto them with `subgrid`, so the label lines
   up with the label and the sentence lines up with the heading. Until 2026-08-11
   this was two independent columns at `align-items: start`: the 15px pair sat
   level with the 11px eyebrow, the 44px `h1` had nothing beside it at all, and
   the right half read as floating 45px above where it belonged. Nothing here
   places anything - the two rows are sized by whichever side is taller, which is
   what keeps it correct when a state's lede runs to three lines. */
.swap-head {
  display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  grid-template-rows: auto auto; row-gap: var(--step-2);
  column-gap: var(--step-8); align-items: start;
}
/* `stretch`, against the `start` above: a subgrid has to span its rows for its
   own children to land in them, and `start` collapses it to content height. */
.swap-head > div {
  display: grid; grid-template-rows: subgrid; grid-row: span 2; align-self: stretch;
}
/* Both margins are zero because the row gap above now owns that space. Left on,
   they were added to it on one side only and put the two halves 8px apart. */
.swap-card h1 { font-size: clamp(30px, 3.6vw, 44px); margin: 0; }
.swap-head .pair { margin: 0; color: var(--text-1); font-size: 15px; }
.swap-head .lede { margin: 0; }
/* Its own cell across both columns. A notice dropped into a two column grid
   lands in whichever cell is free and reads as a property of that half. */
.swap-head .notice { grid-column: 1 / -1; margin: var(--step-5) 0 0; }

.rowlist-2 {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  column-gap: var(--step-10); margin-top: var(--step-6);
}
/* A rule per row rather than per pair, so the columns read as one table and not
   as several lists that happen to sit side by side. */
.rowlist-2 div { border-top: 1px solid var(--border); padding: var(--step-3) 0; }
/* A pair, not two opposite edges: `space-between` is right in a full-width
   panel and wrong in a 360px column, where it threw "Status" and "Converting"
   about 200px apart with nothing between them. The `dd { margin-left: 0 }` that
   sat here went with the auto margin it was undoing - see `.rowlist dd`. */
.rowlist-2 div { justify-content: flex-start; column-gap: var(--step-5); }

/* Facts left, addresses right. The card was four full-width bands stacked down
   an 1180px page, each holding a short pair.
   Four equal columns since 2026-08-11, not a .9fr/1.1fr pair whose halves each
   subdivided on their own terms. That produced tracks of 253px, 253px, 324px and
   324px for four things a reader compares side by side, and the rule that makes
   them read as one table stopped after the second. `subgrid` hands all four the
   same track from this grid, so the rules line up and the card fills its width
   instead of ending 800px short.
   Scoped by `.swap-body >` throughout: `.rowlist-2` and `.addr-set` are also on
   `gift_order`, `rent_listings` and `rent_mint`, which are not this grid. */
.swap-body {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--step-10); align-items: start; margin-top: var(--step-6);
}
.swap-body > .rowlist-2, .swap-body > .addr-set {
  grid-column: span 2; grid-template-columns: subgrid; column-gap: normal;
  margin-top: 0;
}
/* The rule the fact rows already carry. Without it the two address columns began
   24px below the two fact columns beside them, on one line of four. */
.swap-body > .addr-set > dl { border-top: 1px solid var(--border); padding-top: var(--step-3); }
@media (max-width: 760px) {
  .swap-body { grid-template-columns: 1fr; }
  /* Back to ordinary blocks. A `span 2` inside a one column parent invents a
     second column, which is the collapse failing rather than happening. */
  .swap-body > .rowlist-2, .swap-body > .addr-set {
    grid-column: auto; grid-template-columns: 1fr;
  }
}

/* The addresses, which are the widest things on the page and were each given a
   whole line of their own in a half width column, wrapping every one of them
   over two lines. Side by side they fit. */
.addr-set {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--step-5); margin-top: var(--step-8);
}
/* A `dl` since 2026-08-10: these pairs are a label and a 42-character crypto
   address, and as two loose paragraphs nothing tied one to the other on the
   page that decides where the money lands. `margin: 0` because no sheet resets
   the UA's `dl { margin-block: 1em }` - `.rowlist` and `.bill` each set
   their own, so there is no global reset to inherit. */
.addr-set > dl { min-width: 0; margin: 0; }
.addr-set .foot-note { margin: 0 0 var(--step-2); }
.addr-set .addr { margin: 0; }

/* What is actually being asked for, when anything is. Bigger than a row in the
   list below it because it is the one figure somebody has to act on. */
.pay-ask { margin-top: var(--step-6); }
.pay-amount { margin: 0 0 var(--step-5); font-size: 28px; color: var(--text-1); }
/* Same conversion as `.addr-set` above, and `dd` carries a 40px UA indent that
   `.addr` does not reset - it sets only a margin-top. */
.pay-ask dl { margin: 0; }
.pay-ask dd { margin-left: 0; }
/* A label sits ON its value. `.foot-note` carries `margin-top: var(--step-5)`
   and `.addr` another `var(--step-3)`, so each label floated about 24px clear of
   the address it names and the pair read as two unrelated things on the page
   that decides where the money lands. `.addr-set` resets exactly this. */
.pay-ask .foot-note { margin: 0 0 var(--step-2); }
.pay-ask .addr { margin-top: 0; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--step-3); margin-top: var(--step-8); }
/* Sized to its words, not to the row. Growing meant a settled swap - which has
   one control left - drew a single button a thousand pixels wide for three
   words, which is the same fault this card was rebuilt to fix. */
.btn-row .btn { flex: 0 1 220px; }

/* The three answers to a consent prompt, across rather than stacked. Each is a
   button with its own explanation under it, and stacked they pushed the last
   one below the fold on the page whose whole purpose is choosing between all
   three. */
/* 200, not 240: at 240 the third track only fits above a ~876px card, so between
   761 and 875 a three way prompt drew two across and one underneath - the worst
   of both arrangements. 200 moves that threshold to about 672px, below the 760
   where the page is single column anyway, so it is three or it is stacked. */
.choices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--step-6); margin-top: var(--step-6); align-items: start;
}
.choices .foot-note { margin-top: var(--step-3); }

/* `auto-fit` already collapses these two on its own, but the rule that every
   multi column grid names a single column breakpoint is worth keeping literal:
   a reader of the sheet should not have to work out a track function to know
   what a phone gets, and `responsive.rs` checks exactly that. */
@media (max-width: 760px) {
  .swap-card { padding: var(--step-6); }
  .rowlist-2, .addr-set, .choices, .swap-head { grid-template-columns: 1fr; }
  /* Ordinary blocks again, stacked. Two `span 2` subgrids in a single column
     would each claim two rows and interleave with the row gap between them. */
  .swap-head > div { display: block; }
  .swap-head { row-gap: var(--step-4); }
  /* Side by side these are two grid cells and need nothing between them.
     Stacked they are two blocks both holding `margin: 0`, so the pair sits one
     line-height above the lede and reads as its opening line rather than as the
     label over it - on a phone, where the pair is the only thing saying which
     way round the swap goes. */
  .swap-head .pair { margin-bottom: var(--step-2); }
  .btn-row .btn { flex: 1 1 100%; }
  .pay-amount { font-size: 24px; }
}