/* ==========================================================================================
   Desk · the "pastel" theme · Coins (explore.html). Loaded after style.css and built from its tokens, tiles, cards,
   buttons and type; no new colour or font, and every radius is one of style.css's (24 surfaces, 8 to 14 tiles, pill).

   New on this page (the nav, the page title, the tile toggles, the chip, .sr and button.btn are style.css's)
   Title     the shared .page-title (40 / 52 / 56 px) over the "Paired with" definition; the way to launch is the nav's
             violet Launch, as on every page.
   Find      a white panel: the search field (lavender-cream inset, pill, 17 px) and two rows of tile toggles, one radio
             group each. A toggle is style.css's tile toggle (16 px, 850, its own pastel, 14 px radius, 44 px tall, as on
             Launch); the picked one gets a violet ring and the hero's small violet check. Pays runs the Stock Tokens A to Z, then
             cbBTC, USDG and WETH, split by a line break (or, on the phone, a short rule).
             Phone: each row is one line beside its label that scrolls sideways inside the panel, with a short white
             fade on the edge where more tiles wait; the search label is the field's placeholder.
             Tablet and desktop: labels above, the tiles wrap.
   Sort      "Sort by" and a pill switch of three, the picked one filled violet like the primary button (white on it 5.8:1).
   Count     one sentence, the number in ink 800, the rest ink-2; tickers in it are tiles. Below 1080 px a second
             sentence under it gives the totals of what is shown, the dollars in ink 800.
   Hours     the home page's .hours line above the list, only while New York is closed.
   Card      the home page's coin card plus: "Last paid · 4 min ago" (ink-2, 15 px), "Launched" while sorted by
             Newest, and the rank (1 to 12, ink-2, tabular) while sorted by Paid to holders.
   Empty     a white panel, centred: a lilac search mark, the sentence (22 px 850), one grey line, two buttons.
   Totals    from 1080 px, under the Find panel: what the coins shown have paid their holders, in the home card's
             big money (850, cents at 0.6em), with the rounds; it follows the filters.
   Layout    phone: title, the Find panel, the count, the totals, the sort, the home page's compact coin cards; the
             first card starts under 600 px on a 390 x 844 screen.
             1080 px and up: the Find panel and the totals are a 300 / 320 px column beside the coins, two cards a
             row; the column is sticky only on screens tall enough to show all of it.
   Motion    the cards that stay glide to their new places (460 ms, the receipts' curve), new ones fade up 12 px.
             prefers-reduced-motion removes it (style.css also turns every transition off).
   ========================================================================================== */

/* ---------- title ---------- */

.ex-head { display: grid; gap: 8px; padding-top: 16px; padding-bottom: 14px; }
.ex-head .lede { max-width: 36em; line-height: 1.5; }
.lede .tk { line-height: 22px; }

/* ---------- find: search and tile toggles (phone first) ---------- */

.ex { display: grid; gap: 12px; padding-bottom: 48px; }
.ex-side { display: grid; gap: 12px; padding: 12px 14px; overflow: hidden; }
.ex-side .lbl { display: block; }
/* the label is the placeholder on the phone and the tablet; it stays for screen readers */
.ex-q-l {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.search { position: relative; }
.search > svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.search input {
  width: 100%; min-height: 48px; margin: 0; padding: 0 50px 0 46px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--ground);
  color: var(--ink); font: inherit; font-size: 17px; font-weight: 700;
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s ease;
}
.search input::placeholder { color: var(--ink-2); font-weight: 600; opacity: 1; }
.search input:hover { border-color: var(--line-hover); }
/* focus as Launch's fields: white, a violet edge and a soft violet ring */
.search input:focus { outline: none; border-color: var(--violet); background: var(--surface); box-shadow: 0 0 0 3px var(--violet-soft); }
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-x {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer;
}
.search-x:hover { background: var(--violet-soft); color: var(--violet-deep); }
.search-x[hidden] { display: none; }
.search-x:focus-visible { border-radius: 50%; outline-offset: 0; }

/* phone: the label on the left, as in the card's "Paired with" row; one line of tiles that scrolls sideways
   to the panel's edge, with a white fade while more tiles wait to the right */
.fgroup { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; column-gap: 4px; }
.fgroup .lbl { margin: 0; }
.fscroll { position: relative; min-width: 0; margin-right: -14px; }
.fscroll::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFFFFF 80%);
  transition: opacity 0.2s ease;
}
.fscroll::before {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -6px; width: 24px; pointer-events: none;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0), #FFFFFF 70%);
  opacity: 0; transition: opacity 0.2s ease;
}
.fscroll.at-end::after { opacity: 0; }
.fscroll:not(.at-start)::before { opacity: 1; }
.ftiles {
  position: relative; display: flex; flex-wrap: nowrap; gap: 8px;
  /* room inside the scroller for the check (8 px up) and the focus ring (6 px round) */
  margin: -10px 0 -6px -6px; padding: 10px 14px 6px 6px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-left: 6px; scrollbar-width: none;
}
.ftiles::-webkit-scrollbar { display: none; }
.ft { position: relative; flex: none; display: inline-flex; cursor: pointer; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
.ft input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
/* the tile itself, its picked ring and check are style.css's tile toggle */
.ft input:focus-visible + .ft-in { outline: 3px solid var(--violet); outline-offset: 3px; }
/* "All" is a plain white tile; "Stock Tokens" the neutral one (t-more in style.css) */
.ft-all { --bg: var(--surface); --bd: var(--line); --fg: var(--ink); }
/* Pays: the Stock Tokens A to Z, then cbBTC, USDG and WETH; on the phone a short rule between the two groups */
.ft-split { flex: none; align-self: stretch; width: 1px; margin: 6px 2px; border-radius: 1px; background: var(--line); }

/* ---------- the hours line, the count, the totals, the sort ---------- */

.ex-hours { margin-bottom: 14px; }

.ex-bar { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.ex-bar[hidden] { display: none; }
.ex-count { color: var(--ink-2); font-size: 17px; font-weight: 600; line-height: 1.55; text-wrap: pretty; }
.ex-count b { color: var(--ink); font-weight: 800; }
.ex-count .tk { line-height: 24px; }
.ex-tot { color: var(--ink-2); font-size: 17px; font-weight: 600; line-height: 1.5; text-wrap: pretty; }
.ex-tot b { color: var(--ink); font-weight: 800; }
.ex-tot[hidden] { display: none; }

.sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.sort-lbl { margin: 0; white-space: nowrap; }
.seg {
  flex: 1 1 auto; display: flex; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.seg label { position: relative; flex: 1 1 auto; display: flex; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.seg input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.seg span {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 9px; border-radius: 999px;
  color: var(--ink); font-size: 15px; font-weight: 800; white-space: nowrap;
  transition: background-color 0.15s ease;
}
.seg label:hover span { background: var(--violet-soft); }
.seg input:checked + span { background: var(--violet); color: #fff; box-shadow: inset 0 -3px 0 rgba(30, 10, 120, 0.22); }
.seg input:focus-visible + span { outline: 3px solid var(--violet); outline-offset: 2px; }

/* ---------- the card's additions ---------- */

.coins[hidden] { display: none; }
.coin .c-age { display: none; }
.coins.show-age .c-age { display: flex; }
.c-age-v { color: var(--ink); font-size: 15px; font-weight: 800; }
.c-age-v time, .c-last-v time { line-height: 26px; }
.c-last-v { color: var(--ink-2); font-size: 15px; font-weight: 700; }
/* the rank while sorted by Paid to holders: quiet's fixed-width numeral, left of the avatar on the phone */
.c-rank {
  display: none; flex: none; width: 20px; margin-right: -4px; text-align: right;
  color: var(--ink-2); font-size: 15px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.coins.show-rank .c-rank { display: block; }

/* ---------- totals (from 1080 px) ---------- */

.ex-col { display: grid; gap: 16px; align-content: start; }
.ex-sum { display: none; }

/* ---------- empty state ---------- */

.empty { display: grid; justify-items: center; gap: 12px; padding: 36px 20px 32px; text-align: center; }
.empty[hidden] { display: none; }
.empty-i {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%;
  background: var(--violet-soft); border: 1px solid var(--line); color: var(--violet-deep);
}
.empty h2 { font-size: 22px; font-weight: 850; line-height: 1.45; letter-spacing: -0.01em; max-width: 22em; text-wrap: balance; }
.empty h2 .tk { vertical-align: 2px; }
.empty p { color: var(--ink-2); max-width: 30em; text-wrap: pretty; }
.empty p .tk { line-height: 24px; }
.empty .ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin-top: 8px; }

/* ---------- narrow phones: four Pays tiles keep one line ---------- */

@media (max-width: 379px) {
  .coin .terms dd { gap: 4px; }
}

/* ---------- tablet ---------- */

@media (min-width: 720px) {
  .ex-head { gap: 10px; padding-top: 16px; padding-bottom: 22px; }
  .ex-head .lede { line-height: 1.55; }
  .ex { gap: 20px; }
  .ex-side { gap: 20px; padding: 20px 24px 24px; overflow: visible; }

  /* labels above, as on desktop; the tiles wrap, the Stock Tokens on one line and the Pays split a line break */
  .ex-q-l { position: static; width: auto; height: auto; margin: 0 0 8px; overflow: visible; clip: auto; clip-path: none; }
  .search input { min-height: 52px; }
  .search input::placeholder { color: transparent; }
  .fgroup { display: block; }
  .fgroup .lbl { margin-bottom: 8px; }
  .fscroll { margin-right: 0; }
  .fscroll::before, .fscroll::after { display: none; }
  .ftiles { flex-wrap: wrap; gap: 10px 8px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .ft-split { flex-basis: 100%; width: auto; height: 0; margin: 0; background: none; }

  .ex-hours { margin-bottom: 16px; }
  /* the count beside the sort (the count wraps in its column), the totals across the width below them */
  .ex-bar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "count sort" "tot tot";
    align-items: center; gap: 4px 24px; margin-bottom: 16px;
  }
  .ex-count { grid-area: count; }
  .sort { grid-area: sort; flex-wrap: nowrap; gap: 12px; margin-top: 0; }
  .ex-tot { grid-area: tot; }
  .seg { flex: none; }
  .seg span { min-height: 42px; padding: 0 16px; }
  /* the rank sits in the card's top-right corner, level with the name */
  .c-rank { position: absolute; top: 22px; right: 20px; width: auto; margin: 0; font-size: 16px; line-height: 1.5; }
  .empty { padding: 48px 32px 44px; }
  .empty .ctas { flex-direction: row; justify-content: center; align-items: center; width: auto; max-width: none; }
  .empty h2 { font-size: 24px; }
}

/* 720 to 759 px: two cards of 312 to 332 px; a little less padding keeps four Pays tiles on one line */
@media (min-width: 720px) and (max-width: 759px) {
  .ex .coin { padding: 20px 16px; }
  .ex .coin .terms dd { gap: 4px; }
  .ex .c-rank { right: 16px; }
}

/* ---------- desktop: the filters beside the grid ---------- */

@media (min-width: 1080px) {
  .ex-head { gap: 12px; padding-top: 16px; padding-bottom: 28px; }



  .ex { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; padding-bottom: 64px; }
  .ex-side { gap: 24px; padding: 24px 24px 26px; }

  .ex-sum { display: grid; gap: 2px; padding: 22px 24px 24px; }
  .ex-sum[hidden] { display: none; }
  .ex-sum .big { margin-top: 4px; }
  .ex-sum-r { color: var(--ink-2); font-size: 16px; font-weight: 700; }
  .ex-hours { margin-bottom: 20px; }
  .ex-bar { grid-template-areas: "count sort"; min-height: 52px; margin-bottom: 16px; }
  .ex-count { font-size: 18px; }
  .ex-tot { display: none; }
  .ex .coins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  /* with "Last paid" the card has three rows; 8 px between them (the phone card's gap) keeps two rows of cards
     inside a 1440 x 900 first screen */
  .ex .coin .terms { gap: 8px; }
  .c-rank { top: 26px; right: 24px; font-size: 17px; }
}

/* sticky only where the whole column fits the screen: 716 px at its tallest (two lines of totals), 24 px above it */
@media (min-width: 1080px) and (min-height: 760px) {
  .ex-col { position: sticky; top: 24px; }
}

/* 1080 to 1279 px: the cards are 332 to 420 px wide, so "+3 more" stays "+3" (as on the tablet), and a little less
   padding keeps four Pays tiles on one line (WETH NVDA AAPL +3 needs 245 px) */
@media (min-width: 1080px) and (max-width: 1279px) {
  .ex .more-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .ex .coin { padding: 22px 20px; }
  .ex .coin .terms dd { gap: 5px; }
  .ex .c-rank { top: 24px; right: 20px; }
  /* and the count keeps one line beside the sort */
  .ex-bar { column-gap: 16px; }
  .sort { gap: 10px; }
  .seg span { padding: 0 12px; }
}

@media (min-width: 1280px) {
  .ex { grid-template-columns: 320px minmax(0, 1fr); gap: 40px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .coin { transform: none !important; opacity: 1 !important; }
}