/* ============================================================
   Alpha Finance: exchange rankings (/exchanges/, /exchanges/<country>/)
   Loaded after funding.css, lsr.css and revenue.css, whose hero, stat
   tiles, cards, table, pager and opening row it reuses. Only what is
   particular to the rankings lives here: the score bar in a cell, the
   score breakdown card, the volume share and cost bars, the detail
   row's three columns and the Visit button.
   ============================================================ */

/* the hero in the terminal's treatment: headline left, a row of quiet stat
   cards right, so the rankings read as one of the dashboards */
body.xch .fnhero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 20px 48px; align-items: center; }
body.xch .fnhero-side { display: flex; flex-direction: row; align-items: stretch; gap: 8px; padding: 0; border: 0; }
body.xch .fnstat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 10px 12px; margin: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 60%, var(--panel)), var(--panel));
  border: 1px solid var(--line); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); }
body.xch .fnstat-k { margin: 0; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.35; color: var(--muted); }
body.xch .fnstat-v { margin: 9px 0 0; font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
body.xch .fnstat-s { margin-top: auto; padding-top: 7px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.03em; line-height: 1.35; color: var(--faint);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.xch .fnhero .dek { font-size: 15px; line-height: 1.55; max-width: 560px; }
.xc-table td.l { text-align: left; }
.xc-route b { font-family: var(--sans); }
@media (max-width: 1100px) {
  body.xch .fnhero-grid { grid-template-columns: minmax(0, 1fr); }
  body.xch .fnhero-side { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body.xch .fnhero-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
}

/* the top-score tile: the mark beside the name */
.xc-topv { display: flex; align-items: center; gap: 9px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xc-topv .exlogo { flex: none; width: 18px; height: 18px; border-radius: 4px; }

/* overview band: score breakdown left, volume share and countries right */
.xc-ov { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; align-items: start; }

/* an exchange's mark and name, in the volume and cost lists */
.xs-n { display: flex; align-items: center; gap: 8px; min-width: 0; }
.xs-n b { font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* share of spot trading: one hue, one bar per exchange */
.xv { list-style: none; margin: 0; padding: 4px 0; }
.xv li { display: grid; grid-template-columns: 130px minmax(0, 1fr) 52px 44px; align-items: center; column-gap: 10px; height: 27px; }
.xv li.xv-none { display: block; height: auto; padding: 10px 0; font-size: 12.5px; color: var(--muted); }
.xv .xs-n b { font-size: 12.5px; }
.xv-t { height: 8px; border-radius: 2px; background: color-mix(in srgb, var(--line) 55%, transparent); overflow: hidden; }
.xv-t i { display: block; height: 100%; min-width: 2px; border-radius: 2px; background: #3987e5; }
.xv span, .xv em { font-family: var(--mono); font-size: 11.5px; font-style: normal; font-variant-numeric: tabular-nums; text-align: right; }
.xv span { color: var(--text); }
.xv em { color: var(--muted); }

/* rankings by country */
.xc-countries { padding: 6px 10px 10px; }
.xc-countries a { display: grid; grid-template-columns: 92px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 10px 8px;
                  border-radius: 6px; color: var(--text-2); text-decoration: none; }
.xc-countries a:hover { background: var(--panel-2); color: var(--text); }
.xc-countries b { font-weight: 600; color: var(--text); }
.xc-countries span { font-size: 12.5px; line-height: 1.45; }
.xc-countries svg { width: 15px; height: 15px; color: var(--lime); }

/* the table */
.xc-table .co { min-width: 150px; }
.xd-h .xc-tag { margin-left: 10px; vertical-align: 1px; }
.xc-n { display: inline-flex; align-items: center; gap: 9px; vertical-align: middle; }
.xc-n b { font-weight: 600; color: var(--text); }
.xc-tag { display: inline-block; margin-left: 2px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 3px;
          font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
tr:first-child .xc-tag, .xc-tag.is-top { border-color: color-mix(in srgb, var(--lime) 55%, transparent); color: var(--lime); }
.xc-table td.xc-por, .xc-table td.xc-blk { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.xc-table td.xc-live.is-best { color: var(--pos-text); font-weight: 600; }
.xc-table td.xc-live small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 400; }
.xc-route b { display: block; font-weight: 500; color: var(--text); font-size: 12.5px; }
.xc-route small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.xc-yn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.xc-yn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.xc-yn.is-y { color: var(--text); }
.xc-yn.is-y::before { background: var(--pos); }
.xc-yn.is-n { color: var(--neg-text); }
.xc-yn.is-n::before { background: var(--neg); }
.frates th.xc-go, .frates td.xc-go { width: 60px; text-align: right; }
.xc-visit { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid var(--line-2, var(--line));
            border-radius: 4px; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--text); text-decoration: none; white-space: nowrap; }
.xc-visit:hover { border-color: var(--lime); color: var(--lime); }
.xc-visit svg { width: 11px; height: 11px; }
body.xch .frates tbody tr[data-id] { cursor: pointer; }
body.xch .frates tbody tr.is-open td { background: color-mix(in srgb, var(--lime) 6%, transparent); }
body.xch .frates tbody tr.is-open td:first-child { box-shadow: inset 2px 0 0 var(--lime); }

/* the opened row: score breakdown, facts, incidents */
.frates tr.xc-det td { padding: 0; text-align: left; white-space: normal; background: color-mix(in srgb, var(--lime) 3%, transparent); }
.frates tr.xc-det:hover td { background: color-mix(in srgb, var(--lime) 3%, transparent); }
.xd-wrap { position: sticky; left: 0; box-sizing: border-box; width: var(--xd-w, 100%); box-shadow: inset 2px 0 0 var(--lime); }
.xd { display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 28px;
      padding: 16px 18px 18px 46px; box-shadow: inset 2px 0 0 var(--lime); font-family: var(--sans); }
.xd-h { margin: 0 0 10px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.xb { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.xb li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 30px; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.xb-k { font-size: 12.5px; color: var(--text); }
.xb-k em { margin-left: 6px; font-family: var(--mono); font-size: 10.5px; font-style: normal; color: var(--muted); }
.xb-bar { height: 5px; border-radius: 2px; background: color-mix(in srgb, var(--line) 55%, transparent); overflow: hidden; }
.xb-bar i { display: block; height: 100%; border-radius: 2px; background: var(--lime); }
.xb li > b { font-family: var(--mono); font-size: 12px; font-weight: 600; text-align: right; color: var(--text); }
.xb li small { grid-column: 1 / -1; margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.xb-cap { margin: 12px 0 0; font-size: 12px; color: var(--neg-text); }
.xd-facts { margin: 0; display: grid; gap: 7px; font-size: 12.5px; }
.xd-facts div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; }
.xd-facts dt { color: var(--muted); }
.xd-facts dd { margin: 0; color: var(--text); line-height: 1.45; }
.xd-facts a, .xd-inc a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--lime) 45%, transparent); text-underline-offset: 2px; }
.xd-facts a:hover, .xd-inc a:hover { color: var(--lime); }
.xd-inc { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.xd-inc li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
.xd-inc time { font-family: var(--mono); font-size: 11px; color: var(--muted); padding-top: 1px; }
.xd-none { margin: 0; font-size: 12.5px; color: var(--muted); }

@media (max-width: 1100px) {
  .xc-ov { grid-template-columns: minmax(0, 1fr); }
  .xd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-left: 18px; }
  .xd-col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .xs li { grid-template-columns: 112px minmax(0, 1fr) 30px; }
  .xv li { grid-template-columns: 104px minmax(0, 1fr) 46px 38px; }
  .xd { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .xb li { grid-template-columns: 130px minmax(0, 1fr) 28px; }
  .xd-facts div { grid-template-columns: 112px minmax(0, 1fr); }
  .xc-countries a { grid-template-columns: minmax(0, 1fr) 16px; }
  .xc-countries span { grid-column: 1; }
}

/* Australia: what Bitcoin costs on each exchange right now. One bar per
   exchange, in two parts: its fee, then how far its price sits above the
   middle of the AUD market. */
.xk-ov { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.xk { list-style: none; margin: 0; padding: 4px 0; }
.xk li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 58px 72px 150px; align-items: center; column-gap: 12px; height: 30px; }
.xk li.xk-none { display: block; height: auto; padding: 10px 0 4px; font-size: 12px; color: var(--muted); }
.xk-bar { display: flex; height: 10px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--line) 45%, transparent); }
.xk-bar i { display: block; height: 100%; }
.xk-fee { background: color-mix(in srgb, var(--lime) 70%, transparent); }
.xk-gap { background: color-mix(in srgb, #3987e5 70%, transparent); border-left: 1px solid var(--panel); }
.xk li > span:not(.xs-n):not(.xk-bar) { font-family: var(--mono); font-size: 12px; font-weight: 600; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.xk li > em { font-family: var(--mono); font-size: 11.5px; font-style: normal; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.xk li > small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xk li:first-child > span:not(.xs-n):not(.xk-bar) { color: var(--pos-text); }
.xk-key { list-style: none; margin: 0; padding: 6px 0 2px; display: grid; gap: 14px; }
.xk-key li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.xk-key li i { width: 10px; height: 10px; margin-top: 4px; border-radius: 2px; }
.xk-key li b { display: block; color: var(--text); font-weight: 600; }
.xk-key .xk-mid { background: none; border: 1.5px solid var(--text-2); }
@media (max-width: 1100px) {
  .xk-ov { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .xk-ov .lsr-card-head { flex-wrap: wrap; row-gap: 10px; }
  .xk-ov .pick { width: 100%; }
  .xk-ov .pick .seg { flex: 1; }
  .xk-ov .pick .seg button { flex: 1; padding: 8px 4px; }
  .xk li { grid-template-columns: 104px minmax(0, 1fr) 52px 64px; }
  .xk li > small { display: none; }
}


/* ======================= the rankings' navigation ======================= */
body.xch .fnhero-grid .xn-wrap { grid-column: 1 / -1; margin: 18px 0 0; }
.xnav .xn-sep { flex: none; width: 1px; height: 16px; margin: 0 6px; align-self: center; background: var(--line-2); padding: 0 !important; border: 0; }
.xnav .xn-soon { color: var(--faint); cursor: default; }
.xnav .xn-soon em { margin-left: 4px; font-family: var(--mono); font-size: 9px; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }

/* ======================= the table, the centrepiece ======================= */
.xc-bar { flex-wrap: wrap; row-gap: 10px; }

.xc-table td { height: 54px; }
.xc-table th { white-space: nowrap; }
/* rank and name stay on screen while the table scrolls sideways */
.xc-table th.rk, .xc-table td.rk { position: sticky; left: 0; z-index: 2; width: 40px; min-width: 40px; background: var(--panel); }
.xc-table th:nth-child(2), .xc-table .co { position: sticky; left: 40px; z-index: 2; background: var(--panel); box-shadow: 1px 0 0 var(--line); }
body.xch .xc-table tbody tr:hover td.rk, body.xch .xc-table tbody tr:hover .co { background: var(--panel-2); }
body.xch .xc-table tbody tr.is-open td.rk, body.xch .xc-table tbody tr.is-open .co { background: color-mix(in srgb, var(--lime) 6%, var(--panel)); }
.xc-table td.rk { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.xc-table td.rk.is-top { color: var(--lime); font-weight: 600; }
.xc-table .co { min-width: 230px; }
.xc-n .exlogo { width: 22px; height: 22px; border-radius: 6px; }
.xc-n b { font-size: 13.5px; }

/* score: the house pill, then its tier in words */
.xc-sc { white-space: nowrap; }
.xc-sc .gr { min-width: 40px; font-size: 12px; padding: 4px 7px 3px; letter-spacing: 0.02em; }
.xc-tier { margin-left: 8px; font-style: normal; font-size: 12px; color: var(--text-2); }

.xc-fee { font-family: var(--mono); font-size: 12px; color: var(--text); white-space: nowrap; }
.xc-fee i { margin: 0 4px; font-style: normal; color: var(--faint); }
.xc-none { color: var(--faint); }
.xc-table td.xc-live { font-family: var(--mono); white-space: nowrap; }
.xc-table td.xc-live small { display: inline; margin-left: 4px; font-size: 10.5px; }
.xc-table td.xc-live small.up { color: var(--pos-text); }
.xc-table td.xc-live small.down { color: var(--neg-text); }

/* small facts: chips for licences, products and regions; dots for states */
.xc-chip, .xc-more { display: inline-block; margin: 0 4px 0 0; padding: 2px 6px 1px; border: 1px solid var(--line); border-radius: 3px;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-2); white-space: nowrap; vertical-align: middle; }
.xc-chip.is-prod { border-color: transparent; background: color-mix(in srgb, var(--line) 55%, transparent); color: var(--text); }
.xc-chip.is-code { color: var(--neg-text); border-color: color-mix(in srgb, var(--neg) 30%, transparent); }
.xc-more { border-style: dashed; color: var(--muted); cursor: help; }
.xc-table td.l { white-space: nowrap; }
.xc-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.xc-dot::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.xc-dot.is-ok::before { background: var(--pos); }
.xc-dot.is-warn::before { background: var(--heat); }
.xc-dot.is-bad::before { background: var(--neg); }
.xc-dot.is-quiet::before { background: var(--faint); }
.xc-dot.is-bad { color: var(--text); }
.xc-table td.xc-inc { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.xc-inc small { margin-left: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.xc-table td.xc-route { white-space: nowrap; }
.xc-route b, .xc-route small { display: inline; }
.xc-route small { margin-left: 6px; }

/* the table gets the room it needs: wider than the reading column */
.xc-table td.xc-sc { text-align: left; }
.xc-table .co { min-width: 150px; }
.xd-h .xc-tag { margin-left: 10px; vertical-align: 1px; }
body.xch .frates.xc-table td, body.xch .frates.xc-table th { padding-left: 7px; padding-right: 7px; }
.xc-table th.rv-x, .xc-table td.rv-x { width: 22px; padding-left: 0; }
.xc-table.is-au td.xc-inc { max-width: 128px; }
.xc-table.is-au td.co { min-width: 0; }
.xc-table td.xc-inc .xc-dot { display: inline; }
.xc-table td.xc-inc .xc-dot::before { display: inline-block; margin-right: 7px; vertical-align: 1px; }
.xc-table.is-au td.xc-inc { max-width: 112px; }

/* the hub's directory of every list */
.xc-countries { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; padding: 10px 16px 14px; }
.xl-h { margin: 4px 0 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.xc-countries .xl-g a, .xc-countries .xl-g .xn-soon { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 8px; margin: 0 -8px; border-radius: 5px; font-size: 13px; }
.xc-countries .xl-g a b, .xc-countries .xl-g span b { font-weight: 500; }
.xc-countries .xl-g .xn-soon { color: var(--faint); }
.xc-countries .xl-g .xn-soon b { color: var(--muted); }
.xc-countries .xl-g .xn-soon em { font-family: var(--mono); font-size: 9px; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }

/* the reviewer's credit in the feed line */
.xc-by { display: inline-flex; align-items: center; gap: 6px; }
.xc-by img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.xc-by a { color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--lime) 45%, transparent); text-underline-offset: 2px; }
.xc-by a:hover { color: var(--lime); }
body.xch .fnhero h1 { text-wrap: balance; }

/* ======================= calmer table: one readable face, fewer boxes ======================= */
body.xch .frates.xc-table td, body.xch .frates.xc-table th { font-family: var(--sans); font-variant-numeric: tabular-nums; }
body.xch .frates.xc-table th { font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
body.xch .frates.xc-table td { font-size: 13px; color: var(--text-2); height: 56px; }
.xc-table td.rk { font-family: var(--sans); font-size: 13px; }
.xc-n b { font-size: 14px; font-weight: 600; }
.xc-sc .gr { font-family: var(--sans); font-size: 12.5px; min-width: 42px; }
.xc-fee { font-family: var(--sans); font-size: 13px; color: var(--text); }
.xc-fee i { margin: 0 3px; }
.xc-table td.xc-live { font-family: var(--sans); color: var(--text); }
.xc-dot { font-size: 13px; }
.xc-lic { color: var(--text); }
.xc-lic small { margin-left: 3px; font-size: 12px; color: var(--muted); }
.xc-table td.xc-inc { max-width: 200px; }
.xc-visit { font-size: 12.5px; }
body.xch .frwrap > .fr-foot { font-family: var(--sans); font-size: 12px; line-height: 1.6; letter-spacing: 0; }
.xc-lic small { vertical-align: baseline; }

/* ======================= the opened row, calmer ======================= */
body.xch .frates tbody tr[data-id]:focus { outline: none; }
/* keyboard focus reads like hover: a soft row and the lime edge, never a box round each cell */
body.xch .frates tbody tr[data-id]:focus-visible td { background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
.frates tr.xc-det td { background: color-mix(in srgb, var(--panel-2) 55%, var(--panel)); }
.frates tr.xc-det:hover td { background: color-mix(in srgb, var(--panel-2) 55%, var(--panel)); }
.xd { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; padding: 20px 24px 22px 56px; box-shadow: inset 2px 0 0 var(--lime); }
.xd-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
.xd-h .xc-tag { margin: 0; font-family: var(--sans); font-size: 11px; letter-spacing: 0; text-transform: none; padding: 1px 7px; border-radius: 10px; }
.xb { gap: 11px; }
.xb li { grid-template-columns: 130px minmax(0, 1fr) 30px; grid-template-rows: auto; column-gap: 12px; cursor: help; }
.xb-k { font-size: 13px; color: var(--text-2); }
.xb-bar { height: 4px; }
.xb li > b { font-family: var(--sans); font-size: 13px; font-variant-numeric: tabular-nums; }
.xd-facts { gap: 9px; font-size: 13px; }
.xd-facts div { grid-template-columns: 120px minmax(0, 1fr); }
.xd-facts dd { color: var(--text); }
.xd-inc { gap: 11px; font-size: 13px; line-height: 1.5; }
.xd-inc li { grid-template-columns: 70px minmax(0, 1fr); }
.xd-inc time { font-family: var(--sans); font-size: 12.5px; padding-top: 0; }
.xd-inc a { display: inline-flex; vertical-align: -1px; margin-left: 2px; color: var(--muted); text-decoration: none; }
.xd-inc a svg { width: 12px; height: 12px; }
.xd-inc a:hover { color: var(--lime); }
.xd-more { margin: 10px 0 0 82px; font-size: 12.5px; color: var(--muted); }
.xd-none { font-size: 13px; }
body.xch .frates.xc-table td, body.xch .frates.xc-table th { padding-left: 6px; padding-right: 6px; }
.xc-table td.xc-inc { max-width: 175px; }
.xb li { grid-template-columns: 150px minmax(0, 1fr) 30px; }
body.xch .frates.xc-table tr.xc-det td { padding: 0; height: auto; }

.xd { box-shadow: none; }



/* card heads on this page in the reading face */
body.xch .xc-ov .lsr-card-head h2 small { font-family: var(--sans); font-size: 12px; letter-spacing: 0; text-transform: none; }
body.xch .xc-ov .seg button { font-family: var(--sans); font-size: 12px; letter-spacing: 0; text-transform: none; padding: 6px 12px; }



/* ======================= share of volume: columns with marks on top ======================= */
.xu { position: relative; height: 270px; margin: 14px 16px 6px 46px; }
.xu .xv-none { margin: 0; padding: 12px 0; font-size: 12.5px; color: var(--muted); }
.xu-grid { position: absolute; inset: 0; }
.xu-grid div { position: absolute; left: 0; right: 0; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.xu-grid span { position: absolute; right: 100%; margin-right: 10px; transform: translateY(-50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.xu-cols { position: absolute; inset: 0; display: flex; justify-content: space-around; gap: 6px; padding: 0 2px; }
.xu-c { position: relative; flex: 1; max-width: 52px; cursor: default; }
.xu-bar { position: absolute; left: 0; right: 0; bottom: 28px; height: calc((100% - 72px) * var(--hf, 0)); min-height: 2px; border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #199e70 30%, transparent); border-top: 2px solid #2fd69a; transition: height 0.35s ease; }
.xu-c:hover .xu-bar { background: color-mix(in srgb, #199e70 46%, transparent); }
.xu-top { position: absolute; left: 0; right: 0; bottom: calc(28px + (100% - 72px) * var(--hf, 0) + 6px); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.xu-top b { font-size: 12px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.xu-top .exlogo { width: 20px; height: 20px; border-radius: 5px; }
.xu-n { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 22px; display: flex; align-items: center; font-size: 11px; color: var(--text-2); white-space: nowrap; }
#xvp .xu-bar { background: color-mix(in srgb, #3987e5 30%, transparent); border-top-color: #5fa2f0; }
#xvp .xu-c:hover .xu-bar { background: color-mix(in srgb, #3987e5 46%, transparent); }

/* tighter: less air between the card head and the columns */
.xu { height: 244px; margin: 0 16px 4px 46px; }
.xc-ov .lsr-card-body { padding-top: 12px; padding-bottom: 10px; }
.xu { height: 272px; }
.xu-bar { height: calc((100% - 98px) * var(--hf, 0)); }
.xu-top { bottom: calc(28px + (100% - 98px) * var(--hf, 0) + 6px); gap: 3px; }
.xu-top em { margin-bottom: 3px; font-style: normal; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.xc-ov { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }

/* the nav strip and the stat labels in the reading face, like the table */
body.xch .xnav > a, body.xch .xnav > span { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; }
body.xch .xnav .soon { font-family: var(--sans); font-size: 11px; letter-spacing: 0; text-transform: none; }
body.xch .xnav .xn-soon em { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0; text-transform: none; }

/* the method table */
.xm-table td:first-child { white-space: nowrap; }
.xm-table td { vertical-align: top; line-height: 1.55; }
.xm-table th, .xm-table .num { font-family: var(--sans); font-size: 12px; letter-spacing: 0; text-transform: none; }
body.xch .crumb, body.xch .crumb a, body.xch .crumb .here, body.xch .crumb .sep { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.xb-raw { margin: 12px 0 0; font-size: 12px; color: var(--muted); }

/* flags and glyphs in the rankings' navigation */
body.xch .xnav > a, body.xch .xnav > span { display: inline-flex; align-items: center; gap: 8px; }
.xn-flag { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); flex: none; }
.xn-glyph { width: 15px; height: 15px; flex: none; color: var(--muted); }
.xnav .on .xn-glyph { color: var(--lime); }
.xnav .xn-soon .xn-flag { opacity: 0.45; filter: saturate(0.6); }
.xnav .xn-soon .xn-glyph { opacity: 0.6; }
body.xch .xnav .xn-soon em { margin-left: 0; padding: 1px 6px; border: 1px solid var(--line); border-radius: 8px; font-size: 10px; color: var(--faint); }

/* the strip slides when it is wider than the page: faded edges and arrows show there is more */
.xn-wrap { position: relative; min-width: 0; }
.xn-wrap .xnav { gap: 6px; scroll-behavior: smooth; }
body.xch .xnav > a, body.xch .xnav > span:not(.xn-sep) { padding-left: 14px; padding-right: 14px; }
.xn-wrap::before, .xn-wrap::after { content: ""; position: absolute; top: 0; bottom: 1px; width: 64px; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 1; }
.xn-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg) 30%, transparent); }
.xn-wrap::after { right: 0; background: linear-gradient(270deg, var(--bg) 30%, transparent); }
.xn-wrap.has-prev::before, .xn-wrap.has-next::after { opacity: 1; }
.xn-arr { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: -15px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--text-2); cursor: pointer; }
.xn-arr:hover { border-color: var(--lime); color: var(--lime); }
.xn-arr svg { width: 13px; height: 13px; }
.xn-arr.is-prev { left: 0; }
.xn-arr.is-next { right: 0; }
.xn-arr[hidden] { display: none; }

/* arrows: small, centred on the strip's labels, not on its underline gap */
body.xch .fnhero-grid .xn-wrap { margin-top: 22px; }
.xn-wrap .xnav { margin-top: 0; }
.xn-arr { top: 0; bottom: 3px; margin-top: auto; margin-bottom: auto; width: 22px; height: 22px; border-color: var(--line-2); background: var(--bg-2, var(--panel)); color: var(--muted); }
.xn-arr svg { width: 11px; height: 11px; }


/* ======================= where you can sign up ======================= */
body.xch .xa-card .lsr-card-head h2 small { font-family: var(--sans); font-size: 12px; letter-spacing: 0; text-transform: none; }
.xa-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: 11.5px; color: var(--muted); }
.xa-key li { display: inline-flex; align-items: center; gap: 6px; }
.xa-key i { width: 10px; height: 10px; border-radius: 3px; }
.xa-key .xa-yes i { background: color-mix(in srgb, var(--lime) 55%, transparent); }
.xa-key .xa-spot i { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lime) 60%, transparent); }
.xa-key .xa-lim i { background: color-mix(in srgb, var(--heat) 60%, transparent); }
.xa-key .xa-no i { background: color-mix(in srgb, var(--text) 12%, transparent); }
.xa-key .xa-dot i { width: 6px; height: 6px; border-radius: 50%; background: #5fa2f0; }

.xa-wrap { overflow-x: auto; margin: 0 -16px; padding: 4px 16px 0; }
.xa { width: 100%; min-width: 900px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.xa .xa-col-ex { width: 150px; }
.xa .xa-col-n { width: 84px; }
.xa th, .xa td { height: 46px; padding: 0 4px; text-align: left; white-space: nowrap; }
.xa tbody th, .xa tbody td { border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent); }
.xa thead th { height: 38px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.xa thead th span { display: inline-flex; align-items: center; gap: 7px; padding-left: 6px; }
.xa thead th:first-child span { padding-left: 0; }
.xa tbody th { font-weight: 400; padding-right: 10px; }
.xa tbody th .xc-n b { font-size: 13px; font-weight: 600; }
.xa tbody th .exlogo { width: 20px; height: 20px; border-radius: 5px; }
.xa tbody tr:hover th, .xa tbody tr:hover td { background: color-mix(in srgb, var(--text) 2.5%, transparent); }

/* each answer is a tinted badge that fills its column */
.xa td[data-reg] { cursor: default; }
.xa-c { position: relative; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; font-weight: 500;
  transition: transform 0.12s ease, box-shadow 0.12s ease; }
.xa-c svg { width: 13px; height: 13px; flex: none; }
.xa td[data-reg]:hover .xa-c { box-shadow: 0 0 0 1px currentColor; }
.xa-yes .xa-c { color: var(--lime); background: color-mix(in srgb, var(--lime) 11%, transparent); }
.xa-spot .xa-c { color: color-mix(in srgb, var(--lime) 75%, var(--text)); background: color-mix(in srgb, var(--lime) 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 22%, transparent); }
.xa-lim .xa-c { color: var(--heat); background: color-mix(in srgb, var(--heat) 11%, transparent); }
.xa-no .xa-c { color: var(--faint); background: color-mix(in srgb, var(--text) 3%, transparent); font-weight: 400; }
.xa-no .xa-c svg { opacity: 0.6; }
/* perps work differently here: a dot in the badge's corner */
.xa .has-note .xa-c::after { content: ""; position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: #5fa2f0;
  box-shadow: 0 0 0 2px var(--panel); }

/* the counts: per exchange on the right, per region along the foot */
.xa .xa-n { text-align: right; padding-right: 2px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.xa .xa-n b { font-size: 14px; font-weight: 600; color: var(--text); }
.xa thead .xa-n span { padding-left: 0; }
.xa tfoot th, .xa tfoot td { height: 44px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.xa tfoot th { font-weight: 500; }
.xa tfoot td { padding-left: 10px; }
.xa tfoot td b { font-size: 14px; font-weight: 600; color: var(--text); }

/* the column the table's "Available in" filter points at */
.xa th.is-on, .xa td.is-on { background: color-mix(in srgb, var(--lime) 5%, transparent); }
.xa thead th.is-on { color: var(--lime); border-radius: 6px 6px 0 0; }
.xa tfoot td.is-on { border-radius: 0 0 6px 6px; }

@media (max-width: 640px) {
  .xa tbody th, .xa thead th:first-child, .xa tfoot th { position: sticky; left: 0; z-index: 1; background: var(--panel); }
}
/* the paired cards stack on narrow screens (the two-column rule above would otherwise win) */
@media (max-width: 900px) {
  .xc-ov { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .xu-top em { display: none; }
}

/* ======================= richer rows: two-line names, badges, meters ======================= */
body.xch .frates.xc-table td { height: 56px; padding-top: 6px; padding-bottom: 6px; }
.xc-table td.rk { font-size: 13px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.xc-table td.rk.is-top { color: var(--lime); }
/* a lime edge on the row under the pointer, and on the open one */
.xc-table tbody tr[data-id] td.rk { box-shadow: inset 2px 0 0 transparent; transition: box-shadow 0.12s ease; }
.xc-table tbody tr[data-id]:hover td.rk, .xc-table tbody tr.is-open td.rk { box-shadow: inset 2px 0 0 var(--lime); }

.xc-table .xc-n { gap: 11px; }
.xc-table .xc-n .exlogo { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
.xc-nm { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.15; }
.xc-nm b { font-size: 14px; font-weight: 600; color: var(--text); }
.xc-nm em { font-style: normal; font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.xc-nm em.is-tag { color: color-mix(in srgb, var(--lime) 85%, var(--text)); }

/* score: one compact pill; its tier shows on hover */
.xc-sc .gr[data-tier] { cursor: default; }
.xc-sc .gr[data-tier]:hover { filter: brightness(1.2); }

/* fees: maker quiet, taker bright */
.xc-table .xc-fee i:first-child { font-style: normal; color: var(--muted); }
.xc-table .xc-fee i { font-style: normal; color: var(--faint); margin: 0 3px; }

/* live figures with a meter under them, against the column's largest */
.xc-table td.xc-live { vertical-align: middle; }
.xc-mv { display: block; font-variant-numeric: tabular-nums; color: var(--text); }
.xc-meter { display: block; width: 64px; height: 3px; margin: 6px 0 0 auto; border-radius: 2px; background: color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; }
.xc-meter b { display: block; height: 100%; border-radius: 2px; background: color-mix(in srgb, #199e70 85%, transparent); }
td[data-live="oi"] .xc-meter b { background: color-mix(in srgb, #3987e5 85%, transparent); }

/* badges: reserves, licences, incidents */
.xc-bdg { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11.5px; font-weight: 500; white-space: nowrap;
  color: var(--text-2); background: color-mix(in srgb, var(--text) 5%, transparent); }
.xc-bdg::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.xc-bdg.is-ok { color: var(--lime); background: color-mix(in srgb, var(--lime) 10%, transparent); }
.xc-bdg.is-warn { color: var(--heat); background: color-mix(in srgb, var(--heat) 11%, transparent); }
.xc-bdg.is-bad { color: var(--neg-text); background: color-mix(in srgb, var(--neg) 13%, transparent); }
.xc-bdg.is-quiet, .xc-bdg.is-none { color: var(--muted); }
.xc-bdg.is-lic { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.xc-bdg.is-lic::before, .xc-bdg.is-none::before { display: none; }
.xc-table td.xc-lic .xc-more { margin: 0 0 0 4px; padding: 1px 5px; border-radius: 4px; font-family: var(--sans); font-size: 10.5px; vertical-align: middle; }
.xc-table td.xc-inc { max-width: none; overflow: visible; }
.xc-table td.xc-inc small { display: block; margin: 4px 0 0 1px; font-family: var(--sans); font-size: 11px; color: var(--faint); }
@media (max-width: 640px) {
  .xc-nm em { display: none; }
  .xc-table .co { min-width: 0; }
  .xc-table .xc-n .exlogo { width: 24px; height: 24px; border-radius: 6px; }
}

/* ======================= the opened row: verdict, facts, record ======================= */
.xo { display: grid; gap: 20px; padding: 20px 24px 18px 56px; }
.xo-h { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--text); }

/* good for / watch out for: the answer first */
.xo-pc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.xo-pros, .xo-cons { padding: 14px 16px 12px; border-radius: 10px; }
.xo-pros { background: color-mix(in srgb, var(--lime) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 16%, transparent); }
.xo-cons { background: color-mix(in srgb, var(--heat) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--heat) 18%, transparent); }
.xo-pros .xo-h { color: var(--lime); }
.xo-cons .xo-h { color: var(--heat); }
.xo-pc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.xo-pc li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; line-height: 1.5; color: var(--text); }
.xo-pc li i { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; }
.xo-pc li svg { width: 11px; height: 11px; }
.xo-pros li i { color: var(--lime); background: color-mix(in srgb, var(--lime) 14%, transparent); }
.xo-cons li i { color: var(--heat); background: color-mix(in srgb, var(--heat) 15%, transparent); }

/* four facts in one row, the same shape each */
.xo-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.xo-strip div { padding: 2px 16px 2px 16px; border-left: 1px solid var(--line); }
.xo-strip div:first-child { padding-left: 0; border-left: 0; }
.xo-strip dt { margin: 0 0 6px; font-size: 11.5px; color: var(--muted); }
.xo-strip dd { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--text); }
.xo-strip small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; color: var(--faint); }

/* the incident record: date, kind, one line, its source */
.xo-incs { padding-top: 16px; border-top: 1px solid var(--line); }
.xo-inc { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.xo-inc li { display: grid; grid-template-columns: 70px 92px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.xo-inc time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.xo-inc .xc-bdg { justify-self: start; }
.xo-inc p { margin: 0; max-width: 820px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.xo-inc a { display: inline-flex; vertical-align: -1px; margin-left: 2px; color: var(--muted); }
.xo-inc a:hover { color: var(--lime); }
.xo-inc a svg { width: 12px; height: 12px; }
.xo-more { margin: 8px 0 0 82px; font-size: 12px; color: var(--faint); }
.xo-none { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: var(--text-2); }

/* the breakdown repeats here only where there is no hover to show it */
.xo-bd .xd-col { max-width: 520px; }
@media (hover: hover) and (pointer: fine) { .xo-bd { display: none; } }

/* who you deal with, when this was checked, and the way in */
.xo-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.xo-foot p { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; font-size: 12.5px; color: var(--text-2); }
.xo-foot em { margin-right: 6px; font-style: normal; color: var(--muted); }
.xo-visit { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: #0b0d0a; background: var(--lime); text-decoration: none; }
.xo-visit:hover { filter: brightness(1.08); }
.xo-visit svg { width: 12px; height: 12px; }

@media (max-width: 1100px) { .xo { padding-left: 18px; } }
@media (max-width: 760px) {
  .xo-pc { grid-template-columns: minmax(0, 1fr); }
  .xo-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 0; }
  .xo-strip div:nth-child(3) { padding-left: 0; border-left: 0; }
  .xo-inc li { grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; }
  .xo-inc p { grid-column: 1 / -1; }
  .xo-more { margin-left: 0; }
  .xo-foot { flex-direction: column; align-items: stretch; }
  .xo-visit { justify-content: center; }
}
.xo-pc .xo-src { display: inline-flex; vertical-align: -1px; margin-left: 3px; color: var(--faint); }
.xo-pc .xo-src:hover { color: var(--lime); }
.xo-pc .xo-src svg { width: 11px; height: 11px; }

/* ======================= calmer rows: colour marks the exceptions ======================= */
.xc-table tbody tr[data-id]:focus-visible td.rk { box-shadow: inset 2px 0 0 var(--lime); }

/* fees: one number, the taker fee; its label under the header */
.xc-table thead th small { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 400; color: var(--faint); }
.xc-table td.xc-feec { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; cursor: default; }
.xc-table th[data-k="3"], .xc-table th[data-k="4"], .xc-table td.xc-feec { width: 76px; }

/* reserves: strong proof is plain text, only weak proof keeps its colour */
body.xch .frates.xc-table td.xc-por, body.xch .frates.xc-table th[data-k="7"] { padding-left: 28px; }
.xc-table td.xc-por .xc-bdg.is-ok, .xc-table td.xc-inc .xc-bdg.is-ok { padding: 0; background: none; color: var(--text-2); font-weight: 400; }
.xc-table td.xc-por .xc-bdg.is-ok::before, .xc-table td.xc-inc .xc-bdg.is-ok::before { display: none; }

/* live figures: one quiet tint for both meters */
.xc-meter b, td[data-live="oi"] .xc-meter b { background: color-mix(in srgb, var(--text) 34%, transparent); }

/* the lead under a name: plain, so lime stays for the score */
.xc-nm em.is-tag { color: var(--text-2); }


/* ======================= hero finder: every country and exchange-type list ======================= */
.xf { position: relative; }
.xf-k { margin: 0 0 8px 2px; font-size: 12.5px; color: var(--muted); }
.xf-btn { display: grid; grid-template-columns: 42px minmax(0, 1fr) 20px; align-items: center; gap: 14px; width: 100%; padding: 14px 16px 14px 14px;
  border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; text-align: left; font: inherit; color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 70%, var(--panel)), var(--panel));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 16px 36px -24px rgba(0, 0, 0, 0.8); transition: border-color 0.15s, box-shadow 0.15s; }
.xf-btn:hover { border-color: color-mix(in srgb, var(--lime) 40%, var(--line-2)); }
.xf-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 28%, transparent); }
.xf.is-open .xf-btn { border-color: color-mix(in srgb, var(--lime) 60%, transparent); }
.xf-ic { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px;
  color: var(--lime); background: color-mix(in srgb, var(--lime) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 22%, transparent); }
.xf-ic svg { width: 21px; height: 21px; }
.xf-v { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.xf-v b { font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xf-v small { font-size: 12px; color: var(--muted); }
.xf-chev { display: flex; color: var(--muted); transition: transform 0.2s ease; }
.xf-chev svg { width: 18px; height: 18px; }
.xf.is-open .xf-chev { transform: rotate(180deg); color: var(--lime); }

.xf-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; display: flex; flex-direction: column;
  width: min(700px, calc(100vw - 32px)); max-height: min(560px, 72vh); overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.02); animation: xf-in 0.16s ease-out; }
.xf-panel[hidden] { display: none; }
@keyframes xf-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.xf-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); }
.xf-search { flex: 1 1 260px; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px;
  background: color-mix(in srgb, var(--panel-2) 60%, var(--panel)); color: var(--muted); }
.xf-search:focus-within { border-color: color-mix(in srgb, var(--lime) 45%, var(--line)); }
.xf-search svg { width: 15px; height: 15px; flex: none; }
.xf-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; }
.xf-search input::placeholder { color: var(--faint); }
.xf-tabs button { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; text-transform: none; padding: 7px 12px; }
.xf-tabs button[aria-selected="true"] { background: var(--lime); color: #0b0d0a; }
.xf-tabs em { margin-left: 4px; font-style: normal; opacity: 0.6; }
.xf.is-open .xf-panel.is-search .xf-tabs { opacity: 0.4; pointer-events: none; }
.xf-body { flex: 1; min-height: 0; overflow: auto; padding: 6px 12px 12px; }
.xf-pane[hidden] { display: none; }
.is-search .xf-pane::before { display: block; margin: 10px 4px 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.is-search .xf-pane[data-p="c"]::before { content: "Countries and regions"; }
.is-search .xf-pane[data-p="t"]::before { content: "Exchange types"; }

/* countries: regions in columns, a flag and a name per row */
.xf-cs { columns: 3 190px; column-gap: 14px; }
.xf-g { break-inside: avoid; padding-top: 8px; }
.xf-g[hidden] { display: none; }
.xf-gh { margin: 0 0 4px 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.xf-g ul, .xf-types { list-style: none; margin: 0; padding: 0; }
.xf-g li[hidden], .xf-types li[hidden] { display: none; }
.xf-g a { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 4px 8px; border-radius: 7px; font-size: 13px; color: var(--text-2); text-decoration: none; }
.xf-g a span { display: flex; flex-direction: column; line-height: 1.25; }
.xf-g a small { font-size: 11px; color: var(--faint); }
.xf-g a:hover, .xf-g a:focus-visible { outline: none; color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.xf-g a:hover .xn-flag { box-shadow: 0 0 0 1px color-mix(in srgb, var(--lime) 55%, transparent); }
.xf-g .xn-flag { width: 20px; height: 15px; border-radius: 3px; }

/* exchange types: a card per list */
.xf-types { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding-top: 10px; }
.xf-types a { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; text-decoration: none; color: var(--text); transition: border-color 0.15s, background 0.15s; }
.xf-types a:hover, .xf-types a:focus-visible { outline: none; border-color: color-mix(in srgb, var(--lime) 40%, var(--line)); background: color-mix(in srgb, var(--lime) 4%, transparent); }
.xf-types i { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; color: var(--lime);
  background: color-mix(in srgb, var(--lime) 9%, transparent); }
.xf-types svg { width: 17px; height: 17px; }
.xf-types span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xf-types b { font-size: 13.5px; font-weight: 600; }
.xf-types small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xf-close { display: none; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
  background: none; color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.xf-none { margin: 0; padding: 28px 8px; text-align: center; font-size: 13px; color: var(--muted); }
.xf-none[hidden] { display: none; }
.xf-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.xf-foot a { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); text-decoration: none; }
.xf-foot a:hover { color: var(--lime); }
.xf-foot a svg { width: 11px; height: 11px; }

@media (max-width: 1100px) {
  body.xch .fnhero-grid { grid-template-columns: minmax(0, 1fr); }
  .xf { max-width: 520px; }
  .xf-panel { left: 0; right: auto; }
}
@media (max-width: 640px) {
  .xf { max-width: none; }
  .xf-panel { position: fixed; top: 12px; left: 12px; right: 12px; bottom: 12px; z-index: 1000; width: auto; max-height: none; }
  .xf-close { display: inline-flex; order: 3; margin-left: auto; }
  /* the sheet covers the page: above the sticky header, with the page held still */
  html.xf-open, html.xf-open body { overflow: hidden; }
  html.xf-open body.xch .fnhero { z-index: 5000; }
  .xf-cs { columns: 1; }
  .xf-types { grid-template-columns: minmax(0, 1fr); }
  .xf-foot span { display: none; }
}
/* the finder's panel drops over the rankings, so the hero may not clip it */
body.xch .fnhero { overflow: visible; z-index: 5; }

/* the finder's control: one line, input height */
.xf-btn { grid-template-columns: 18px minmax(0, 1fr) 16px; gap: 10px; height: 44px; padding: 0 14px; border-radius: 10px; }
.xf-ic { width: 18px; height: 18px; border-radius: 0; background: none; box-shadow: none; color: var(--muted); transition: color 0.15s; }
.xf-ic svg { width: 18px; height: 18px; }
.xf-btn:hover .xf-ic, .xf.is-open .xf-ic { color: var(--lime); }
.xf-v b { font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.xf-chev svg { width: 16px; height: 16px; }
@media (min-width: 1101px) { .xf { padding-top: 26px; } }

/* even columns: reserves and licences sized to what they hold, the spare width shared out,
   and the Visit button inset from the right edge as far as the rank number is from the left */
body.xch .frates.xc-table th[data-k="7"], body.xch .frates.xc-table td.xc-por { width: 120px; }
body.xch .frates.xc-table th[data-k="8"], body.xch .frates.xc-table td.xc-lic { width: 110px; }
.xc-table td.xc-por small { display: block; margin: 4px 0 0 1px; font-size: 11px; color: var(--faint); }
body.xch .frates.xc-table th.xc-go, body.xch .frates.xc-table td.xc-go { width: 80px; padding-right: 20px; }

/* badge-and-date stacks sit tight so rows stay 56px */
.xc-table td.xc-inc small, .xc-table td.xc-por small { margin-top: 2px; line-height: 14px; }

/* guide infographics: one at the foot of each section, the article column's width */
.prose .xfig { margin: 26px 0 8px; }
.prose .xfig img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }

/* Visit: a raised neutral button with a lime arrow at rest; it fills lime when its row
   is hovered or opened, so only the row in play carries the call to action */
body.xch .xc-table .xc-visit { height: 30px; gap: 6px; padding: 0 10px 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text);
  border: 1px solid var(--line-2, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 7%, var(--panel)) 0%, color-mix(in srgb, var(--text) 2%, var(--panel)) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent), 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
body.xch .xc-table .xc-visit svg { width: 12px; height: 12px; color: var(--lime); transition: transform .15s, color .15s; }
body.xch .xc-table tbody tr[data-id]:hover .xc-visit, body.xch .xc-table tbody tr.is-open .xc-visit, body.xch .xc-table .xc-visit:focus-visible {
  color: #0b0d0a; background: var(--lime); border-color: var(--lime);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 10px color-mix(in srgb, var(--lime) 28%, transparent); }
body.xch .xc-table tbody tr[data-id]:hover .xc-visit svg, body.xch .xc-table tbody tr.is-open .xc-visit svg, body.xch .xc-table .xc-visit:focus-visible svg { color: #0b0d0a; }
body.xch .xc-table .xc-visit:hover svg { transform: translate(1.5px, -1.5px); }
body.xch .xc-table .xc-visit:focus-visible { outline: none; }

/* ======================= the filter strip, in the house dialect =======================
   label + control pairs (.pick), mono capitals, one 30px height, lime for what is on */
.xc-bar { gap: 12px 26px; padding: 14px 16px; }
.xc-bar .fr-search { height: 30px; }
.xc-bar .fr-search input { width: 180px; padding: 0; }
.xc-bar .seg { height: 30px; }
.xc-bar .seg button { display: inline-flex; align-items: center; padding: 0 11px; }
.xc-bar .xc-need button[aria-pressed="true"] { color: var(--lime); background: color-mix(in srgb, var(--lime) 12%, transparent); }
.xc-bar .xc-need button[aria-pressed="true"]::before { content: ""; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--lime); }

/* Available in: a house listbox over the hidden select, with flags and how many take sign-ups */
.xw { position: relative; }
.xw-btn { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 9px 0 10px; min-width: 176px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2); color: var(--text); cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; transition: border-color .13s; }
.xw-btn:hover, .xw-btn[aria-expanded="true"], .xw-btn:focus-visible { border-color: var(--lime); outline: none; }
.xw-btn.is-set { color: var(--lime); border-color: color-mix(in srgb, var(--lime) 55%, transparent); }
.xw-v { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.xw-v img, .xw-menu img { width: 16px; height: 12px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,0.14); }
.xw-ic { width: 14px; height: 14px; color: var(--muted); }
.xw-car { width: 12px; height: 12px; margin-left: auto; color: var(--muted); transition: transform .15s; }
.xw-btn[aria-expanded="true"] .xw-car { transform: rotate(180deg); }
.xw-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 264px; margin: 0; padding: 5px; list-style: none;
  border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
.xw-menu li { display: grid; grid-template-columns: 16px 1fr auto 14px; align-items: center; column-gap: 10px; padding: 8px 9px; border-radius: 4px;
  font-size: 13px; color: var(--text-2); cursor: pointer; }
.xw-menu li:hover, .xw-menu li.is-at { background: var(--panel-2); color: var(--text); }
.xw-menu li small { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--faint); font-variant-numeric: tabular-nums; }
.xw-menu li svg { width: 14px; height: 14px; color: var(--lime); visibility: hidden; }
.xw-menu li[aria-selected="true"] { color: var(--lime); }
.xw-menu li[aria-selected="true"] svg { visibility: visible; }
.xw-menu li.is-any { border-bottom: 1px solid var(--line); border-radius: 4px 4px 0 0; margin-bottom: 4px; padding-bottom: 10px; }
@media (max-width: 640px) {
  .xc-bar { gap: 10px 14px; }
  .xc-bar .pick { flex-wrap: wrap; }
  .xw-btn { min-width: 150px; }
  .xw-menu { left: auto; right: 0; width: min(264px, calc(100vw - 48px)); }
}
.xc-bar { gap: 12px 20px; }
.xc-bar .pick { gap: 10px; }
.xc-bar .pick-l { font-size: 9.5px; color: var(--muted); }
.xc-bar .seg button { font-size: 10.5px; color: var(--text-2); }
.xc-bar .seg button[aria-pressed="true"] { color: #0a0b0d; }
.xc-bar .xc-need button[aria-pressed="true"] { color: var(--lime); }
.xc-bar .fr-search input { width: 160px; font-size: 11.5px; }
.xc-bar .fr-count { white-space: nowrap; font-size: 10.5px; color: var(--muted); }

/* the strip in Inter, not mono capitals: same shapes, one font, one 30px height;
   the search box shares the dropdown's border, fill and corner */
.xc-bar .pick-l, .xc-bar .seg button, .xw-btn, .xw-menu li small, .xc-bar .fr-count, .xc-bar .fr-search input {
  font-family: var(--sans); letter-spacing: 0; text-transform: none; }
.xc-bar .pick-l { font-size: 12px; color: var(--muted); }
.xc-bar .seg { border-color: var(--line); background: var(--bg-2); }
.xc-bar .seg button { font-size: 12.5px; padding: 0 12px; }
.xw-btn { font-size: 12.5px; min-width: 168px; }
.xw-menu li small { font-size: 11.5px; }
.xc-bar .fr-count { font-size: 12px; }
.xc-bar .fr-search { height: 30px; padding: 0 10px; gap: 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2); transition: border-color .13s; }
.xc-bar .fr-search:hover, .xc-bar .fr-search:focus-within { border-color: var(--lime); }
.xc-bar .fr-search svg { width: 14px; height: 14px; color: var(--muted); }
.xc-bar .fr-search input { width: 160px; height: 100%; font-size: 12.5px; color: var(--text); }
.xc-bar .fr-search input::placeholder { color: var(--muted); }
.xc-bar .fr-search input::-webkit-search-cancel-button { filter: invert(0.6); }

/* the hero finder in the filter strip's language: flat dark fill, thin border, 4px corners,
   lime border when hovered or open, Inter throughout; its panel matches the region menu */
.xf-k { font-size: 12px; }
.xf-btn { height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2); box-shadow: none; }
.xf-btn:hover, .xf.is-open .xf-btn { border-color: var(--lime); }
.xf-btn:focus-visible { border-color: var(--lime); box-shadow: none; }
.xf-v b { font-size: 13.5px; font-weight: 500; color: var(--text); }
.xf-chev { color: var(--muted); }
.xf.is-open .xf-chev { color: var(--muted); }
.xf-panel { border-radius: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
.xf-top { padding: 10px; gap: 8px; }
.xf-search { height: 30px; padding: 0 10px; gap: 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2); color: var(--muted); }
.xf-search:focus-within { border-color: var(--lime); }
.xf-search svg { width: 14px; height: 14px; }
.xf-search input { font-size: 12.5px; }
.xf-search input::placeholder { color: var(--muted); }
.xf-tabs.seg { height: 30px; border-color: var(--line); border-radius: 4px; background: var(--bg-2); }
.xf-tabs button { display: inline-flex; align-items: center; padding: 0 12px; font-size: 12.5px; color: var(--text-2); }
.xf-tabs button[aria-selected="true"] { background: var(--lime); color: #0a0b0d; }
.xf-body { padding: 4px 10px 10px; }
.xf-g a { border-radius: 4px; }
.xf-g a:hover, .xf-g a:focus-visible { background: var(--panel-2); }
.xf-g a:hover .xn-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.xf-types a { border-radius: 6px; background: var(--bg-2); }
.xf-types a:hover, .xf-types a:focus-visible { border-color: var(--lime); background: var(--bg-2); }
.xf-types i { border-radius: 4px; }
.xf-close { height: 30px; border-radius: 4px; background: var(--bg-2); }
.xf-foot { padding: 9px 12px; }

/* the exchange name is the row's header cell (th scope="row") for crawlers and screen
   readers; it keeps the look of the other cells */
body.xch .frates.xc-table tbody th.co { height: 56px; padding: 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle;
  font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-2); white-space: nowrap; cursor: inherit; }
body.xch .frates.xc-table tbody tr:last-child th.co { border-bottom: 0; }
body.xch .frates.xc-table tbody tr:hover th.co { background: var(--panel-2); }

/* "Best Crypto Exchanges Ranked by Trust" stays on one line on a laptop */
body.xch .fnhero-inner { max-width: 760px; }
/* the table's screen-reader text is positioned absolutely: keep it inside the scroll box,
   or a phone page grows as wide as the table */
body.xch .fr-scroll { position: relative; }

/* the rankings' evidence line, beside the section heading: counts in white, the rest quiet,
   the method link last in lime */
.xc-head { align-items: baseline; flex-wrap: wrap; gap: 6px 24px; }
.xc-ev { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 0; margin: 0 0 0 auto; font-size: 12.5px; color: var(--muted); }
.xc-ev span { white-space: nowrap; }
.xc-ev b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.xc-ev a { color: var(--lime); text-decoration: none; white-space: nowrap; }
.xc-ev a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .xc-ev { justify-content: flex-start; margin-left: 0; gap: 4px 14px; }
}

/* sources in the opened row: licences link to their register entry (house subtle link:
   text colour + soft lime underline), other facts carry the small source arrow */
.xo-strip .xo-lic, .xo-foot .xo-fee { color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--lime) 45%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .13s, text-decoration-color .13s; }
.xo-strip .xo-lic:hover, .xo-foot .xo-fee:hover { color: var(--lime); text-decoration-color: var(--lime); }
.xo-foot .xo-fee { color: var(--text-2); }
.xo-strip .xo-src { display: inline-flex; vertical-align: -1px; margin-left: 4px; color: var(--faint); }
.xo-strip .xo-src svg { width: 11px; height: 11px; }
.xo-strip .xo-src:hover { color: var(--lime); }

/* the evidence line: each count opens the evidence it counts */
.xc-ev a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.xc-ev a + a::before { content: "\00b7"; margin: 0 9px; color: var(--faint); }
.xc-ev a:hover { color: var(--text-2); text-decoration: none; }
.xc-ev a:hover b { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--lime) 60%, transparent); text-underline-offset: 3px; }
.xc-ev a.is-more { color: var(--lime); }
.xc-ev a.is-more:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .xc-ev a + a::before { content: none; } .xc-ev { gap: 4px 14px; } }

/* the registers table in the method */
.xe-regs td a { color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--lime) 45%, transparent); text-underline-offset: 3px; }
.xe-regs td a:hover { color: var(--lime); }
.xe-regs td:nth-child(2) { color: var(--text-2); white-space: nowrap; }
/* evidence targets land below the sticky nav */
body.xch #evidence, body.xch #registers, body.xch #incidents, body.xch #method { scroll-margin-top: 96px; }

/* the maintainer line on phones: the update date wraps as one piece */
.xc-upd { white-space: nowrap; }
@media (max-width: 640px) { body.xch .fnhero .feed > .xc-by::before { content: none; } }
body.xch .frwrap > .fr-foot a { color: var(--text-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--lime) 45%, transparent); text-underline-offset: 3px; }
body.xch .frwrap > .fr-foot a:hover { color: var(--lime); }
/* the separator dot sits inside each link: as an inline block it is left out of the hover underline */
.xc-ev a + a::before { display: inline-block; text-decoration: none; }

/* card subtitles sit under the heading, outside the h2 (search reads the heading alone) */
body.xch .lsr-card-t { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
body.xch .lsr-card-t h2 { margin: 0; }
body.xch .lsr-card-sub { margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }