/* peapod layout, following the Hyperdash reference in design-refs/.
 *
 * Structure per page: topbar, heading with the coverage caveat under it, a control bar of
 * tabs and toggles, a filter row, a three-card podium, then a dense table. That order is
 * theirs; the numbers and the caveat are ours.
 */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: 1.45;
  font-feature-settings: 'tnum' 1, 'lnum' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--focus); outline-offset: 2px; }

.shell { max-width: var(--page); margin: 0 auto; padding: 0 var(--s-5); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s-4); top: var(--s-2); background: var(--raised); padding: var(--s-2); z-index: 10; }

/* ----------------------------------------------------------------- topbar */

.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.topbar-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--s-3) var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.brand {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-body); font-weight: var(--w-semi);
  color: var(--text); letter-spacing: 0.06em; text-transform: uppercase;
}
.brand i { width: 9px; height: 9px; background: var(--accent-soft); display: block; }
.topnav { display: flex; gap: var(--s-5); font-size: var(--t-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.topnav a { padding: var(--s-2) 0; border-bottom: 2px solid transparent; }
.topnav a:hover { color: var(--text-body); }
.topnav [aria-current='page'] { color: var(--text); border-bottom-color: var(--accent-soft); }

/* ------------------------------------------------------------- page head */

.page-head { padding: var(--s-7) 0 0; }
.page-head h1 {
  margin: 0 0 var(--s-3);
  font-size: var(--t-head);
  font-weight: var(--w-semi);
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
/* The coverage caveat. Sits above every control so scope is read before any ranking. */
.caveat { margin: 0; max-width: 78ch; color: var(--text-muted); font-size: var(--t-body); }
.caveat b { color: var(--text-body); font-weight: var(--w-medium); }

/* ------------------------------------------------------------ control bar */

.controls {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-4);
  margin-top: var(--s-6);
}
.tabset { display: flex; align-items: center; gap: var(--s-1); }
.tabset button {
  font: inherit; font-size: var(--t-body);
  background: transparent; color: var(--text-muted);
  border: 0; border-radius: 6px; padding: var(--s-2) var(--s-3); cursor: pointer;
}
.tabset button:hover { color: var(--text-body); }
.tabset button[aria-selected='true'] { background: var(--raised); color: var(--text); }
#presets button[aria-selected='true'] { background: var(--accent); color: var(--accent-ink); }
.tabset button[disabled] { opacity: 0.35; cursor: not-allowed; }
.tabset--segmented { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
.tabset--segmented button { padding: var(--s-1) var(--s-3); font-size: var(--t-small); }

.divider { width: 1px; height: 20px; background: var(--line); }
.spacer { flex: 1 1 auto; }

.toggle { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
.toggle button { font: inherit; font-size: var(--t-small); background: transparent; color: var(--text-muted); border: 0; border-radius: 6px; padding: var(--s-1) var(--s-3); cursor: pointer; min-width: 30px; }
.toggle button[aria-pressed='true'] { background: var(--raised); color: var(--text); }

.search { display: flex; align-items: center; gap: var(--s-2); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: var(--s-2) var(--s-3); min-width: 200px; }
.search input { font: inherit; font-size: var(--t-small); background: transparent; border: 0; color: var(--text-body); width: 100%; }
.search input::placeholder { color: var(--text-muted); }
.search span { color: var(--text-muted); }

.pills { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.pill {
  font: inherit; font-size: var(--t-small);
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text-muted); padding: var(--s-2) var(--s-3); cursor: pointer;
}
.pill:hover { color: var(--text-body); border-color: var(--line-soft); }
.pill select { font: inherit; font-size: var(--t-small); background: transparent; border: 0; color: inherit; cursor: pointer; }

/* ----------------------------------------------------------------- podium */

.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
.pcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  min-height: var(--card-h); padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
  position: relative; overflow: hidden;
}
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.pcard-addr { display: flex; align-items: center; gap: var(--s-2); color: var(--text); font-size: var(--t-num); font-weight: var(--w-medium); }
.avatar { width: 28px; height: 28px; border-radius: 6px; background: var(--raised); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-muted); font-size: var(--t-micro); }
.rankbadge { font-size: var(--t-num); font-weight: var(--w-semi); color: var(--text-muted); }
/* The accent's first referent: rank one. */
.pcard--first .rankbadge { background: var(--accent); color: var(--accent-ink);
  border-radius: 5px; padding: 2px 7px; }
.pcard--first { border-color: color-mix(in srgb, var(--accent-soft) 28%, var(--line)); }

.spark { width: 100%; height: 64px; display: block; }
.pcard-figure { margin-top: auto; }
.pcard-figure strong { display: block; font-size: var(--t-lead); font-weight: var(--w-semi); letter-spacing: -0.01em; }
.pcard-figure span { display: block; font-size: var(--t-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 2px; }
.pcard-sub { font-size: var(--t-small); color: var(--text-muted); }

/* ------------------------------------------------------------------ table */

.table-wrap { margin-top: var(--s-6); overflow-x: auto; }
table.board { width: 100%; border-collapse: collapse; }
table.board th {
  text-align: right;
  font-size: var(--t-micro); font-weight: var(--w-medium);
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 0 var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.board th:first-child, table.board th:nth-child(2) { text-align: left; }
table.board th button {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; cursor: pointer; padding: 0; display: inline-flex; gap: 4px; align-items: center;
}
table.board th button:hover { color: var(--text-body); }
table.board th [aria-hidden] { opacity: 0.5; font-size: 9px; }

table.board td {
  height: var(--row-h);
  padding: 0 var(--s-4) 0 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-num);
  text-align: right;
  white-space: nowrap;
}
table.board td:first-child, table.board td:nth-child(2) { text-align: left; }
table.board tbody tr:hover { background: var(--raised); }
table.board tbody tr.is-first td:first-child { color: var(--accent-soft); }

.rank { width: 56px; color: var(--text-muted); font-size: var(--t-small); }
.who { display: flex; align-items: center; gap: var(--s-3); }
.addr { color: var(--text-body); }
.chips { display: inline-flex; gap: var(--s-1); }
.chip { font-size: var(--t-micro); color: var(--text-muted); background: var(--raised); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }

/* Sign is carried by colour AND a glyph AND the number's own sign character. */
.up { color: var(--up); }
.down { color: var(--down); }
.mark { font-size: 9px; padding-right: 3px; }
.rate-high { color: var(--up); }
.rate-mid { color: var(--warn); }
.rate-low { color: var(--down); }

.empty { color: var(--text-muted); padding: var(--s-8) 0; text-align: center; }

/* -------------------------------------------------------------- footnote */

.footnote { margin: var(--s-7) 0 0; border-top: 1px solid var(--line); padding: var(--s-4) 0 var(--s-8); color: var(--text-muted); font-size: var(--t-small); }
.footnote p { margin: 0 0 var(--s-2); max-width: 90ch; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1000px) {
  .podium { grid-template-columns: 1fr; }
  .shell, .topbar-inner { padding-left: var(--s-4); padding-right: var(--s-4); }
  .page-head h1 { font-size: 22px; }
}

/* ------------------------------------------------------------------ modal */
/* Two columns, as the reference: a summary rail left, performance right.
 *
 * THE RAIL IS SHORTER THAN THEIRS BY DESIGN. Their left column opens with a financial
 * block — account value, account equity split three ways, unrealized PnL, leverage,
 * margin usage — none of which exists for a spot AMM without a balance engine. Those rows
 * are absent rather than dashed: a dash in a financial field reads as a measured zero.
 * What the rail gains instead is a labels block with its criteria and the out-of-scope
 * line, both of which their design has no equivalent for.
 */

.modal-backdrop {
  position: fixed; inset: 0; background: #000000cc; z-index: 20;
  display: grid; place-items: start center; padding: var(--s-5) var(--s-4); overflow: auto;
}
.modal-backdrop[hidden] { display: none !important; }
.modal {
  width: min(1180px, 100%);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
  font-size: var(--t-body);
}
.modal-head .crumb { color: var(--text-muted); }
.modal-head .who-addr { color: var(--text); font-weight: var(--w-medium); }
/* A close control has to look like one. This was a borderless glyph the same colour as
   the muted label beside it, which is why it read as decoration and people reached for
   the back button. It now has a border, a real 28px hit area, and a focus ring — and it
   is what receives focus when the dialog opens. */
.modal-close { margin-left: auto; width: 28px; height: 28px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--raised);
  border: 1px solid var(--line); border-radius: 6px; color: var(--text-body);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
.modal-close:hover { color: var(--text); border-color: var(--accent-soft); }
.modal-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.modal-body { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 0; }
.rail { border-right: 1px solid var(--line); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-5); }
.rail-id { display: flex; align-items: center; gap: var(--s-3); }
.rail-id .avatar { width: 36px; height: 36px; font-size: var(--t-small); }
.rail-id b { display: block; color: var(--text); font-size: var(--t-num); font-weight: var(--w-medium); }
.rail-id small { color: var(--text-muted); font-size: var(--t-micro); }

.rail-figure strong { display: block; font-size: 26px; font-weight: var(--w-semi); letter-spacing: -0.02em; }
.rail-figure span { display: block; margin-top: 2px; font-size: var(--t-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; }

.rail-block { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.rail-block h4 { margin: 0 0 var(--s-3); font-size: var(--t-micro); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.rail-row { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--t-small); padding: 3px 0; }
.rail-row span { color: var(--text-muted); }
.rail-row b { font-weight: var(--w-regular); color: var(--text-body); }

.label-item { border: 1px solid var(--line); border-radius: 8px; padding: var(--s-3); margin-bottom: var(--s-2); }
.label-item[data-earned='true'] { border-color: color-mix(in srgb, var(--accent-soft) 28%, var(--line)); }
.label-item b { display: block; font-size: var(--t-small); color: var(--text-body); font-weight: var(--w-medium); }
.label-item[data-earned='true'] b { color: var(--accent-soft); }
.label-item small { display: block; margin-top: 3px; font-size: var(--t-micro); color: var(--text-muted); line-height: 1.4; }
.label-item[data-earned='false'] { opacity: 0.45; }

.scope-note { font-size: var(--t-small); color: var(--text-muted); line-height: 1.5; }
.scope-note b { color: var(--text-body); font-weight: var(--w-medium); }

.pane { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: var(--s-4); }
.metric h5 { margin: 0 0 var(--s-3); font-size: var(--t-small); font-weight: var(--w-regular); color: var(--text-muted); }
.metric .big { font-size: var(--t-lead); font-weight: var(--w-semi); }
.metric .foot { margin-top: var(--s-2); font-size: var(--t-small); color: var(--text-muted); }

/* One square per round-trip: filled is a win, hollow a loss. Colour is not the only cue. */
.streak { display: flex; flex-wrap: wrap; gap: 3px; margin: var(--s-2) 0; }
.streak i { width: 10px; height: 10px; display: block; border: 1px solid var(--up); background: var(--up); }
.streak i.loss { border-color: var(--down); background: transparent; }

.bar { height: 6px; background: var(--raised); border-radius: 3px; overflow: hidden; margin-top: var(--s-3); }
.bar i { display: block; height: 100%; background: var(--up); }
.bar i.warn { background: var(--warn); }

.chartcard { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: var(--s-4); }
.chartcard-head { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-3); }
.chartcard-head h5 { margin: 0; font-size: var(--t-small); font-weight: var(--w-regular); color: var(--text-muted); }
.chartcard-head strong { font-size: var(--t-lead); font-weight: var(--w-semi); }
.chart-stage { position: relative; }
.chart { width: 100%; height: 220px; display: block; }
.tip {
  position: absolute; pointer-events: none; background: var(--raised);
  border: 1px solid var(--line); border-radius: 6px; padding: var(--s-2) var(--s-3);
  font-size: var(--t-small); white-space: nowrap; transform: translate(-50%, -120%);
}
.tip[hidden] { display: none !important; }
.tip b { display: block; color: var(--text); }
.tip span { color: var(--text-muted); font-size: var(--t-micro); }

.subtabs { display: flex; gap: var(--s-4); border-bottom: 1px solid var(--line); }
.subtabs button { font: inherit; font-size: var(--t-small); background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted); padding: var(--s-2) 0; cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; }
.subtabs button[aria-selected='true'] { color: var(--text); border-bottom-color: var(--accent-soft); }

table.mini { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
table.mini th { text-align: right; font-size: var(--t-micro); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--line); }
table.mini th:first-child { text-align: left; }
table.mini td { text-align: right; padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
table.mini td:first-child { text-align: left; }
.scroller { max-height: 300px; overflow-y: auto; }

@media (max-width: 900px) {
  .modal-body { grid-template-columns: 1fr; }
  .rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .metric-grid { grid-template-columns: 1fr; }
}

/* States that are not a ranked address. Neither is an error, and neither shows a figure
 * it does not have. */
.state-note { padding: var(--s-6) var(--s-2); max-width: 66ch; }
.state-note h3 { margin: 0 0 var(--s-3); font-size: var(--t-num); font-weight: var(--w-medium); color: var(--text); }
.state-note p { margin: 0 0 var(--s-3); color: var(--text-muted); line-height: 1.6; }
.state-note p.dim { font-size: var(--t-small); }
.muted-figure { color: var(--text-muted); font-size: var(--t-lead) !important; }

.table-note { margin: var(--s-3) 0 0; font-size: var(--t-micro); color: var(--text-muted); }

/* Token identity. The tile is always present and the image covers it, so an image that
   fails to load is removed and the initials are already underneath — no gap, no reflow,
   no broken-image glyph. */
.token { display: inline-flex; align-items: center; gap: var(--s-1); }
.token-icon { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; background: var(--raised); }
.token-tile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; letter-spacing: 0.02em; color: var(--text-muted); }
.token-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.token-ticker { font-variant-numeric: tabular-nums; }
.chip.token { padding-left: 3px; }
.chip .token-icon { width: 14px; height: 14px; }
.chip .token-tile { font-size: 7px; }

/* Copy. Quiet until wanted, but never unreachable: hover hides it only where hover
   exists, and focus always brings it back for a keyboard. */
.copy { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 0 3px;
  border: 0; background: none; color: var(--text-muted); font: inherit; font-size: var(--t-micro);
  line-height: 1; cursor: pointer; border-radius: 3px; vertical-align: baseline; }
.copy:hover { color: var(--text); background: var(--raised); }
.copy:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; color: var(--text); }
.copy.is-ok { color: var(--up); }
.copy.is-fail { color: var(--down); }
.copy-live { font-size: var(--t-micro); }
.copy-glyph { font-size: 11px; }

/* In the table the glyph appears on the row you are pointing at. The button keeps its
   space whatever its opacity, so a row does not reflow under the pointer. */
#rows .copy, .pcard .copy { opacity: 0; transition: opacity 90ms linear; }
#rows tr:hover .copy, #rows tr:focus-within .copy, #rows .copy:focus-visible,
.pcard:hover .copy, .pcard:focus-within .copy, .pcard .copy:focus-visible { opacity: 1; }
@media (hover: none) {
  #rows .copy, .pcard .copy { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .copy { transition: none; }
}

.rail-line { display: flex; align-items: center; gap: 2px; }
.rail-line .copy { opacity: 1; }

/* ─── Traders page ─────────────────────────────────────────────────────────────
   The reference's copytrading layout: hero over preset tabs over a filter row over
   a card grid. What differs is the bar across the bottom of each card, which holds
   evidence rather than a score and a purchase. */

/* Vertical rhythm, using the pitch measured off the reference: 37 / 57 / 39 / 31.
   37 above the hero, 39 from the hero to the controls, 12 between the two control rows
   because they are one pair rather than two sections, 31 before the cards, and 57 for the
   one real section break further down. The hero used to run to about 300px — half a
   1300px viewport before any content. It is now about 150. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: var(--s-5); align-items: center; padding: 37px 0 0; }
.hero h1 { font-size: clamp(21px, 2.2vw, 28px); font-weight: var(--w-semi);
  line-height: 1.15; letter-spacing: -0.02em; color: var(--text); margin: 0; }
.hero h1 em { font-style: normal; color: var(--accent-soft); }
.hero-sub { margin: var(--s-2) 0 0; color: var(--text-body);
  font-size: var(--t-body); line-height: 1.45; }
.hero .caveat { margin: 6px 0 0; max-width: 84ch; font-size: var(--t-small);
  line-height: 1.45; }

/* The deck is the page's only decoration: three real cards from the ranking, overlapped
   the way the reference stacks them. Short enough that it cannot drive the hero's height. */
.hero-deck { position: relative; height: 104px; }
.deckcard { position: absolute; width: 56%; padding: var(--s-2); border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px; }
.deckcard:nth-child(1) { left: 0; top: 18px; transform: rotate(-4deg); opacity: 0.5; }
.deckcard:nth-child(2) { left: 22%; top: 0; z-index: 2; }
.deckcard:nth-child(3) { left: 44%; top: 16px; transform: rotate(4deg); opacity: 0.5; }
.deck-addr { font-size: var(--t-micro); color: var(--text-muted); }
.deck-fig { font-size: var(--t-body); }
.deckcard .spark { width: 100%; height: 28px; }

@media (max-width: 980px) { .hero { grid-template-columns: 1fr; } .hero-deck { display: none; } }

.pill--sort select { min-width: 140px; }

.hero + .controls { margin-top: 39px; }
.controls + .pills { margin-top: var(--s-3); }
.cardgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3); margin-top: 31px; }
.pills + .table-wrap { margin-top: 31px; }
.cardgrid + .more, .table-wrap + .more { margin-top: 0; }
#footnote { margin-top: 57px; }

/* The criterion, beside the filter that uses it rather than above the cards. */
.pill--note { padding: 0; position: relative; }
.pill--note > summary { cursor: pointer; padding: 6px var(--s-3); list-style: none;
  color: var(--text-muted); }
.pill--note > summary::-webkit-details-marker { display: none; }
.pill--note > summary::after { content: ' ?'; }
.pill--note[open] > summary { color: var(--text); }
.pill--note > p { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
  width: min(46ch, 78vw); margin: 0; padding: var(--s-3);
  background: var(--raised); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text-body); font-size: var(--t-small); line-height: 1.5; }
@media (max-width: 1180px) { .cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cardgrid { grid-template-columns: 1fr; } }

.tcard { display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; }
.tcard:hover { border-color: color-mix(in srgb, var(--accent-soft) 24%, var(--line)); }
.tcard:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.tcard-head { display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-3); }
.tcard-who { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--s-1); }
.tcard-addr { display: flex; align-items: center; }
.tcard-addr b { font-weight: var(--w-medium); font-size: var(--t-body); color: var(--text); }
.tcard-toks { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.tcard-ago { font-size: var(--t-micro); color: var(--text-muted); white-space: nowrap; }

.tcard-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 52%);
  gap: var(--s-2); padding: 0 var(--s-3) var(--s-3); align-items: end; }
.tcard-figs { display: flex; flex-direction: column; }
.tcard-figs strong { font-size: var(--t-lead); font-weight: var(--w-semi); line-height: 1.2; }
.tcard-second { color: var(--text-body); margin-top: var(--s-2); }
.tcard-label { font-size: var(--t-micro); color: var(--text-muted); }
.tcard-spark { min-width: 0; }
.tcard-spark .spark { width: 100%; height: 88px; display: block; }

/* The bottom bar. Tinted by the verdict, the way the reference tints by score, but the
   tint is reporting a test result rather than a rating. */
.tcard-bar { display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line);
  background: var(--raised); margin-top: auto; }
.tcard-bar.v-above { background: var(--up-fill); }
.tcard-bar.v-below { background: var(--down-fill); }
.ev { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ev-head { display: flex; align-items: baseline; gap: var(--s-1); }
.ev-head b { font-size: var(--t-num); font-weight: var(--w-semi); color: var(--text); }
.ev-of, .ev-n { font-size: var(--t-micro); color: var(--text-muted); }
.ev-track { position: relative; height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.06); overflow: hidden; }
/* Where a coin-flipper with this many closes lands. */
.ev-band { position: absolute; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.12); }
.ev-mark { position: absolute; top: -2px; width: 2px; height: 10px; margin-left: -1px;
  background: var(--text); border-radius: 1px; }
.v-above .ev-mark { background: var(--up); }
.v-below .ev-mark { background: var(--down); }
.ev-foot { display: flex; align-items: baseline; gap: var(--s-2); }
.ev-label { font-size: var(--t-micro); color: var(--text-body); }
.v-above .ev-label { color: var(--up); }
.v-below .ev-label { color: var(--down); }
.v-text-above { color: var(--up); }
.v-text-below { color: var(--down); }
.v-text-within, .v-text-none { color: var(--text-muted); }

.ev-cta { flex: none; padding: 6px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-body);
  font: inherit; font-size: var(--t-small); }
.ev-cta:hover { color: var(--text); border-color: var(--line); background: var(--raised); }
.ev-cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.more { display: flex; justify-content: center; padding: var(--s-5) 0; }
.more button { padding: 8px 18px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text-body); font: inherit; cursor: pointer; }
.more button:hover { color: var(--text); }
.more button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Wallet */
.wallet { display: flex; align-items: center; gap: var(--s-2); margin-left: var(--s-3); }
.wallet-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--raised); color: var(--text-body); font: inherit;
  font-size: var(--t-small); cursor: pointer; white-space: nowrap; }
.wallet-btn:hover { color: var(--text); border-color: var(--accent-soft); }
.wallet-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wallet-btn[disabled] { opacity: 0.6; cursor: default; }
.wallet-addr { font-size: var(--t-small); color: var(--text-body); }
.wallet-note { font-size: var(--t-micro); color: var(--text-muted); }
.wallet-note.is-fail { color: var(--down); }
.wallet-menu { display: flex; gap: var(--s-1); }
.wallet-pick { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--raised); color: var(--text-body); font: inherit;
  font-size: var(--t-small); cursor: pointer; }
.wallet-pick:hover { color: var(--text); }