:root {
  /* One width for every page. The header, the intro, the body and the
     footer all read it, so nothing can drift out of line with the rest
     again — which is what happened when each page picked its own. */
  --page: 1320px;
  --gutter: 32px;
  --bg: #0c0e11;
  --sur: #15181d;
  --line: #292d34;
  --fg: #f5f5f6;
  --dim: #a2a8b2;
  --brand: #ff792c;
  --up: #70d5ad;
  --down: #ee928e;
  /* Reserved for rewards: the marker, the hero figure, the paid-out.
     Nothing else spends it, so amber on screen always means money that
     reached holders. */
  --amber: #ffb900;
}
* {
  box-sizing: border-box;
}
/* The `hidden` attribute is how every script on this site shows and hides
   things, and the browser's own rule for it is `display: none` at the very
   bottom of the cascade — so any author rule that sets `display` on the
   same element wins and the element stays on screen. That had already
   happened twice: `#impact-row` is a `.quote` (`display: flex`), so the
   Sell tab kept showing the Buy quote's price impact, and `#launch-steps`
   is a `.launch-steps` (`display: flex`), so the launch ladder held its
   margin before a launch started. `scripts/check-hidden.mjs` is the gate
   that stops a third. */
[hidden] {
  display: none !important;
}
html {
  background: var(--bg);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--fg);
  font:
    16px/1.55 Manrope,
    system-ui,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
button,
input {
  font: inherit;
}
button,
a,
input,
summary {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  letter-spacing: -0.04em;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 10px;
  top: 10px;
  z-index: 100;
  background: var(--brand);
  padding: 10px;
}
.bar {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.bar-in {
  max-width: var(--page);
  margin: auto;
  padding: 0 32px;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 34px;
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 25px;
  letter-spacing: -0.8px;
  font-weight: 800;
  white-space: nowrap;
}
/* The lockup George drew: white "Clash", brand-orange "Pad", the rocket
   hexagon beside it. site/assets/logo.png is that mark cut out of its
   black card, so it sits on any of the site's surfaces. */
.mark-word {
  /* One flex item, so the flex gap cannot open a space inside the name.
     It read "Clash Pad" for as long as the two halves were separate
     children of the flex row. */
  white-space: nowrap;
}
.mark .mark-word > span,
.mark > span:not(.brand-icon):not(.mark-word) {
  color: var(--brand);
}
.brand-logo {
  display: block;
  width: 34px;
  height: 34px;
}
.brand-icon {
  display: inline-grid;
  place-items: center;
  width: 29px;
  height: 31px;
  background: var(--brand);
  color: #17110c;
  border-radius: 8px;
  letter-spacing: 0;
  margin-right: 5px;
}
/* The header's own navigation. "How it works" used to be reachable only
   from the footer, which is the last place a first visitor looks for an
   explanation of a product they have not understood yet, and "Wallet" was
   a second button beside "Connect" — two controls for one idea. */
.bar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.bar-nav a {
  padding: 9px 13px;
  border-radius: 8px;
  color: var(--dim);
  font-weight: 700;
  font-size: 15px;
}
.bar-nav a:hover {
  color: var(--fg);
  background: #191c21;
}
.bar-nav a.is-on {
  color: var(--fg);
}
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  flex: 1;
  background: #191c21;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 13px;
}
.search svg {
  width: 16px;
  fill: none;
  stroke: var(--dim);
  stroke-width: 1.5;
}
.search input {
  width: 100%;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--fg);
  outline: none;
}
.search:focus-within {
  border-color: var(--brand);
}
.bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.btn {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 800;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}
.btn-line {
  background: #20242a;
  color: var(--fg);
}
.btn-fill {
  background: var(--brand);
  border-color: var(--brand);
  color: #20150e;
}
.btn:hover {
  filter: brightness(1.12);
}
/* Preview and live copy. The document starts at data-live="false" and
   api.js flips it only when the backend actually served coins, so the
   cautious version is what paints first and the claim of being live is
   never made before it is true. */
[data-when="live"] {
  display: none;
}
[data-live="true"] [data-when="live"] {
  display: inline;
}
[data-live="true"] [data-when="preview"] {
  display: none;
}
.live-tag {
  color: #86efac;
  border-color: #2f6b45;
}
.preview-tag {
  font-size: 14px;
  color: #c4c8cf;
  border: 1px solid #454b56;
  border-radius: 4px;
  padding: 3px 7px;
}
.intro {
  max-width: var(--page);
  margin: auto;
  padding: 30px 32px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.intro h1 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
}
.intro p {
  color: var(--dim);
  margin-top: 8px;
}
.network {
  color: var(--dim);
  font-size: 13.5px;
}
.app {
  max-width: var(--page);
  padding: 0 32px 36px;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px;
  align-items: start;
}
.feed {
  min-width: 0;
}
/* The wallet page has no rail: everything on it is about one wallet, and a
   sidebar of other people's coins next to your own payout history reads as
   an advert rather than as information. */
.app-one {
  /* The wallet page is one stack of panels, and two of the three are
     tables of holdings and payouts. It used to cap the column at 940px
     inside a 1320px page, which left a third of the page empty to the
     right of every row and read as a layout fault rather than a choice.
     The panels set their own reading widths for prose. */
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--page);
  display: grid;
  gap: 20px;
}
.app-one .pane-p,
.app-one .pane-note,
.app-one .panel-note {
  max-width: 68ch;
}
/* The label/value rows on the page a visitor sees before connecting are
   three short sentences, not a table of holdings. Stretched across the
   whole page they read as a row with its two halves pulled apart. */
.app-one .kv-wide {
  max-width: 940px;
}
.coin-art {
  width: 66px;
  height: 66px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.board-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.board-title h2 {
  font-size: 20px;
}
.board-title > span {
  font-size: 13px;
  color: var(--dim);
}
.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.chips {
  display: flex;
  gap: 4px;
}
/* The board's search and its fee select, together on the right of the
   filter row. The search used to be in the header, which put the control
   that filters this grid further from it than the sort tabs are. */
.filter-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}
.search-board {
  max-width: 280px;
  padding: 7px 12px;
  flex: 0 1 280px;
}
/* What the ranking could not place, under the tabs. */
.board-note {
  margin: -8px 0 16px;
  color: var(--dim);
  font-size: 13.5px;
  line-height: 1.55;
}
.chip {
  background: transparent;
  border: 1px solid transparent;
  color: var(--dim);
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 800;
  white-space: nowrap;
}
.chip.is-on {
  background: #f0f1f3;
  color: #181a1e;
}
.chip:hover:not(.is-on) {
  background: #20242a;
  color: white;
}
.toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dim);
  white-space: nowrap;
  cursor: pointer;
}
.toggle select {
  background: #191c21;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  padding: 8px 10px;
  outline: none;
}
.toggle select:focus {
  border-color: var(--brand);
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
}
/* The grid's last cell, always. A young board ends mid-row — four coins
   in three columns leaves an orphan and a rectangle of nothing — so the
   row closes with a full-width invitation instead of a hole. */
.grid-cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  border: 1px dashed #3a414b;
  border-radius: 12px;
  color: var(--dim);
  font-weight: 700;
}
.grid-cta:hover {
  color: var(--fg);
  border-color: var(--brand);
}
.grid-cta b {
  color: var(--brand);
  font-size: 18px;
  line-height: 1;
}
.coin {
  font: inherit;
  text-align: left;
  color: inherit;
  background: var(--sur);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  min-width: 0;
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.15s,
    background 0.15s;
}
/* The card's own artwork, ghosted behind the figures. Same file as the
   thumbnail, so no extra fetch; hidden from readers, it carries no
   information the thumbnail does not. */
.coin-ghost {
  position: absolute;
  right: -26px;
  bottom: -26px;
  width: 128px;
  height: 128px;
  opacity: 0.12;
  pointer-events: none;
}
.coin-wrap {
  position: relative;
  min-width: 0;
}
.coin-has-ca .chead {
  padding-right: 38px;
}
/* Beside the card's link rather than inside it: a button in an anchor is
   invalid markup. Absolutely placed over the corner the head row leaves
   it. */
.copy-ca {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--dim);
  background: #20242a;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
}
.copy-ca:hover {
  color: #fff;
  border-color: #626977;
}
.copy-ca.is-copied {
  color: var(--up);
  border-color: var(--up);
}
.copy-ca.is-failed {
  color: var(--down);
  border-color: var(--down);
}
.spark {
  display: block;
  width: 100%;
  height: 30px;
  margin: 2px 0 12px;
}
.spark path {
  stroke: var(--dim);
}
.spark.up path {
  stroke: var(--up);
}
.spark.down path {
  stroke: var(--down);
}
.coin:hover {
  background: #1b1f25;
  border-color: #626977;
}
.chead {
  display: flex;
  align-items: center;
  gap: 11px;
}
.cid {
  min-width: 0;
  flex: 1;
}
.sym {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.nm {
  display: block;
  font-size: 14.5px;
  color: var(--dim);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.card-blurb {
  color: var(--dim);
  font-size: 14.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 8px 0 0;
}
.card-network {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: #e4ae83;
  margin: 8px 0;
}
.coin-age {
  display: block;
  color: #8f98a5;
  font-size: 14px;
  margin-top: 4px;
}
.chg {
  align-self: start;
  margin-top: 2px;
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
.chg small {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--dim);
  margin-top: 3px;
}
.up {
  color: var(--up);
}
.down {
  color: var(--down);
}
.flat {
  color: var(--dim);
}
.card-metrics {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 14px;
}
.card-metrics > span:last-child {
  text-align: right;
}
.card-metrics small {
  display: block;
  color: var(--dim);
  font-size: 13px;
  margin-bottom: 3px;
}
.card-metrics b {
  font-size: 16px;
  font-weight: 800;
}
.prog {
  display: flex;
  gap: 10px;
  align-items: center;
}
.prog-t {
  height: 3px;
  background: #323840;
  border-radius: 4px;
  flex: 1;
  overflow: hidden;
}
.prog-f {
  display: block;
  height: 100%;
}
.prog-l {
  color: var(--dim);
  font-size: 13px;
}
.card-foot {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 13px;
  color: #aeb5c0;
  margin-top: 10px;
}
.fee-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--up);
  font-weight: 700;
  background: rgba(112, 213, 173, 0.12);
  border-radius: 999px;
  padding: 2px 8px 2px 7px;
}
.fee-mark i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.fee-mark.fee-5 {
  color: var(--brand);
  background: rgba(255, 121, 44, 0.12);
}
.empty {
  padding: 30px;
  color: var(--dim);
}
.rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  background: #111419;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.panel-head h2 {
  font-size: 19px;
}
.panel-head p {
  font-size: 14px;
  color: var(--dim);
}
.clock {
  color: #c4cad4;
  font-size: 13px;
  background: #242830;
  padding: 4px 7px;
  border-radius: 4px;
}
.clash-sub {
  font-size: 13px;
  color: var(--dim);
}
.matchup {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 5px 16px;
}
.matchup > div {
  text-align: center;
}
.matchup img {
  width: 74px;
  height: 74px;
  border-radius: 16px;
  display: block;
  margin: auto auto 9px;
  transform: rotate(-7deg);
}
.matchup > div:last-child img {
  transform: rotate(7deg);
}
.matchup b {
  display: block;
  font-size: 14px;
}
.matchup span {
  display: block;
  font-size: 13px;
  color: var(--dim);
}
.matchup em {
  font-style: italic;
  font-size: 19px;
  font-weight: 800;
  color: #76808e;
}
.pot {
  text-align: center;
  margin-bottom: 17px;
}
.pot > b {
  display: block;
  font-size: 32px;
  letter-spacing: -1px;
}
.pot small {
  font-size: 15px;
  color: var(--dim);
}
.pot > span {
  color: var(--dim);
  font-size: 13px;
}
.split-meter {
  display: flex;
  gap: 3px;
  height: 6px;
  border-radius: 8px;
  overflow: hidden;
}
.split-meter span:first-child {
  width: 61%;
  background: #e29d68;
}
.split-meter span:last-child {
  width: 39%;
  background: #78a9e5;
}
.split-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-top: 7px;
  color: #c0c8d4;
}
.panel-note {
  font-size: 13px;
  line-height: 1.7;
  color: var(--dim);
  margin-top: 16px;
}
.panel-note b {
  color: var(--fg);
}
.panel-btns {
  display: flex;
  gap: 8px;
  margin-top: 15px;
}
.btn-sm {
  flex: 1;
  padding: 9px;
  font-size: 13px;
}
/* The How page's index of itself. A list of links and nothing else: it
   sits above the rail's other panels and is the only thing on that page
   that needs to stay reachable while the reader is halfway down. */
.panel-toc .toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.panel-toc .toc-placeholder {
  height: 35px;
  padding: 12px 8px;
  box-sizing: border-box;
}
.panel-toc .toc-placeholder::before {
  content: "";
  display: block;
  width: 74%;
  height: 10px;
  border-radius: 4px;
  background: #30353d;
}
.panel-toc .toc-placeholder:nth-child(3n)::before {
  width: 55%;
}
.panel-toc .toc-list a {
  display: block;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--dim);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  line-height: 1.35;
}
.panel-toc .toc-list a:hover,
.panel-toc .toc-list a:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg);
}

.panel-you {
  background: #191b20;
}
.reward-symbol {
  color: var(--amber);
  font-size: 25px;
}
.panel-you h2 {
  font-size: 18px;
  margin: 8px 0;
}
.panel-you p {
  color: var(--dim);
  font-size: 13.5px;
  line-height: 1.7;
  margin-bottom: 17px;
}
.panel-you .btn {
  font-size: 13px;
}
.dimlbl {
  font-size: 14.5px;
  color: var(--dim);
}

/* A figure the pad does not have. Styled to read as an absence rather
   than as a value, so it cannot be mistaken for a measurement of zero. */
.dim {
  color: var(--dim);
  font-weight: 500;
}
/* `.tbl td` is `white-space: nowrap`, which is right for a wallet, a size
   and a timestamp and wrong for the sentence a table says when it has no
   rows: "This coin's pool has not been walked for trades yet…" is wider
   than the panel, so the table overflowed and `.tbl-wrap` grew a
   horizontal scroll bar under an otherwise empty page. It wraps. */
.tbl td.dim {
  font-size: 14.5px;
  line-height: 1.6;
  /* No left padding, so the sentence starts on the same vertical as the
     "Side" heading above it rather than ten pixels inside it. */
  padding: 14px 10px 14px 0;
  white-space: normal;
}
/* A cell that spans the table is also its row's last child, so
   `.tbl td:last-child { text-align: right }` right-aligned the sentence and
   left a ragged gap down the left of an otherwise empty panel. Same
   specificity as that rule and later in the file would be enough; the
   pseudo-class makes it independent of where either rule sits. */
.tbl td.dim:last-child {
  text-align: left;
  padding-right: 10px;
}

/* ---- the hero card's parts ----
   Everything about the coin itself lives in one card, .chero, on the same
   grid as the panels under it: the network ribbon along the top edge, the
   picture and name, the description, the creator's links as chips, and a
   founder strip as the card's bottom band. Each of these used to be its
   own centred box at its own width. */
.net-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: -16px -20px 14px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  color: var(--dim);
  font-size: 13px;
  line-height: 1.6;
}
.net-note .net-short {
  display: none;
}
.net-note b {
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.coin-socials {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.coin-socials b {
  color: var(--dim);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 4px;
}
.coin-socials a {
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--coin) 45%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--coin) 10%, transparent);
  color: var(--fg);
  font-size: 13px;
  font-weight: 750;
}
.coin-socials a:hover {
  border-color: var(--coin);
}
.coin-socials p {
  margin: 0;
  color: var(--dim);
  font-size: 12px;
}
.creator-block {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 14px -20px -16px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 14px 14px;
  background: #0f1216;
}
.creator-block > div {
  min-width: 0;
  padding: 11px 20px 12px;
  border-left: 1px solid var(--line);
}
.creator-block > div:first-child {
  border-left: 0;
}
.creator-block span {
  display: block;
  margin-bottom: 3px;
  color: var(--dim);
  font-size: 12.5px;
}
.creator-block b,
.creator-block a {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.creator-block a {
  color: var(--coin);
}
.creator-block a:hover {
  text-decoration: underline;
}
.creator-block b.dim {
  font-weight: 600;
}
.creator-block small {
  display: block;
  margin-top: 3px;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.5;
}
.tag-founder {
  display: inline-block;
  margin-left: 5px;
  color: #ffc087;
  font-size: 11.5px;
  font-weight: 800;
}
@media (max-width: 1080px) {
  .creator-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .creator-block > div:nth-child(3) {
    border-left: 0;
  }
  .creator-block > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 760px) {
  .net-note {
    margin: -16px -16px 12px;
    padding: 8px 16px;
    gap: 2px 8px;
  }
  .net-note .net-long {
    display: none;
  }
  .net-note .net-short {
    display: inline;
  }
  .coin-socials {
    margin-top: 12px;
    gap: 6px;
  }
  .coin-socials b {
    flex-basis: 100%;
    margin: 0 0 2px;
  }
  .coin-socials p {
    flex-basis: 100%;
    margin-top: 2px;
  }
  /* Two by two, with the explanatory notes dropped: four stacked cells
     with a sentence under each pushed the chart a screen down. */
  .creator-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 12px -16px -16px;
  }
  .creator-block > div {
    padding: 11px 14px 12px;
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
  }
  .creator-block > div:nth-child(odd) {
    border-left: 0;
  }
  .creator-block > div:nth-child(-n + 2) {
    border-top: 0;
  }
  .creator-block b,
  .creator-block a {
    font-size: 14px;
  }
  .creator-block small.note {
    display: none;
  }
}
.trades li {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #24282e;
  font-size: 13.5px;
}
.trades li:last-child {
  border: 0;
}
.trades b {
  min-width: 48px;
}
.amt {
  margin-left: auto;
  color: var(--dim);
}
/* The live feed carries an age as well as a size, so the size stops being
   the thing pushed to the right and the age takes that place. */
.trades .when {
  color: var(--dim);
  min-width: 42px;
  text-align: right;
}
.trades .amt {
  margin-left: auto;
}
/* The pad's own fee-harvest sells, told apart from a trader's. Neutral
   rather than red: it is a sell, but it is the step that turns a coin's
   transfer fee into the SOL its holders are paid, and colouring it like a
   holder heading for the exit was the single most misleading thing on the
   board. */
.act.pad {
  color: var(--brand);
}
.trades li.is-pad {
  background: rgba(255, 121, 44, 0.05);
}
.tag-pad {
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid rgba(255, 121, 44, 0.45);
  border-radius: 4px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
/* The control under a truncated table. */
.tbl-more {
  margin-top: 12px;
  text-align: center;
}
/* The FAQ block. Its rules are page furniture, so they span the same box
   every other page-level container does and its text starts on the same
   32px inset as the header, the board and the footer. It used to be
   1416px with no padding, which put its left edge 48px outside the header
   above it on any screen wide enough to show the difference. */
.learn {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
summary {
  cursor: pointer;
  padding: 22px 0;
  font-weight: 800;
  font-size: 14px;
}
summary > span {
  font-size: 13px;
  font-weight: 500;
  color: var(--dim);
  float: right;
}
.learn-in {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 10px 0 30px;
}
.learn-col h3 {
  font-size: 15px;
  margin-bottom: 8px;
}
.learn-col p {
  font-size: 13.5px;
  color: var(--dim);
  line-height: 1.8;
}
.mini {
  max-width: 260px;
  margin-top: 12px;
}
.mini li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  color: var(--dim);
}
.mini b {
  color: var(--fg);
}
.learn-link {
  display: block;
  color: var(--brand);
  margin-top: 12px;
}
.foot-in {
  max-width: var(--page);
  margin: auto;
  padding: 26px 32px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  color: var(--dim);
  font-size: 14px;
}
.foot-nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.foot-nav a {
  white-space: nowrap;
}
.foot-warn {
  margin-left: auto;
}
dialog {
  color: var(--fg);
  background: #191d24;
  border: 1px solid #464e5b;
  border-radius: 16px;
  padding: 30px;
  max-width: 440px;
  width: calc(100% - 32px);
}
.wallet-picker h2 {
  margin: 0 0 8px;
  font-size: 20px;
}
.wallet-picker p {
  color: var(--dim);
}
.wallet-picker .btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: left;
}
dialog::backdrop {
  background: #000b;
  backdrop-filter: blur(4px);
}
.dialog-close {
  float: right;
  padding: 5px 10px;
}
dialog h2 {
  font-size: 26px;
  margin: 25px 0 15px;
}
dialog p {
  color: #bbc2cc;
  line-height: 1.8;
  margin-bottom: 25px;
}
.dialog-done {
  width: 100%;
}
@media (min-width: 1081px) and (max-width: 1320px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app {
    gap: 20px;
  }
  .chead .coin-art {
    width: 58px;
    height: 58px;
  }
}
@media (max-width: 1080px) {
  .app {
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 18px;
  }
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bar-in {
    gap: 20px;
  }
  .preview-tag {
    display: inline;
  }
  .filters {
    flex-wrap: wrap;
  }
  .coin {
    padding: 12px;
  }
  .coin-art {
    width: 48px;
    height: 48px;
  }
  .panel {
    padding: 16px;
  }
  .network {
    display: none;
  }
  .chg {
    font-size: 13px;
  }
  .nm {
    max-width: 90px;
  }
}
@media (max-width: 760px) {
  .bar-in {
    padding: 15px 18px;
    flex-wrap: wrap;
    gap: 13px;
  }
  .mark {
    font-size: 22px;
    gap: 7px;
  }
  .brand-logo {
    width: 28px;
    height: 28px;
  }
  .bar-right {
    gap: 7px;
  }
  .bar-right .btn {
    font-size: 13px;
    padding: 8px 10px;
  }
  /* The network tag pushed the buttons onto a second row, but on a pad
     that is not on mainnet it is the only above-the-fold word saying what
     the numbers are worth, so it stays: smaller, tighter, still there. */
  html[data-live="true"] .bar-right .preview-tag {
    font-size: 11.5px;
    padding: 2px 5px;
    letter-spacing: 0;
  }
  .bar-nav {
    order: 2;
    flex-basis: 100%;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .bar-nav a {
    padding: 7px 9px;
    font-size: 13.5px;
  }
  .search {
    order: 3;
    max-width: none;
    flex-basis: 100%;
    height: 42px;
  }
  /* Only the board has coins to filter. On the other pages this box
     navigates here, which the "Board" link beside it already does, so at
     phone width it is a third header row buying nothing. */
  .search:not(.search-board) {
    display: none;
  }
  /* The board's search is not in the header, so the header rule above is
     not for it. Left as it was, `order: 3` put the box after the fee
     select inside `.filter-right` — the one place the markup is deliberate
     about which comes first — and `flex-basis: 100%` pushed the select off
     the row. It keeps its markup order and takes the width the select
     leaves. */
  .search-board {
    order: 0;
    flex: 1 1 auto;
    max-width: none;
  }
  .intro {
    padding: 23px 18px;
  }
  .intro h1 {
    font-size: 27px;
  }
  .intro p {
    font-size: 13px;
    max-width: 310px;
  }
  .app {
    padding: 0 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .feed {
    width: 100%;
    display: contents;
  }
  .rail {
    display: contents;
  }
  /* Below the coins, not above them. The daily Clash is not running, and
     putting a feature that is off at the top of a phone screen meant the
     first thing a visitor hit on the board was the one thing they could
     not use. */
  .panel-clash {
    order: 8;
    width: 100%;
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
  }
  .panel-clash .panel-head,
  .clash-sub {
    grid-column: 1/-1;
  }
  .panel-head {
    margin-bottom: 3px;
  }
  .panel-head h2 {
    font-size: 16px;
  }
  .matchup {
    grid-column: 1;
    grid-row: 3/5;
    padding: 17px 0 10px;
    gap: 8px;
  }
  .matchup img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  .matchup b {
    font-size: 13px;
  }
  .matchup span {
    display: none;
  }
  .matchup em {
    font-size: 14.5px;
  }
  .pot {
    grid-column: 2;
    grid-row: 3;
    text-align: right;
    margin: 8px 0 5px;
  }
  .pot > b {
    font-size: 27px;
  }
  .split-meter {
    grid-column: 2;
    grid-row: 4;
    align-self: end;
    margin-bottom: 8px;
  }
  .split-label {
    grid-column: 2;
    grid-row: 5;
    font-size: 10.5px;
    margin: 0;
  }
  /* Scoped to the Clash card. This used to hide every `.panel-note` on the
     site at phone width, which was written for the daily-Clash card's
     cramped grid but also stripped the coin page's curve and rewards
     explanations, and the only sentence on the "No such coin" page that
     said what had gone wrong. */
  .panel-clash .panel-note {
    display: none;
  }
  .panel-btns {
    grid-column: 1/-1;
    margin-top: 12px;
  }
  .btn-sm {
    min-height: 38px;
  }
  .board-title {
    order: 2;
    width: 100%;
    margin: 0;
  }
  .filters {
    order: 3;
    width: 100%;
    margin-top: -12px;
    margin-bottom: -5px;
    gap: 10px;
  }
  .chips {
    width: 100%;
    flex-wrap: wrap;
    gap: 4px;
  }
  .chip {
    font-size: 13.5px;
    padding: 8px 11px;
  }
  .toggle {
    font-size: 13px;
    min-height: 24px;
  }
  .grid {
    order: 4;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .coin {
    padding: 14px;
  }
  .coin-art {
    width: 58px;
    height: 58px;
  }
  .chead {
    gap: 12px;
  }
  .sym {
    font-size: 15px;
  }
  .nm {
    max-width: none;
    font-size: 13px;
  }
  /* A phone card drops the age. It used to drop the line the age sits on,
     which took the thumbs-up count with it — the one figure on the card
     that somebody spent pCLASH to put there. The line stays and loses its
     top margin, so a coin with no likes still takes up no room. */
  .coin-age {
    display: block;
    margin-top: 0;
  }
  .coin-when {
    display: none;
  }
  .card-likes {
    display: inline-block;
    margin-top: 4px;
  }
  .card-likes::before {
    content: none;
  }
  .chg {
    font-size: 14px;
    margin-left: auto;
  }
  .card-metrics {
    margin: 12px 0 8px;
  }
  .card-metrics > span {
    display: flex;
    align-items: baseline;
    gap: 7px;
  }
  .card-metrics small {
    font-size: 13px;
  }
  .card-metrics b {
    font-size: 14px;
  }
  .card-foot {
    margin-top: 6px;
  }
  .empty {
    order: 4;
  }
  .panel-you {
    order: 5;
    width: 100%;
  }
  /* By id, not by position: this used to match the rail's last panel,
     so moving the daily Clash below the activity feed silently promoted
     the feed above the board on phones. */
  #activity-panel {
    order: 6;
    width: 100%;
  }
  .learn {
    margin: 0 18px;
  }
  .learn-in {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  summary {
    font-size: 14.5px;
  }
  summary > span {
    display: none;
  }
  .foot-in {
    padding: 22px 18px;
    gap: 16px;
  }
  .foot-warn {
    margin: 0;
  }
}
/* ============================================================
   Shared additions
   ============================================================ */
.coin {
  display: block;
}
.wide-panel {
  padding: 22px;
}
.crumb {
  display: inline-block;
  color: var(--dim);
  font-size: 13.5px;
  font-weight: 700;
  padding: 22px 0 0;
}
.crumb:hover {
  color: var(--fg);
}
/* On the coin page the crumb is a small pill sitting on the hero card's
   left edge, so it reads as the card's back control rather than as a
   stray line above it. */
#coin > .crumb {
  display: flex;
  width: fit-content;
  align-items: center;
  margin-top: 18px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #111419;
  margin-left: max(32px, calc((100% - var(--page)) / 2 + 32px));
}
#coin > .crumb:hover {
  border-color: #3a404a;
}
.chero-skeleton {
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  font-size: 14.5px;
}
.chero-skeleton p {
  margin: 0;
}
.pill {
  font-size: 13px;
  font-weight: 700;
  color: #c8ced8;
  background: #23272e;
  border-radius: 4px;
  padding: 4px 8px;
}
.pill-live {
  background: rgba(112, 213, 173, 0.14);
  color: var(--up);
}
.pill-hot {
  background: rgba(255, 121, 44, 0.16);
  color: var(--brand);
}
.pill-done {
  background: rgba(255, 121, 44, 0.14);
  color: var(--brand);
}
.kv li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #22262c;
  color: var(--dim);
  font-size: 13.5px;
}
.kv li:last-child {
  border: 0;
}
.kv b {
  color: var(--fg);
  font-weight: 800;
  text-align: right;
}
/* The launch summary reads as a receipt: every value in mono, so the
   figures line up the way they do on the thing being signed. */
#summary b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  font-weight: 700;
}
.hot {
  color: var(--brand);
}

/* ============================================================
   Coin page
   ============================================================ */
.coin-app {
  grid-template-columns: minmax(0, 1fr) 340px;
  padding-top: 4px;
}
.coin-app .feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.coin-app .rail {
  position: sticky;
  top: 20px;
}
#coin.coin-loading {
  min-height: 100vh;
}
#coin.coin-loading:empty::before {
  content: "Reading coin…";
  display: block;
  max-width: var(--page);
  margin: auto;
  padding: 28px 32px;
  color: var(--dim);
  font-size: 13.5px;
}
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
#coin > .gate-banner {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 32px;
}
/* The "no such coin" and "cannot reach the pad" cards are direct children
   of #coin, which is as wide as the window. Without a width of their own
   they ran edge to edge, with their text 24px from the browser frame,
   while every other thing on the page sat inside the page width. */
#coin > .panel {
  width: calc(100% - 64px);
  max-width: calc(var(--page) - 64px);
  margin: 12px auto 28px;
}
/* `.btn-sm` fills its row, which is right in the narrow rail panels it
   was written for and wrong across a card this wide: two buttons became
   two 600px slabs. */
#coin > .panel .panel-btns .btn {
  flex: 0 0 auto;
  padding-inline: 20px;
}
/* The hero card. Its width is the grid's, so its edges line up with the
   chart on the left and the trade panel on the right; the coin's accent
   washes in from the top-left corner and nowhere else. */
/* Condensed on 18 Sep 2026. The card carried an 84px picture, a 34px
   heading, a 30px change figure and 20px of padding, and then a blurb, a
   row of chips, a sentence about the chips and a four-cell founder strip —
   so the block that says what the coin is was taller than the chart that
   says what it is doing. Every size below came down one step; nothing was
   removed except three sub-lines that restated the cell above them. */
#coin > .chero {
  width: calc(100% - 64px);
  max-width: calc(var(--page) - 64px);
  margin: 10px auto 16px;
  padding: 16px 20px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #111419;
  overflow: hidden;
}
.chero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 120% at 0% 0%,
    color-mix(in srgb, var(--coin) 16%, transparent),
    transparent 70%
  );
  pointer-events: none;
}
.chero > * {
  position: relative;
}
.chero-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.chero-art {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  flex-shrink: 0;
  position: relative;
}
.chero-id {
  min-width: 0;
  position: relative;
}
.chero-id h1 {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.05;
}
.chero-id p {
  color: var(--dim);
  font-size: 14.5px;
  margin-top: 2px;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.tag {
  font-size: 12.5px;
  font-weight: 700;
  color: #c2c8d2;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
}
/* What the founder holds, beside the coin's name. It was a line under the
   founder strip's holding cell, which is where a reader looks last. */
.tag-share {
  color: #ffc087;
  border-color: rgba(255, 192, 135, 0.4);
}
.tag-r {
  color: var(--up);
  border-color: rgba(112, 213, 173, 0.4);
}
.tag-g {
  color: var(--brand);
  border-color: rgba(255, 121, 44, 0.45);
}
.chero-num {
  margin-left: auto;
  text-align: right;
  position: relative;
}
.chero-num b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.chero-num span {
  color: var(--dim);
  font-size: 12.5px;
}
.blurb {
  color: var(--dim);
  font-size: 14px;
  line-height: 1.65;
  max-width: 680px;
  margin: 12px 0 0;
}
.gate-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.gate-banner > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-left: 2px solid rgba(255, 121, 44, 0.4);
  padding-left: 16px;
}
.gate-banner b {
  font-size: 14px;
}
.gate-banner span {
  color: var(--dim);
  font-size: 13px;
  line-height: 1.7;
  max-width: 640px;
}
.gate-clock {
  font-size: 34px;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: -0.04em;
  min-width: 76px;
}
.gate-banner.is-open .gate-clock {
  color: var(--up);
}
.chart-panel {
  padding-bottom: 10px;
}
.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ranges {
  display: flex;
  gap: 3px;
}
.range {
  background: transparent;
  border: 0;
  color: var(--dim);
  font-size: 13px;
  font-weight: 800;
  padding: 6px 11px;
  border-radius: 8px;
}
.range:hover:not(.is-on) {
  background: #20242a;
  color: #fff;
}
.range.is-on {
  background: #f0f1f3;
  color: #181a1e;
}
.chart {
  display: block;
  width: 100%;
  height: 240px;
}
.grid-line {
  stroke: #22262c;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* The chart's axes, in HTML over the SVG. The line draws in the left 88%
   of the viewBox and the price labels sit in the gutter to its right;
   both are positioned by percentage, which maps linearly onto the
   stretched SVG. 11px mono is the smallest type on the site, kept for
   the one place micro-labels are the convention rather than a habit. */
.chart-wrap {
  position: relative;
}
.chart-y {
  position: absolute;
  left: 89%;
  transform: translateY(-50%);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--dim);
  white-space: nowrap;
}
.chart-note {
  position: absolute;
  left: 0;
  bottom: 6px;
  font-size: 13px;
  color: var(--dim);
}
.chart-head h2 {
  font-size: 17px;
}
/* The empty frame: the grid with no line in it and the reason centred
   over it, so a coin with nothing to chart still gets a chart-shaped
   panel rather than a paragraph where one should be. */
.chart-blank .chart {
  opacity: 0.7;
}
.chart-blank-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12% 0 8%;
  text-align: center;
}
.chart-blank-note .panel-note {
  max-width: 420px;
  margin: 0;
}
.chart-blank-note b {
  color: var(--fg);
}
.chart-x {
  display: flex;
  justify-content: space-between;
  padding: 6px 12% 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--dim);
}
.stat-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.stat-strip div {
  background: #111419;
  padding: 15px 16px;
}
.stat-strip small {
  display: block;
  color: var(--dim);
  font-size: 14.5px;
  margin-bottom: 5px;
}
.stat-strip b {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.curve-big {
  height: 10px;
  background: #23272e;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 6px;
}
.curve-big span {
  display: block;
  height: 100%;
  border-radius: 8px;
}
.curve-marks {
  display: flex;
  justify-content: space-between;
  color: var(--dim);
  font-size: 13px;
  margin-top: 7px;
}
.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}
.tab {
  background: transparent;
  border: 0;
  color: var(--dim);
  font-size: 13.5px;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 8px;
}
.tab:hover:not(.is-on) {
  background: #20242a;
  color: #fff;
}
.tab.is-on {
  background: #20242a;
  color: var(--fg);
}
.tabs .dimlbl {
  margin-left: auto;
}
.tbl-wrap {
  overflow-x: auto;
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tbl th {
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: var(--dim);
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid #1e2228;
  white-space: nowrap;
}
.tbl tr:last-child td {
  border: 0;
}
.tbl td:first-child {
  font-weight: 800;
}
.tbl .who,
.tbl .when,
.tbl .tierc {
  color: var(--dim);
}
.tbl th:last-child,
.tbl td:last-child {
  text-align: right;
  padding-right: 0;
}
.panel-trade {
  background: #15181d;
}
.tt {
  display: flex;
  gap: 3px;
  background: #0f1216;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 16px;
}
.tt-b {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--dim);
  font-weight: 800;
  font-size: 13.5px;
  padding: 9px;
  border-radius: 8px;
}
.tt-b.is-on {
  background: #262b33;
  color: var(--fg);
}
.panel-trade.is-sell .tt-b.is-on {
  color: var(--down);
}
.amount small,
.field small {
  display: block;
  color: var(--dim);
  font-size: 13px;
  margin-bottom: 6px;
}
.amount > span,
.suffix {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f1216;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.amount input,
.suffix input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--fg);
  outline: none;
  font-size: 19px;
  font-weight: 800;
}
.amount > span:focus-within,
.suffix:focus-within {
  border-color: var(--brand);
}
.amount b,
.suffix b {
  color: var(--dim);
  font-size: 13.5px;
}
.presets {
  display: flex;
  gap: 6px;
  margin: 10px 0 16px;
}
.preset {
  flex: 1;
  background: #1c2026;
  border: 1px solid var(--line);
  color: var(--dim);
  border-radius: 8px;
  padding: 7px;
  font-size: 13px;
  font-weight: 800;
}
.preset:hover {
  color: var(--fg);
  border-color: #626977;
}
.quote {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: var(--dim);
  padding: 7px 0;
}
.quote b {
  color: var(--fg);
}
/* Max slippage is a choice, not a reading, so its row holds four buttons
   where the other rows hold a figure. Sized to sit on the same baseline as
   those figures: the rows are read as a column and a taller one in the
   middle of it breaks the column. */
.quote-slip {
  align-items: center;
  padding: 4px 0;
}
/* "Max slippage" stays on one line. Between 761 and 1080 px the rail is
   280 px wide, which leaves the row about 240 px — a few short of the
   label plus four pills — and the label is the half that wraps. Two lines
   of label beside one line of buttons is a row half again as tall as every
   other row in the panel, which reads as a mistake rather than as a
   control. The pills give up the width instead, below. */
.quote-slip > span:first-child {
  white-space: nowrap;
}
.slip-pick {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.slip {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.slip:hover {
  color: var(--fg);
  border-color: #3a4048;
}
.slip.is-on {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--fg);
}
.slip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
/* The narrow rail. Measured, not guessed: at 900 px the row was 51 px
   against 36 px for every other quote row, and this brings it back to 37.
   Applied from 1080 down and not below 760, because under 760 the panel
   is the full page again and there is room to spare. */
@media (max-width: 1080px) and (min-width: 761px) {
  .slip-pick {
    gap: 3px;
  }
  .slip {
    padding: 4px 6px;
    font-size: 12px;
  }
}
/* The sentence that tells the two charges apart. Deliberately below the
   button rather than above it: it is there for the reader who wondered
   what slippage was, and a paragraph between the numbers and the button
   would push the button off a phone screen. */
.trade-fine {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 12px;
  line-height: 1.6;
}
.trade-go {
  width: 100%;
  margin-top: 12px;
  padding: 13px;
}
.trade-note {
  color: var(--dim);
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
  min-height: 2.4em;
}
/* The panel talks back: a refused sell, a wallet that cancelled, a trade
   that landed. Colour rather than a dialog, because none of these should
   take the page away from someone mid-trade. */
.trade-note.is-warn {
  color: var(--down);
}
.trade-note.is-good {
  color: var(--up);
}

/* A connected wallet reads as its own address, so the button stops being a
   call to action and starts being a status. */
.btn.is-connected {
  color: var(--fg);
  border-color: #626977;
  font-variant-numeric: tabular-nums;
}

#cp-toasts {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 60;
  pointer-events: none;
  width: min(420px, calc(100vw - 32px));
}
.toast {
  background: var(--sur);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--fg);
  box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.toast.is-warn {
  border-color: var(--down);
}
.toast.is-going {
  opacity: 0;
  transform: translateY(6px);
}
@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}
.panel-reward {
  background: #16171c;
}
.reward-hero {
  padding: 14px 0 16px;
}
.reward-hero b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--amber);
}
.reward-hero b.dim {
  color: var(--dim);
}
.reward-hero small {
  font-size: 15px;
  color: var(--dim);
}
.reward-hero span {
  color: var(--dim);
  font-size: 13px;
}
.mint {
  margin-top: 14px;
}
.mint small {
  display: block;
  color: var(--dim);
  font-size: 13px;
  margin-bottom: 6px;
}
.mint > span {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f1216;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
}
.mint code {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: #c6ccd6;
  overflow: hidden;
}
.copy {
  background: #23272e;
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 800;
}

/* ============================================================
   Create flow
   ============================================================ */
.stepper {
  max-width: var(--page);
  margin: 0 auto 24px;
  padding: 0 32px;
}
.stepper ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.step {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--dim);
  font-weight: 800;
  font-size: 14px;
  text-align: left;
}
.step i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-style: normal;
  font-size: 13px;
  flex-shrink: 0;
}
.step.is-done i {
  background: #23272e;
  color: var(--fg);
  border-color: #3a3f48;
}
.step.is-on {
  color: var(--fg);
}
.step.is-on i {
  background: var(--brand);
  border-color: var(--brand);
  color: #20150e;
}
.step-bar {
  display: block;
  height: 2px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.step-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  transition: width 0.25s;
}
.create-app {
  grid-template-columns: minmax(0, 1fr) 320px;
}
.pane-h {
  font-size: 22px;
  font-weight: 800;
}
.pane-p {
  color: var(--dim);
  font-size: 14px;
  line-height: 1.75;
  margin-top: 8px;
  max-width: 560px;
}
.pane > .field,
.pane > .field-row,
.pane > .picks,
.pane > .kv,
.pane > .callout,
.pane > .review,
.pane > .cost,
.pane > .ack,
.pane > .done-grid {
  margin-top: 20px;
}
.field-row {
  display: flex;
  gap: 12px;
}
/* keep form fields to a readable measure rather than the full panel width */
.pane > .field,
.pane > .field-row,
.pane > .ack,
.pane-p {
  max-width: 660px;
}
.field {
  display: block;
  flex: 1;
  min-width: 0;
}
.field-sm {
  max-width: 150px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: #0f1216;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  color: var(--fg);
  outline: none;
  font: inherit;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand);
}
/* The artwork upload.

   The native file input is taken out of the flow rather than hidden with
   `display: none`, which would take it out of the tab order and off a
   screen reader's radar with it. The label beside it is the visible
   control and is wired to it by `for`, so a click, a tap and a keyboard
   both land on the same input. */
.art-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.art-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.art-upload input[type="file"]:focus-visible + label {
  border-color: var(--brand);
  color: var(--fg);
}
.art-upload label {
  cursor: pointer;
  flex: none;
}
.art-note {
  color: var(--dim);
  font-size: 13px;
  line-height: 1.45;
  flex: 1;
  min-width: 180px;
}
.art-note.is-warn {
  color: var(--down);
}
.art-note.is-good {
  color: var(--up);
}
.upload-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 75px;
  padding: 12px;
  border: 1px dashed #555e6a;
  border-radius: 12px;
  color: #c8cdd5;
  font-size: 14.5px;
  font-weight: 700;
}
.upload-preview img {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  object-fit: cover;
}
.coin-art-empty {
  display: grid;
  place-content: center;
  background: #282e34;
  border: 1px dashed #5f6770;
  color: #c2c8d2;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
}
.create-app .optional-socials {
  max-width: none;
}

/* What is wrong with step one, said under it. Never the only signal: the
   launch button is disabled with the same sentences on its title. */
.field-error {
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid rgba(238, 146, 142, 0.4);
  border-radius: 8px;
  background: rgba(238, 146, 142, 0.08);
  color: var(--down);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  max-width: 660px;
}

/* A range the coin did not trade in. Occupies the chart's own height so
   the panel does not jump when a reader moves between ranges. */
.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  text-align: center;
  margin: 0;
}

.field .suffix {
  padding: 4px 13px 4px 4px;
}
.field .suffix input {
  border: 0;
  background: none;
  font-size: 15px;
}
.picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.picks-2 {
  grid-template-columns: repeat(2, 1fr);
}
.pick {
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
  background: #15181d;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  color: inherit;
  font: inherit;
}
.pick:hover {
  border-color: #626977;
}
.pick.is-on {
  border-color: var(--brand);
  background: #1a1713;
}
.pick-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.pick-top b {
  font-size: 14px;
}
#typepick .pick-top b {
  font-size: 26px;
  letter-spacing: -0.04em;
}
.pick-top em {
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
  color: var(--dim);
}
.pick.is-on .pick-top em {
  color: var(--brand);
}
.pick-body {
  color: var(--dim);
  font-size: 13.5px;
  line-height: 1.65;
}
.pick-foot {
  color: #7e8794;
  font-size: 12px;
  margin-top: auto;
  padding-top: 4px;
}
.callout {
  background: #14171c;
  border: 1px solid var(--line);
  border-left: 2px solid var(--brand);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--dim);
  font-size: 13.5px;
  line-height: 1.75;
}
.callout b {
  color: var(--fg);
}
.create-app .fee-examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.fee-example {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: #1b1f24;
  border: 1px solid #3b4149;
  border-radius: 10px;
}
.fee-example.is-on {
  border-color: var(--brand);
  background: #292118;
}
.fee-example b {
  color: #ffc086;
  font-size: 14.5px;
}
.fee-example span {
  font-size: 17px;
  font-weight: 800;
}
.fee-example small {
  color: #b6bec8;
  font-size: 13px;
  line-height: 1.45;
}
#paycallout {
  margin-top: 11px;
  font-size: 14.5px;
  line-height: 1.65;
}
#paycallout a {
  color: #ffc086;
  font-weight: 800;
}
.create-app .launch-fee-note {
  color: #d0d3d8;
  font-size: 14px;
  line-height: 1.65;
}
.create-app #step3 .field small {
  color: var(--fg);
  font-size: 15px;
  font-weight: 800;
}
.create-app #buy-note {
  max-width: 660px;
  margin-top: 12px;
  padding: 13px 15px;
  background: #1e2328;
  border-radius: 9px;
  color: #d0d4db;
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 690px) {
  .create-app .fee-examples {
    grid-template-columns: 1fr;
  }
}
.kv-wide li {
  font-size: 14px;
}
.review li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #22262c;
  color: var(--dim);
  font-size: 14px;
}
.review li:last-child {
  border: 0;
}
.review b {
  color: var(--fg);
  font-weight: 800;
  text-align: right;
}
.review-art {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  vertical-align: -8px;
}
.perm {
  display: inline-block;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: var(--brand);
  border: 1px solid rgba(255, 121, 44, 0.4);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: 1px;
}
.cost {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.cost div {
  background: #14171c;
  padding: 15px 16px;
}
.cost small {
  display: block;
  color: var(--dim);
  font-size: 13px;
  margin-bottom: 5px;
}
.cost b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.cost em {
  display: block;
  font-style: normal;
  color: #7e8794;
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.5;
}
.ack {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--dim);
  font-size: 13.5px;
  line-height: 1.6;
  cursor: pointer;
}
.ack input {
  accent-color: var(--brand);
  width: 16px;
  height: 16px;
  margin-top: 1px;
  flex-shrink: 0;
}
.pane-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #22262c;
}
.pane-foot .btn-fill,
.pane-foot .next {
  margin-left: auto;
}
.pane-foot .back + .next {
  margin-left: auto;
}
.pane-note {
  color: #7e8794;
  font-size: 13px;
}
.btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}
.pane-done .done-mark {
  color: var(--brand);
  font-size: 26px;
}
.pane-done .pane-h {
  margin-top: 10px;
}
.done-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.done-grid div {
  background: #14171c;
  padding: 14px 15px;
}
.done-grid small {
  display: block;
  color: var(--dim);
  font-size: 13px;
  margin-bottom: 5px;
}
.done-grid b {
  font-size: 14px;
  font-weight: 800;
}
.coin-static {
  pointer-events: none;
}

/* ============================================================
   Responsive for the two new pages
   ============================================================ */
@media (max-width: 1080px) {
  .coin-app,
  .create-app {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
  .stat-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .picks,
  .cost,
  .done-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .coin-app .rail {
    position: static;
  }
  .chero-id h1 {
    font-size: 26px;
  }
  .chero-art {
    width: 58px;
    height: 58px;
    border-radius: 13px;
  }
}
@media (max-width: 760px) {
  #coin > .gate-banner {
    padding-inline: 18px;
  }
  #coin > .crumb {
    margin: 14px 0 0 18px;
    padding: 5px 10px 5px 8px;
    font-size: 13px;
  }
  #coin > .chero {
    width: calc(100% - 36px);
    margin: 8px auto 14px;
    padding: 16px;
  }
  /* The same inset as the hero, so the "no such coin" and "cannot reach
     the pad" cards line up with the page rather than sitting 28px inside
     it — which is the misalignment the wider rule exists to fix. */
  #coin > .panel {
    width: calc(100% - 36px);
    margin: 8px auto 14px;
  }
  .coin-app,
  .create-app {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* .app sets align-items:start, which in a column flex box shrinks every
       panel to its content width instead of filling the screen */
    align-items: stretch;
  }
  .create-app .feed,
  .create-app .rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  /* on a phone the panels reorder into one column: chart, then the thing
     people came to do, then the detail behind it */
  .coin-app .feed,
  .coin-app .rail {
    display: contents;
  }
  .chart-panel {
    order: 1;
  }
  .panel-trade {
    order: 2;
  }
  .stat-strip {
    order: 3;
  }
  .curve-panel {
    order: 4;
  }
  .panel-reward {
    order: 5;
  }
  .activity-panel {
    order: 6;
  }
  /* Scoped to the coin page: the rewards and revenue pages reuse .duo
     for their list pairs, and there the lists belong in DOM order —
     under the tiles, above the about panels. */
  .coin-app .duo {
    order: 7;
  }
  .coin-app .panel-launch-details {
    order: 7;
  }
  /* five stats over two columns leaves a hole, so the last one spans */
  .stat-strip div:last-child {
    grid-column: 1 / -1;
  }
  /* The tab row's caption wrapped the two tabs onto three lines. */
  .tabs .dimlbl {
    display: none;
  }
  /* A receipt row whose value is a sentence stacks the label over it
     rather than wrapping a right-aligned block beside a broken label. */
  .kv li.kv-long {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .kv li.kv-long b {
    text-align: left;
  }
  .chero-num b {
    font-size: 20px;
  }
  .chero-top {
    flex-wrap: wrap;
    gap: 14px;
  }
  .blurb {
    margin-top: 12px;
  }
  .chero-id h1 {
    font-size: 25px;
  }
  .chero-num {
    width: 100%;
    margin: 0;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .chero-num b {
    font-size: 22px;
  }
  .wide-panel {
    padding: 16px;
  }
  .chart {
    height: 190px;
  }
  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .duo {
    grid-template-columns: 1fr;
  }
  .gate-banner {
    gap: 12px;
  }
  .gate-clock {
    font-size: 26px;
    min-width: 58px;
  }
  .stepper {
    padding: 0 18px;
    margin-bottom: 18px;
  }
  .stepper ol {
    gap: 4px;
  }
  .step span {
    display: inline;
    font-size: 11.5px;
  }
  .step {
    justify-content: center;
    gap: 5px;
    flex-direction: column;
    text-align: center;
  }
  .picks,
  .picks-2,
  .cost,
  .done-grid {
    grid-template-columns: 1fr;
  }
  .field-row {
    flex-direction: column;
  }
  .field-sm {
    max-width: none;
  }
  .pane-h {
    font-size: 19px;
  }
  .pane-foot {
    flex-wrap: wrap;
  }
  .pane-foot .btn {
    flex: 1;
  }
  .pane-note {
    flex-basis: 100%;
    order: 3;
  }
  .tbl {
    font-size: 13px;
  }
}
/* Rewards fill a pot and pay out when it is full, so the panel shows how far
   along the pot is rather than a countdown to a fixed hour. */
.potbar {
  margin: 14px 0 4px;
}
.potbar-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13.5px;
  color: var(--dim);
  margin-bottom: 7px;
}
.potbar-top b {
  color: var(--up);
  font-size: 14.5px;
  font-weight: 700;
}
.potbar-t {
  display: block;
  height: 8px;
  background: #23272e;
  border-radius: 8px;
  overflow: hidden;
}
.potbar-f {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--up), #4ade80);
}
.potbar-note {
  display: block;
  color: var(--dim);
  font-size: 13px;
  margin-top: 7px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

/* ---------- launching ---------- */

.launch-steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.launch-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--dim);
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sur);
}
.launch-steps li::before {
  content: "○";
  font-size: 13px;
  opacity: 0.6;
}
.launch-steps li.is-doing {
  color: var(--fg);
  border-color: #626977;
}
.launch-steps li.is-doing::before {
  content: "◐";
  opacity: 1;
}
.launch-steps li.is-done {
  color: var(--fg);
}
.launch-steps li.is-done::before {
  content: "●";
  color: var(--up);
  opacity: 1;
}
.launch-steps li.is-failed {
  color: var(--down);
  border-color: var(--down);
}
.launch-steps li.is-failed::before {
  content: "✕";
  color: var(--down);
  opacity: 1;
}
.launch-steps code {
  margin-left: auto;
  font-size: 12px;
  color: var(--dim);
}
.frozen-terms {
  margin-top: 14px;
}
.frozen-terms p {
  margin: 6px 0 0;
}
.launch-error {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--down);
  border-radius: 8px;
  color: var(--down);
  font-size: 14px;
  line-height: 1.5;
}

/* The coin launched; something optional alongside it did not.
   Deliberately not `--amber`, which this file reserves for money that
   reached holders — a note about a buy that did not happen is the one
   thing on the pad that colour must never be read as. Not `--down`
   either: nothing here is broken and the creator is looking at a success
   screen. The page's own line colour, on a surface panel, which reads as
   "there is more to say" rather than as a figure or a failure. */
.done-warn {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sur);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------------------------------------------------------- how it works */

/* The three-step and five-step explanations. A definition list would be
   more semantic, but a numbered sequence is the thing being communicated
   and an ordered list says that to a screen reader too. */
.how-steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  counter-reset: how;
}

.how-steps li {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 14px 16px 14px 52px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sur);
}

.how-steps li::before {
  counter-increment: how;
  content: counter(how);
  position: absolute;
  left: 16px;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--bg);
  background: var(--brand);
}

.how-steps li b {
  font-size: 14px;
  font-weight: 800;
}

.how-steps li span {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--dim);
}

/* The callout that admits the cost of the design. Marked rather than
   styled like the neutral ones, because a reader skimming for the catch
   should find it. */
.callout-warn {
  border-color: var(--brand);
}

/* The one callout that is about the reader's wallet rather than about the
   coin. It sits above the acknowledgement on the last step, where it is
   the last thing read before the first wallet prompt. */
.wallet-network {
  margin: 18px 0 0;
}

.how-tiers td:first-child,
.how-tiers th:first-child {
  font-weight: 800;
}

.how-gold td {
  color: var(--fg);
}

.how-gold td:first-child {
  color: var(--brand);
}

/* The one row in the guarantees table that says "yes". It is the thing a
   reader is meant to leave the page remembering, so it is not allowed to
   look like the seven rows above it. */
.how-can {
  color: var(--brand);
}

#tier-example .mini {
  margin-top: 10px;
}

/* The site's own nav, above the ecosystem links. Dimmer than the brand
   links beside it would be wrong — these are the ones a visitor actually
   needs — so it is the ecosystem row that stays quiet. */
.foot-site a {
  color: var(--fg);
}

/* ============================================================
   Rewards and revenue pages
   ============================================================ */
/* Four-up stat tiles: label, figure, caption. The figure is the only
   large number on the page, which is what makes the page read as a
   ledger rather than an article. */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.tiles li {
  background: var(--sur);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  min-width: 0;
}
#reward-tiles li {
  min-height: 150px;
}
.tiles small {
  display: block;
  color: var(--dim);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.tiles b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.tiles span {
  display: block;
  color: var(--dim);
  font-size: 13px;
  margin-top: 6px;
}
/* Ranked and recent lists: rank, picture, name, figures right. */
.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ledger-loading {
  min-height: 680px;
}
#daily-chart.chart-loading {
  min-height: 250px;
}
.ledger li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #22262c;
}
.ledger li:last-child {
  border: 0;
}
.ledger-note {
  color: var(--dim);
  font-size: 13.5px;
}
.ledger-rank {
  color: var(--dim);
  font-size: 13.5px;
  min-width: 16px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ledger-art {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.ledger-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ledger-main b {
  font-size: 14.5px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.ledger-main span {
  font-size: 13px;
  color: var(--dim);
}
.ledger-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ledger-right b {
  font-size: 14.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ledger-right span {
  font-size: 13px;
  color: var(--dim);
}
.ext {
  color: var(--dim);
  text-decoration: none;
}
.ext:hover {
  color: var(--fg);
}
/* Daily bars: claimed beside spent, the average as a dashed line. Plain
   divs, not SVG — bars are rectangles, and rectangles do not need a
   viewBox. */
.day-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 172px;
  /* A margin, not padding: the bars measure against the content box and
     the average line against the padding box, so any top padding floats
     the line above a bar of the same value. */
  margin-top: 8px;
}
.day-col {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}
/* No minimum height: a day with nothing spent draws nothing, which is
   what distinguishes it from a day with dust. */
.day-bar {
  width: 100%;
  max-width: 14px;
  border-radius: 4px 4px 0 0;
}
.day-x {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--dim);
}
.day-claimed {
  background: var(--up);
}
.day-spent {
  background: #3a414b;
}
.day-avg {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--dim);
  pointer-events: none;
}
.day-key {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sw {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 4px;
}
.sw-claimed {
  background: var(--up);
}
.sw-spent {
  background: #3a414b;
  margin-left: 10px;
}
.day-avg-key {
  margin-left: 10px;
  color: var(--dim);
}
.chart-sm {
  height: 200px;
}
@media (max-width: 900px) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* The side-by-side lists stack on a phone, and the chart's price labels
   give way to a range caption: at 390px the gutter holds eleven percent
   of nothing, and a price label bleeding past the panel edge is worse
   than no labels at all. */
.chart-range {
  display: none;
}
@media (max-width: 640px) {
  .chart-y {
    display: none;
  }
  .chart-range {
    display: block;
    margin-top: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: var(--dim);
  }
}

/* The board is a full-width discovery surface. Four listed coins fit in
   four equal columns; the activity ledger follows the board. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.intro-board {
  align-items: stretch;
  gap: 20px;
  padding: 26px 32px 22px;
}
.launch-story {
  flex: 1;
  min-width: 0;
  padding: 24px 28px;
  background: radial-gradient(circle at 87% -25%, rgba(255, 121, 44, 0.22), transparent 48%),
    linear-gradient(125deg, #25201c, #171a20 65%);
  border: 1px solid #59412f;
  border-radius: 18px;
}
.intro-eyebrow,
.proof-label {
  display: block;
  color: var(--brand);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.intro-board h1 {
  max-width: none;
  margin-top: 12px;
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1.04;
  letter-spacing: -0.055em;
}
.intro-board h1 span {
  color: #ffc087;
}
@media (min-width: 851px) {
  .intro-board h1 {
    white-space: nowrap;
  }
}
.intro-board .launch-story p {
  max-width: 650px;
  margin: 12px 0 0;
  color: #d7d0cb;
  font-size: 16px;
  line-height: 1.65;
}
.launch-story p a {
  color: #ffc087;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.intro-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 21px;
  margin-top: 18px;
}
.intro-actions .btn {
  padding: 11px 18px;
}
.intro-more,
.launch-proof a {
  color: #f5d7be;
  font-size: 14px;
  font-weight: 800;
}
.intro-more:hover,
.launch-proof a:hover {
  color: #fff;
}
.launch-proof {
  width: 250px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 22px;
  border: 1px solid #4b3c26;
  border-radius: 18px;
  background: linear-gradient(145deg, #2c2416, #181b1d 80%);
}
.proof-label {
  color: var(--amber);
}
.launch-proof strong {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  margin-top: 12px;
  color: var(--amber);
  font-size: clamp(32px, 3vw, 42px);
  line-height: 1.13;
  letter-spacing: -0.06em;
}
.launch-proof #hero-paid-note {
  min-height: 3.4em;
  margin: 10px 0 17px;
  color: #c7c4bf;
  font-size: 13.5px;
  line-height: 1.55;
}
.app-board {
  display: block;
}
.app-board .feed {
  display: block;
  width: 100%;
}
.app-board .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}
.app-board .grid > .coin,
.app-board .coin-wrap {
  height: 100%;
}
.app-board .coin-skeleton {
  min-height: 337px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(155deg, #181b20, #13161a);
}
.app-board .coin-skeleton::before {
  content: "";
  display: block;
  width: 52px;
  height: 52px;
  margin: 16px;
  border-radius: 12px;
  background: #2a2e34;
}
.app-board .grid-cta-skeleton {
  grid-column: 1/-1;
  min-height: 62px;
  border: 1px dashed var(--line);
  border-radius: 12px;
}
.app-board .coin {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 325px;
}
.app-board .card-context {
  min-height: 86px;
}
.app-board .card-blurb {
  min-height: 31px;
}
.app-board .card-metrics {
  margin-top: auto;
}
.app-board .spark-space {
  display: block;
  width: 100%;
  height: 30px;
  margin: 2px 0 12px;
}
.activity-board {
  margin-top: 30px;
  padding: 24px 28px;
}
.activity-board .panel-head {
  margin-bottom: 18px;
}
.activity-board .panel-head h2 {
  font-size: 22px;
}
.activity-board .panel-head p {
  margin-top: 4px;
  color: var(--dim);
  font-size: 13.5px;
}
.activity-board .dimlbl {
  flex: none;
}
.activity-board .trades {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 34px;
}
.activity-board .trades li {
  display: grid;
  grid-template-columns: minmax(64px, 1fr) 82px minmax(85px, 1.5fr) 65px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 13.5px;
}
.activity-board .trades li:nth-last-child(2) {
  border-bottom: 0;
}
.activity-board .trades b {
  min-width: 0;
}
.activity-board .trades .amt {
  margin: 0;
  text-align: right;
}
.activity-board .trades .when {
  min-width: 0;
  color: var(--dim);
}
.activity-board .trades .when:hover,
.activity-board .trades .amt:hover {
  color: var(--fg);
}
.activity-board .act.launch {
  color: var(--brand);
}
.activity-board .is-launch {
  background: rgba(255, 121, 44, 0.04);
}
.activity-board .panel-btns {
  justify-content: center;
}
.activity-board .panel-btns .btn {
  flex: none;
}
.foot {
  border-top: 1px solid var(--line);
  background: #101216;
}
.foot-in {
  padding-top: 28px;
  padding-bottom: 28px;
}
.foot a:hover {
  color: var(--fg);
}
/* Four columns holding four different amounts of text, so sizing them as
   fractions put the air inside the tracks instead of between them: three
   130px link lists in 271px columns left the last one stopping ~140px
   short of the page's right edge, and the gaps read as 73px, 186px,
   186px rather than one measure. The link columns are sized to their own
   text, the identity column to its paragraph, and `space-between` puts
   what is left over in the gaps — so both outer edges land on the same
   32px the header uses, and every gap is the same. */
.foot-home {
  display: grid;
  /* `auto` rather than `max-content` for the link columns: with
     `space-between` the spec skips the stretch step, so an auto track is
     sized to its content exactly as max-content would be — but it can
     still wrap if the viewport gets tighter than the step below expects,
     where max-content would push the last column off the page. The
     identity track resolves to its 360px maximum wherever there is room
     for it, and gives width back to the links in the last hundred pixels
     before the fold. */
  grid-template-columns: minmax(230px, 360px) repeat(3, auto);
  justify-content: space-between;
  column-gap: 40px;
  row-gap: 32px;
  padding-top: 40px;
  padding-bottom: 40px;
  font-size: 15px;
}
.foot-identity .mark {
  color: var(--fg);
  font-size: 25px;
}
/* No max-width of its own: the track caps the column, so the tagline and
   the network line below it wrap on one right edge instead of two. */
.foot-identity > p {
  margin-top: 10px;
  color: #b7bac0;
}
.foot-identity .foot-network {
  margin-top: 24px;
  color: var(--dim);
  font-size: 13.5px;
}
.foot-home .foot-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.foot-home .foot-nav span {
  margin-bottom: 6px;
  color: var(--fg);
  font-weight: 800;
}
@media (max-width: 1199px) {
  .app-board .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-board .coin-skeleton {
    min-height: 325px;
  }
}
/* The four-column footer needs 230 + 40 + three link columns, which is
   about 870px of viewport. Folding it at 1199 was folding it while it
   still fitted; below this the identity runs across the top and the
   three lists sit under it, and the two-column step is at 640. */
@media (max-width: 999px) {
  .foot-home {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
  }
  .foot-identity {
    grid-column: 1 / -1;
    max-width: 430px;
  }
}
@media (min-width: 761px) and (max-width: 1050px) {
  .bar-in {
    flex-wrap: wrap;
    padding-top: 11px;
    padding-bottom: 11px;
    gap: 9px 14px;
  }
  .bar-in .bar-nav {
    order: 3;
    flex-basis: 100%;
  }
  .bar-in .search-board {
    order: 2;
    max-width: none;
    min-width: 135px;
  }
  .bar-in .bar-right {
    order: 1;
    margin-left: auto;
  }
}
@media (max-width: 1050px) {
  .intro-board {
    display: block;
  }
  .launch-proof {
    width: 100%;
    margin-top: 14px;
    padding: 23px 26px;
  }
  .launch-proof #hero-paid-note {
    min-height: 0;
  }
  .activity-board .trades {
    grid-template-columns: 1fr;
  }
  .activity-board .trades li:nth-last-child(2) {
    border-bottom: 1px solid #24282e;
  }
}
@media (max-width: 640px) {
  .intro-board {
    padding: 19px 18px 22px;
  }
  .launch-story {
    padding: 25px 22px;
  }
  .intro-board h1 {
    margin-top: 12px;
    font-size: clamp(33px, 9vw, 46px);
    white-space: normal;
  }
  .intro-board .launch-story p {
    font-size: 14.5px;
  }
  .intro-actions {
    gap: 15px;
    margin-top: 21px;
  }
  .app-board {
    display: block;
    padding: 0 18px 27px;
  }
  .app-board .filters {
    margin: 0 0 14px;
  }
  .app-board .grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-board .coin {
    min-height: 310px;
  }
  .app-board .coin-skeleton {
    min-height: 310px;
  }
  .activity-board {
    padding: 20px 16px;
  }
  .activity-board .trades li {
    grid-template-columns: minmax(47px, 1fr) 58px minmax(78px, 1.4fr) 43px;
    gap: 5px;
    font-size: 13px;
  }
  .activity-board .panel-head {
    align-items: flex-start;
  }
  .foot-home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 26px;
    padding: 32px 18px;
  }
  /* `.foot-nav a` is `white-space: nowrap`, which keeps a link off two
     lines everywhere it has room. Two columns inside a 320px phone are
     ~134px each, and the longest label here is wider than that, so at
     this width the nowrap is what pushes the column past the gutter and
     gives the page a horizontal scrollbar. Let them wrap. */
  .foot-home .foot-nav a {
    white-space: normal;
  }
}

/* A full-width explanation. Each section answers one question with a
   visible diagram; the user's wallet and the coin's own terms are linked
   where they matter instead of occupying a second column. */
.intro-how {
  display: block;
  max-width: var(--page);
  padding: 30px 32px 26px;
}
.how-eyebrow,
.how-kicker {
  display: block;
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.intro-how h1 {
  margin: 8px 0 5px;
  font-size: clamp(30px, 3vw, 43px);
}
.intro-how p {
  max-width: 940px;
  margin: 0;
  font-size: 14px;
  color: var(--dim);
}
.how-app {
  display: block;
  max-width: var(--page);
  padding: 0 32px 42px;
}
.how-app .feed {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}
.how-app .pane {
  min-width: 0;
  padding: 28px 32px;
}
.how-heading {
  margin-bottom: 23px;
}
.how-heading .pane-h {
  margin: 7px 0;
  font-size: clamp(23px, 2.4vw, 31px);
  line-height: 1.16;
}
.how-heading > p {
  max-width: 810px;
  color: #b7bac1;
  font-size: 14px;
  line-height: 1.6;
}
.how-app a:hover {
  color: var(--fg);
}
.how-text-link,
.how-fine-print a,
.money-split a {
  display: inline-block;
  color: #ffae74;
  font-weight: 800;
  text-decoration: none;
}
.how-fine-print {
  margin-top: 21px;
  padding: 16px 19px;
  color: #c2c6cc;
  background: #1d2025;
  border: 1px solid #343941;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.6;
}
.how-fine-print b {
  color: var(--fg);
}
.how-fine-print a {
  display: block;
  width: fit-content;
  margin-top: 8px;
}
.reward-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.reward-flow li {
  position: relative;
  min-width: 0;
  padding: 19px;
  border: 1px solid #3d424c;
  border-radius: 13px;
  background: linear-gradient(155deg, #232021, #181b20 75%);
}
.reward-flow li:last-child {
  border-color: #68512b;
  background: linear-gradient(155deg, #2d281c, #1c1c1c 75%);
}
.flow-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 15px;
  color: #251309;
  font-size: 22px;
  font-weight: 800;
  border-radius: 11px;
  background: #ff9958;
}
.flow-gold {
  background: var(--amber);
}
.reward-flow li > b {
  display: block;
  font-size: 15px;
}
.reward-flow p {
  margin-top: 7px;
  color: #b7bac1;
  font-size: 13.5px;
  line-height: 1.55;
}
/* There is no site-wide link colour — `a` inherits — so every block
   colours its own, and this one never had. The flywheel's "See the
   ecosystem" link has been reading as plain grey body text inside its
   paragraph since it was written. */
.reward-flow p a {
  color: #ffae74;
  font-weight: 800;
}
.score-formula {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}
.score-formula > div {
  min-width: 0;
  min-height: 94px;
  padding: 19px;
  border: 1px solid #4e4130;
  border-radius: 12px;
  background: #25211c;
}
.score-formula > div span,
.score-tiers .score-tier > span,
/* Direct children only. As a descendant selector this also caught the
   `data-cfg` span inside the tile's small print, turning the pad's share
   of the curve fee into its own block and stranding the full stop after
   it on a third line. */
.how-costs > div > span,
.pool-path div > span,
.money-split div > span {
  display: block;
  color: #d7aa78;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
}
.score-formula > div b {
  display: block;
  margin-top: 7px;
  font-size: 15px;
}
.score-formula .formula-result {
  border-color: #84632d;
  background: #2c291b;
}
.formula-sign {
  color: var(--amber);
  text-align: center;
  font-size: 25px;
  font-weight: 800;
}
.score-explain {
  max-width: 950px;
  margin: 22px 0 18px;
  color: #c6c9ce;
  font-size: 14px;
  line-height: 1.65;
}
.score-explain b {
  color: var(--amber);
}
.score-tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.score-tier {
  min-width: 0;
  padding: 18px;
  border: 1px solid #383c41;
  border-radius: 11px;
  background: #1c1f23;
}
.score-tier b {
  display: block;
  margin: 10px 0 5px;
  color: #ffd17c;
  font-size: 29px;
  line-height: 1;
}
.score-tier small {
  color: #bbc0c8;
  font-size: 13px;
}
.tier-gold {
  border-color: #9c7830;
  background: #302817;
}
.score-demo {
  margin-top: 15px;
  min-height: 270px;
  box-sizing: border-box;
  padding: 21px 25px;
  border: 1px solid #65502d;
  border-radius: 12px;
  background: #211e19;
}
.score-demo-top b {
  color: var(--amber);
  font-size: 17px;
}
.score-demo-top p,
.score-note {
  max-width: 770px;
  margin-top: 5px;
  color: #bfc0bf;
  font-size: 13.5px;
  line-height: 1.65;
}
.score-demo .mini {
  max-width: 830px;
  margin-top: 15px;
}
.score-demo .mini li {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(85px, 2fr) minmax(95px, 1fr);
  align-items: center;
  gap: 20px;
  padding: 8px 0;
  border-bottom: 1px solid #4a4030;
  font-size: 13.5px;
}
.score-demo .mini li:last-child {
  border: 0;
}
.score-demo .mini b {
  color: #f4daab;
  text-align: right;
  white-space: nowrap;
}
/* The dollar companion under the SOL figure, for a reader who does not
   price things in SOL. Quieter than the amount it converts, and on its own
   line so the two never compete for the same edge. */
.score-demo .mini b small {
  display: block;
  margin-top: 1px;
  color: #a79878;
  font-size: 12px;
  font-weight: 600;
}
.score-demo-track {
  height: 9px;
  border-radius: 99px;
  background: #4e4534;
  overflow: hidden;
}
.score-demo-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #cc9b4f;
}
.score-demo .mini-lit .score-demo-track i {
  background: var(--amber);
}
.score-note {
  max-width: none;
  margin: 12px 0 10px;
}
.how-text-link {
  font-size: 13.5px;
}
.how-fee-pair,
.money-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.fee-block,
.money-split > div {
  min-width: 0;
  padding: 24px;
  border: 1px solid #504030;
  border-radius: 12px;
  background: #231e1b;
}
.fee-block-trading {
  border-color: #44505d;
  background: #1d252d;
}
.fee-block-tag {
  display: block;
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.07em;
}
.fee-block-trading .fee-block-tag {
  color: #a8c5df;
}
.fee-block > strong,
.fee-timeline {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-height: 61px;
  margin-top: 13px;
  color: #ffc087;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.05em;
}
.fee-timeline {
  color: #bad5ec;
}
.fee-timeline span {
  color: #8b9aac;
}
.fee-block > b {
  display: block;
  margin: 3px 0 8px;
  font-size: 16px;
}
.fee-block p,
.money-split p {
  color: #c1c7cc;
  font-size: 14.5px;
  line-height: 1.62;
}
.how-costs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.how-costs > div {
  min-width: 0;
  padding: 18px;
  border: 1px solid #363b42;
  border-radius: 11px;
  background: #1b1e23;
}
.how-costs b,
.pool-path b {
  display: block;
  margin: 8px 0 5px;
  font-size: 22px;
}
.how-costs small,
.pool-path small {
  color: #b0b5be;
  font-size: 13px;
  line-height: 1.55;
}
.pool-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 35px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.pool-path div {
  min-width: 0;
  padding: 20px;
  border: 1px solid #3d424a;
  border-radius: 12px;
  background: #1c2025;
}
.pool-path > span {
  color: var(--brand);
  text-align: center;
  font-size: 25px;
}
.locked-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.locked-grid > div {
  min-width: 0;
  padding: 16px;
  border: 1px solid #34443d;
  border-radius: 11px;
  background: #19241f;
}
.locked-grid > div > span {
  color: var(--up);
  font-size: 17px;
  font-weight: 800;
}
.locked-grid b {
  display: block;
  margin: 4px 0;
  font-size: 14px;
}
.locked-grid p {
  color: #b9c9bf;
  font-size: 13.5px;
  line-height: 1.55;
}
.locked-grid .kept-rule {
  border-color: #896845;
  background: #282118;
}
.locked-grid .kept-rule > span {
  color: var(--brand);
}
.locked-grid .kept-rule p {
  color: #ddc7ae;
}
.how-catch {
  margin-top: 14px;
  padding: 17px 20px;
  border: 1px solid #8e6b42;
  border-radius: 11px;
  color: #d0bca2;
  background: #29221b;
  font-size: 14.5px;
  line-height: 1.65;
}
.how-catch b,
.how-catch [data-cfg] {
  color: #ffbd73;
}
.money-split > div > b {
  display: block;
  margin: 11px 0 7px;
  color: var(--amber);
  font-size: 19px;
}
.money-split > div:last-child {
  border-color: #42474d;
  background: #202328;
}
.money-split > div:last-child > b {
  color: var(--fg);
}
.money-split a {
  margin-top: 13px;
  font-size: 13.5px;
}
.how-revenue-line {
  margin-top: 15px;
  color: #bfc4c9;
  font-size: 13.5px;
  line-height: 1.6;
}
.how-next {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}
@media (max-width: 1020px) {
  .reward-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .intro-how {
    padding: 23px 18px 21px;
  }
  .intro-how p {
    font-size: 13.5px;
  }
  .how-app {
    display: block;
    padding: 0 18px 29px;
  }
  .how-app .feed {
    display: flex;
    gap: 13px;
  }
  .how-app .pane {
    padding: 21px 17px;
  }
  .how-heading {
    margin-bottom: 17px;
  }
  .how-heading > p,
  .score-explain {
    font-size: 13.5px;
  }
  .reward-flow {
    gap: 9px;
  }
  .reward-flow li {
    padding: 14px;
  }
  .reward-flow li > b {
    font-size: 14.5px;
  }
  .reward-flow p {
    font-size: 13px;
  }
  .flow-icon {
    width: 31px;
    height: 31px;
    margin-bottom: 9px;
    font-size: 18px;
  }
  .score-formula {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
  .score-formula > div {
    min-height: 0;
    padding: 12px 15px;
  }
  .score-formula > div b {
    margin-top: 3px;
    font-size: 14.5px;
  }
  .formula-sign {
    font-size: 18px;
    line-height: 1;
  }
  .score-tiers,
  .locked-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .score-tier {
    padding: 14px;
  }
  .score-tier b {
    font-size: 25px;
  }
  .score-demo {
    min-height: 290px;
    padding: 15px 12px;
  }
  .score-demo .mini li {
    grid-template-columns: minmax(88px, 1fr) minmax(45px, 1fr) minmax(65px, 1fr);
    gap: 7px;
    font-size: 12px;
  }
  .score-demo .mini b {
    font-size: 13px;
  }
  .how-fee-pair,
  .money-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .fee-block,
  .money-split > div {
    padding: 18px;
  }
  .fee-block > strong,
  .fee-timeline {
    min-height: 0;
  }
  .how-costs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .how-costs > div {
    padding: 13px;
  }
  .how-costs > div:last-child {
    grid-column: 1/-1;
  }
  .locked-grid .kept-rule {
    grid-column: 1/-1;
  }
  .how-next .btn {
    flex: 1;
    padding: 10px 11px;
    font-size: 13px;
  }
}

/* ---------- the Terms dialog and page ---------- */
.terms-dialog {
  max-width: 760px;
  padding: 0;
  max-height: min(88vh, 900px);
  display: none;
  flex-direction: column;
}
.terms-dialog[open] {
  display: flex;
}
.terms-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--line);
}
.terms-head h2 {
  margin: 4px 0 0;
  font-size: 22px;
}
.terms-head .dialog-close {
  float: none;
  flex: none;
}
.terms-body {
  overflow: auto;
  padding: 6px 26px 18px;
  font-size: 15px;
  line-height: 1.7;
  color: #c7cdd6;
}
.terms-body h3 {
  font-size: 16.5px;
  color: var(--fg);
  margin: 22px 0 8px;
}
.terms-body p,
.terms-body ul {
  margin: 0 0 12px;
  line-height: 1.7;
  color: #c7cdd6;
}
.terms-body ul {
  padding-left: 22px;
}
.terms-body li {
  margin-bottom: 6px;
}
.terms-lead {
  color: var(--fg) !important;
  font-size: 15.5px;
  padding-top: 14px;
}
.terms-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 26px 20px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}
.terms-foot .dialog-done {
  width: auto;
  padding: 10px 22px;
}
.terms-page {
  max-width: 820px;
}
.terms-page .terms-body {
  padding: 4px 0 0;
  overflow: visible;
}
.terms-app .feed {
  grid-column: 1 / -1;
}

/* ---------- the $CLASH page ---------- */
.intro-clash {
  align-items: flex-end;
  flex-wrap: wrap;
}
.clash-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.clash-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 26px;
  align-items: start;
  max-width: var(--page);
}
.clash-app .tiles {
  margin-bottom: 20px;
}
.eco-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.eco-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: var(--sur);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.15s;
}
.eco-card:hover {
  border-color: var(--brand);
}
.eco-card b {
  font-size: 17px;
}
.eco-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dim);
  flex: 1;
}
.eco-card span {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand);
}
.eco-card-pad {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
}
.swap-panel {
  position: sticky;
  top: 84px;
}
.swap-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.swap-field {
  display: block;
  padding: 12px 14px;
  background: #0f1216;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.swap-field > span {
  display: block;
  font-size: 12.5px;
  color: var(--dim);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.swap-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.swap-row input,
.swap-row output {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--fg);
  font: inherit;
  font-size: 24px;
  font-weight: 700;
  padding: 0;
  outline: none;
}
.swap-row output {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swap-row b {
  font-size: 15px;
  color: var(--dim);
}
.swap-arrow {
  text-align: center;
  color: var(--dim);
  font-size: 18px;
  margin: -4px 0;
}
.swap-terms {
  margin: 6px 0 4px;
  display: grid;
  gap: 6px;
  font-size: 13.5px;
}
.swap-terms div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.swap-terms dt {
  color: var(--dim);
}
.swap-terms dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}
.swap-terms select {
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg);
  background: #0f1216;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 8px;
}
.swap-go {
  width: 100%;
  padding: 13px 18px;
  font-size: 16px;
  margin-top: 4px;
}
.swap-status {
  margin: 4px 0 0;
  font-size: 14px;
  min-height: 1.4em;
  line-height: 1.5;
}
.swap-status.is-bad {
  color: var(--bad, #ff6b6b);
}
.swap-status.is-good {
  color: var(--good, #4ade80);
}
.swap-status a {
  color: inherit;
}
.swap-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
}
.swap-mint code {
  font-size: 12px;
  word-break: break-all;
}
.swap-mint .copy-ca {
  position: static;
  margin-left: 6px;
  vertical-align: middle;
  font-size: 12px;
  padding: 3px 7px;
}
.impact-warn {
  color: var(--bad, #ff6b6b);
}
@media (max-width: 1080px) {
  .clash-app {
    grid-template-columns: minmax(0, 1fr);
  }
  .swap-panel {
    position: static;
  }
}
@media (max-width: 760px) {
  .eco-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .terms-head,
  .terms-body,
  .terms-foot {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.tiles b.is-up {
  color: var(--good, #4ade80);
}
.tiles b.is-down {
  color: var(--bad, #ff6b6b);
}

/* ---------- the account menu in the header ---------- */

.bar-right {
  position: relative;
}
.acct-btn {
  gap: 8px;
  padding: 6px 12px 6px 7px;
}
.acct-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: #2a2f37;
  flex-shrink: 0;
}
.acct-avatar-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--brand);
  border: 1px solid #3a3f48;
}
.acct-label {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-caret {
  color: var(--dim);
  font-size: 12px;
}
.acct-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 240px;
  padding: 6px;
  background: #15181d;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
}
.acct-menu[hidden] {
  display: none;
}
.acct-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.acct-head b {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-head small {
  color: var(--dim);
  font-size: 12.5px;
}
.acct-head .plan-badge {
  align-self: flex-start;
  margin-top: 4px;
}
.acct-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  background: none;
  border: 0;
  cursor: pointer;
}
.acct-item:hover,
.acct-item:focus-visible {
  background: #20242a;
  text-decoration: none;
}
.acct-out {
  color: #f0a0a0;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
}

/* The preview switch, offered only to an operator account.

   It carries `.acct-item` too, so the row keeps the 12px side padding, the
   9px rhythm, the radius, the weight and the hover from it; all this adds
   is the flex row that puts a state pill on the right. That is why the
   label starts on the same pixel as "Profile & settings" rather than one
   flex quirk away from it.

   The pill's `line-height: 1` is the height half of the same idea. Left at
   the inherited 1.55 it measures 12×1.55 + 4 padding + 2 border ≈ 25px
   against the row's own 14×1.55 ≈ 22px text line, so this one item sat
   ~3px taller than every other row in the menu — which reads as a
   misaligned menu, not as a switch. At 1 the pill is 18px, under the
   label's 22px, and the row is governed by the label exactly like its
   neighbours. */
.acct-item-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.acct-toggle-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-toggle-state {
  flex: none;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}
.acct-item-toggle[aria-checked="true"] .acct-toggle-state {
  color: #0b0c0f;
  background: var(--brand);
  border-color: var(--brand);
}

/* A plan badge: AskClash's tier, wherever a name is shown. */
.plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #c4c8cf;
  border: 1px solid #454b56;
  vertical-align: middle;
}
.plan-badge.plan-lite { color: #9ad0ff; border-color: #2f5a7a; }
.plan-badge.plan-plus { color: #c7b3ff; border-color: #55418a; }
.plan-badge.plan-pro { color: #ffd27a; border-color: #7a5a1f; background: rgba(255, 210, 122, 0.08); }
.plan-badge.plan-free { display: none; }

/* ---------- the account page ---------- */

.account-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 26px;
  align-items: start;
  max-width: var(--page);
}
.account-pane .pane-p code {
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 6px;
  background: #1a1e24;
}
/* Two ways in, side by side where there is room and stacked where there
   is not, with the reassurance under both rather than beside one. */
.acct-empty {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.acct-empty .pane-note {
  flex: 1 0 100%;
  margin: 4px 0 0;
}
.avatar-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 18px 0 6px;
}
.avatar-pick {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: #1a1e24;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar-pick img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-blank {
  font-size: 34px;
  font-weight: 800;
  color: var(--brand);
}
.avatar-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.avatar-ctl .note {
  flex-basis: 100%;
  color: var(--dim);
  font-size: 13px;
}
.avatar-btn {
  cursor: pointer;
}
.pane-h-sm {
  font-size: 16px;
  margin-top: 22px;
}
.switch-row span b {
  color: var(--fg);
}
.creator-toggle {
  margin-bottom: 12px;
}
.save-note {
  margin-right: auto;
  color: #86efac;
  font-size: 13.5px;
  font-weight: 700;
}
.askclash-card + .askclash-card {
  margin-top: 16px;
}
.ac-who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.ac-who b {
  font-size: 18px;
  font-weight: 800;
}
.ac-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0f1216;
}
.ac-facts div {
  min-width: 0;
}
.ac-facts dt {
  color: var(--dim);
  font-size: 12.5px;
}
.ac-facts dd {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 800;
}
/* The list carried an 18px indent for markers that the site's reset had
   already taken away, so the three reasons sat a step to the right of the
   heading and the paragraph above them with an empty gutter beside them.
   The ticks the class is named for now live in that gutter, and the block
   starts on the pane's own left edge. */
.tick-list {
  margin: 12px 0 0;
  padding-left: 0;
  list-style: none;
  color: var(--dim);
  font-size: 14px;
  line-height: 1.6;
}
.tick-list li {
  position: relative;
  padding-left: 22px;
}
.tick-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand);
  font-weight: 800;
}
.tick-list li + li {
  margin-top: 6px;
}
.pane-note.is-good {
  color: #86efac;
}
#ac-off .btn,
#ac-on .panel-btns {
  margin-top: 14px;
}

/* ---------- names on the coin page ---------- */

.creator-who b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.creator-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 8px;
  background: #2a2f37;
}
.creator-block .plan-badge {
  display: inline-flex;
  width: auto;
  margin: 0 0 0 8px;
  font-size: 11px;
  color: #c4c8cf;
  vertical-align: middle;
}
.creator-block .plan-badge.plan-pro { color: #ffd27a; }
.creator-block .plan-badge.plan-plus { color: #c7b3ff; }
.creator-block .plan-badge.plan-lite { color: #9ad0ff; }
.creator-who small {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
  font-size: 12.5px;
}
.creator-who small a {
  display: inline;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dim);
}
.holder-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: var(--fg);
  margin-right: 6px;
}
.holder-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: #2a2f37;
}
.who .plan-badge {
  margin-left: 6px;
  font-size: 10.5px;
  padding: 1px 6px;
}

@media (max-width: 1080px) {
  .account-app {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .acct-label {
    max-width: 96px;
  }
  .acct-menu {
    right: 0;
    left: auto;
    min-width: 220px;
  }
  .ac-facts {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- the $CLASH chart and the buyback box ---------- */

.chart-pane {
  padding: 18px 18px 14px !important;
}
.chart-pane .panel-head {
  margin-bottom: 12px;
  padding: 0 4px;
}
.chart-pane .panel-head a.dimlbl:hover {
  color: var(--fg);
}
.chart-frame {
  position: relative;
  width: 100%;
  /* DEX Screener's embed has no intrinsic height, so the box sets one.
     Tall enough that the candles are readable rather than a strip. */
  height: 480px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0b0d10;
}
.chart-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.buyback-panel {
  margin-bottom: 16px;
}
.buyback-next {
  margin: 12px 0 0;
  color: var(--dim);
  font-size: 15px;
}
.buyback-next b {
  color: var(--brand);
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.buyback-facts {
  display: grid;
  gap: 9px;
  margin: 14px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0f1216;
}
.buyback-facts div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.buyback-facts dt {
  color: var(--dim);
  font-size: 13px;
}
.buyback-facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.flywheel-explainer {
  padding-bottom: 8px;
}
.intro-ledger {
  padding-top: 8px;
}
.intro-ledger h2 {
  margin: 8px 0 5px;
  font-size: 40px;
  letter-spacing: -1.4px;
}
@media (max-width: 1080px) {
  .chart-frame {
    height: 400px;
  }
}
@media (max-width: 760px) {
  .chart-frame {
    height: 340px;
  }
  .intro-ledger h2 {
    font-size: 30px;
  }
}
.tick-foot {
  margin-top: 12px;
  padding-left: 0;
}
/* A link that ends in "\2197" and wraps mid-way strands the arrow at the
   start of the next line, where it reads as a loose glyph rather than as
   part of the link. These two panes are narrow enough for that to happen
   to both of their notes. */
.askclash-card .pane-note a {
  white-space: nowrap;
}

/* ============================================================
   Paid placement, and the thumbs up
   ============================================================ */

/* A boosted card. Orange, because nothing else on the board is: the
   accent is green, the fall is red, and a colour that means one thing in
   one place is worth more than a fourth shade of the brand.

   It glows and it says "Boosted" in words. The label is not decoration —
   a card that sorted above the board because somebody paid for it has to
   say so, and a reader who cannot see the colour still reads the word. */
.coin-boosted {
  border-color: rgba(251, 146, 60, 0.55);
  background:
    linear-gradient(180deg, rgba(251, 146, 60, 0.09), rgba(251, 146, 60, 0) 160px),
    var(--sur);
  box-shadow:
    0 0 0 1px rgba(251, 146, 60, 0.16),
    0 10px 34px -18px rgba(251, 146, 60, 0.75);
}
.coin-boosted:hover {
  border-color: rgba(251, 146, 60, 0.85);
}
/* A band across the top of the card rather than a corner ribbon. The
   corner is already occupied: the 24h change sits at the top right of
   every card, and the ribbon landed straight on top of it, so a boosted
   coin's price move was unreadable. A band has its own row, which the
   card pays for with the padding below. */
.boost-flag {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2b1503;
  background: linear-gradient(90deg, #fbbf24, #fb923c 70%);
}
.coin-boosted {
  padding-top: 44px;
}
/* The thumbs-up count on a card. Quiet: it is a figure, not a control —
   the card is one link and liking happens on the coin's own page. */
.card-likes {
  color: #9aa2ae;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* The separator belongs to the count rather than to the age, so that a
   width which drops the age does not leave a loose middle dot behind. */
.card-likes::before {
  content: "\00b7";
  margin: 0 6px;
  color: #6b7280;
}
/* Three things do not fit across a card that is a quarter of the board
   wide. Nothing in this row shrinks, and it wraps as a row rather than
   inside the fee chip. */
.card-foot {
  flex-wrap: wrap;
}
.card-foot > * {
  white-space: nowrap;
}

/* ---------- the coin page's header module ---------- */

/* Top right of the hero: the two things you can do to a coin that are
   not trading it. They sit together because they are a pair — one is
   earned and one is bought — and apart from the price, which is the
   thing they must not be mistaken for. */
.chero-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 18px;
}
.act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #14171d;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.act:hover:not(:disabled) {
  border-color: #3a414d;
  background: #191d24;
}
.act:disabled {
  cursor: default;
  opacity: 0.75;
}
.act b {
  font-variant-numeric: tabular-nums;
}
.act-like.is-liked {
  color: #bef264;
  border-color: rgba(190, 242, 100, 0.4);
  background: rgba(190, 242, 100, 0.08);
}
.act-boost {
  color: #fdba74;
  border-color: rgba(251, 146, 60, 0.42);
  background: rgba(251, 146, 60, 0.08);
}
.act-boost:hover:not(:disabled) {
  border-color: rgba(251, 146, 60, 0.8);
  background: rgba(251, 146, 60, 0.14);
}
/* The coin's own "this is boosted" mark, beside the tags rather than
   over the corner: on the coin's own page the reader is already here, so
   it is a fact about the coin rather than a flag on a list. */
.tag-boost {
  color: #2b1503;
  border-color: transparent;
  background: linear-gradient(135deg, #fbbf24, #fb923c);
  font-weight: 800;
}

/* ---------- buying a boost ---------- */

.boost-tiers {
  display: grid;
  gap: 10px;
  margin: 18px 0 6px;
}
.boost-tier {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #14171d;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.boost-tier:hover {
  border-color: rgba(251, 146, 60, 0.6);
}
.boost-tier[aria-pressed="true"] {
  border-color: rgba(251, 146, 60, 0.9);
  background: rgba(251, 146, 60, 0.1);
}
.boost-tier .bt-when {
  min-width: 96px;
  font-weight: 800;
  font-size: 16px;
}
.boost-tier .bt-why {
  flex: 1;
  color: var(--dim);
  font-size: 13.5px;
}
.boost-tier .bt-cost {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.boost-tier .bt-cost b {
  display: block;
  font-size: 15px;
}
.boost-tier .bt-cost small {
  color: var(--dim);
}
@media (max-width: 560px) {
  .boost-tier {
    flex-wrap: wrap;
    gap: 6px 14px;
  }
  .boost-tier .bt-why {
    order: 3;
    flex: 1 0 100%;
  }
  .chero-acts {
    margin: 12px 0 0;
    width: 100%;
  }
}

/* ---------------------------------------------------- coming soon --

   What a closed pad serves in place of every page. The edge function in
   netlify/edge-functions/gate.ts returns this file's body under the
   requested URL, so it is read at "/", at "/create" and at every other
   path — it therefore carries no navigation of its own, because every
   link on it would lead back to itself. */
.soon-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px var(--gutter);
}
.soon {
  max-width: 560px;
  text-align: center;
}
.soon-mark {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--brand);
  margin: 0 0 28px;
}
.soon h1 {
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.soon-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--dim);
  margin: 0 0 28px;
}
.soon-fine {
  font-size: 14px;
  line-height: 1.6;
  color: var(--dim);
  opacity: 0.75;
  margin: 0;
}
@media (max-width: 640px) {
  .soon-body {
    padding: 40px 18px;
  }
  .soon h1 {
    font-size: 34px;
  }
  .soon-lede {
    font-size: 16px;
  }
}