/*
  The home page (/ and /zh/), design v3. Layout for this page only: the hero with its live
  figures, the token list (compact rows on a phone, a table from 900px), the latest inscriptions
  and the closed "how a token gets here" disclosure. The pieces (avatar, badge, meter, seg,
  dotlist, learn, buttons, skeletons, states) come from ui.css.
  Loaded by the <!-- style: /assets/page-tokens.css --> marker in pages/tokens.html.

  On a phone the list is what a returning minter came for, so it starts above the fold on a
  390 x 844 screen: the hero is the title and one button row, and the figures are a sideways
  strip of small tiles rather than a two-by-two panel.
*/

/* ------------------------------------------------------------------ hero */

.hero-title {
  font-size: var(--fs-h1);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 800;
  max-width: 18ch;
}
html[lang|="zh"] .hero-title {
  letter-spacing: 0.01em;
  line-height: 1.35;
  font-weight: 700;
}
/* The sentence under the title is for a first visit on a wide screen. On a phone the same
   explanation is one tap away in the disclosure below the list. */
.hero-lead {
  display: none;
  color: var(--text2);
  max-width: 46ch;
}
/* Two buttons that share the row and grow to fill it. A label never wraps inside its 48px button:
   when the pair is wider than the screen (a 320px phone), the second button moves to its own
   full-width line instead. */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}
.hero-cta .btn {
  flex: 1 1 auto;
  padding: 0 var(--s3);
  white-space: nowrap;
}

/* The live figures. A phone: a strip of small tiles that scrolls sideways if it must (a long
   Chinese label), each a 14px label over a 16px figure. */
.hero-stats {
  display: flex;
  gap: var(--s2);
  margin: var(--s4) calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.hero-stats::-webkit-scrollbar {
  display: none;
}
.hero-stats > div {
  flex: 1 0 auto;
  min-width: 96px;
  padding: var(--s2) 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)), var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
}
.hero-stats dt {
  color: var(--text2);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}
.hero-stats dd {
  margin: var(--s0) 0 0;
  min-height: 22px;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  white-space: nowrap;
}
.hero-stats dd .skel-fig {
  height: 18px;
  width: 44px;
  margin-top: var(--s0);
}
/* A figure the index did not give: said quietly, so three of them do not shout. */
.hero-stats dd.is-unknown {
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text2);
}

/* ------------------------------------------------------------------ section heads */

.sechead h2 {
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ the token list */

.tlist-head {
  display: none;
}
.tlist {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* A phone row: the avatar beside three lines (name and badges, the bar with its percent, the
   figures), a fourth for this wallet's mints when a wallet is connected, and the compact action on
   the right, centred. */
.trow {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas:
    "av id act"
    "av prog act"
    "av meta act";
  column-gap: var(--s3);
  row-gap: var(--s1);
  align-items: center;
  padding: 14px var(--s4);
  transition: background-color 0.15s;
}
.trow + .trow {
  border-top: 1px solid var(--hair);
}
@media (hover: hover) {
  .trow:not(.skel-card):hover {
    background: rgba(255, 255, 255, 0.025);
  }
}
.trow:not(.skel-card):active {
  background: rgba(255, 255, 255, 0.04);
}
.trow-rank {
  display: none;
}
.trow-token {
  display: contents;
}
.trow .avatar,
.trow .skel-avatar {
  grid-area: av;
  align-self: start;
  margin-top: 2px;
}
.trow-id {
  grid-area: id;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) 6px;
  min-width: 0;
}
.trow-link {
  font-size: var(--fs-base);
  text-decoration: none;
  margin-right: 2px;
}
/* The ticker is the row's link; its hit area is the whole row. */
.trow-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.trow-link:focus-visible {
  outline: none;
}
.trow:has(.trow-link:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--lime);
}
.trow-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s1);
}
.trow-block {
  color: var(--text2);
  font-size: var(--fs-sm);
}
.trow-prog {
  grid-area: prog;
  min-width: 0;
}
.trow-meta {
  grid-area: meta;
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
/* The phone order: mints (the figure that moves) and holders, a break, minted of max and yours. */
.trow-mints {
  order: 1;
  color: var(--text);
  font-weight: 600;
}
.trow-holders {
  order: 2;
}
.trow-meta > .dotlist-br {
  order: 3;
}
.trow-minted {
  order: 4;
}
.trow-meta > .trow-yours {
  order: 5;
}
.trow-minted .of {
  color: var(--text2);
}
.trow-holders .d,
.trow-mints .d,
.trow-yours .d {
  display: none;
}
.trow-yours:not(:has(.m)) {
  display: none;
}
.is-capped {
  color: var(--err);
}
.trow-act {
  grid-area: act;
  position: relative;
  z-index: 2;
  justify-self: end;
}
.trow-similar {
  grid-column: 2 / -1;
  position: relative;
  z-index: 2;
}
.trow-similar .similar {
  margin: 0;
}
.skel-compact {
  width: 64px;
  height: 36px;
  border-radius: var(--r-sm);
}
/* A placeholder row's figures: the real cells holding grey lines, laid out as one short line on a
   phone (no dots between placeholders) and as the table's own cells on a wide screen. */
.trow-skelmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s3);
}
.trow-skelmeta .skel-line {
  margin: 4px 0;
}

/* ------------------------------------------------------------------ latest inscriptions */

.lrows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--r-xl);
}
.lrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 64px;
  padding: var(--s2) var(--s2) var(--s2) var(--s4);
  transition: background-color 0.15s;
}
.lrow + .lrow {
  border-top: 1px solid var(--hair);
}
@media (hover: hover) {
  .lrow:not(.skel-card):not(.lrow-note):hover {
    background: rgba(255, 255, 255, 0.025);
  }
}
.lrow-main {
  flex: 1;
  min-width: 0;
}
.lrow-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s2);
  margin: 0;
  line-height: 1.35;
}
.lrow-link {
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: -0.01em;
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* the ticker link covers the row; the explorer button sits above it */
.lrow-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.lrow-link:focus-visible {
  outline: none;
}
.lrow:has(.lrow-link:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--lime);
  border-radius: var(--r-lg);
}
.lrow-what {
  color: var(--text);
  font-size: var(--fs-md);
}
.lrow-meta {
  margin-block: 0;
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.lrow-meta .mono {
  font-size: var(--fs-sm);
}
.lrow-x {
  position: relative;
  z-index: 2;
  color: var(--text2);
}
.lrow-x:hover {
  color: var(--text);
}
.lrow-note {
  color: var(--text2);
  font-size: var(--fs-md);
  padding-right: var(--s4);
}

/* ------------------------------------------------------------------ the explanation */

.tokens-about {
  margin-top: var(--s6);
}

/* ------------------------------------------------------------------ desktop */

@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--s8);
    align-items: center;
  }
  .hero-title {
    font-size: var(--fs-hero-lg);
    line-height: 1.1;
  }
  .hero-lead {
    display: block;
    font-size: var(--fs-lead);
    margin: var(--s4) 0 0;
  }
  .hero-cta {
    margin-top: var(--s6);
  }
  .hero-cta .btn {
    flex: 0 0 auto;
    padding: 0 var(--s5);
  }
  /* A grouped panel split by hairlines: two figures over one. */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--hair);
    border: 1px solid var(--hair);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-card);
  }
  .hero-stats > div {
    min-width: 0;
    padding: var(--s5);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)), var(--panel);
  }
  .hero-stats > div:last-child {
    grid-column: 1 / -1;
  }
  .hero-stats dd {
    font-size: var(--fs-3xl);
    min-height: 36px;
    line-height: 1.25;
    letter-spacing: -0.02em;
  }
  .hero-stats dd.is-unknown {
    font-size: var(--fs-base);
  }
  .hero-stats dd .skel-fig {
    height: 28px;
    width: 72px;
  }
  .section {
    margin-top: var(--s8);
  }

  .tokens-table {
    --cols: 28px minmax(190px, 1.6fr) minmax(170px, 1.3fr) minmax(112px, 0.9fr) minmax(76px, 0.55fr) minmax(76px, 0.55fr) 112px;
  }
  .tokens-table.has-wallet {
    --cols: 28px minmax(180px, 1.5fr) minmax(150px, 1.2fr) minmax(112px, 0.9fr) minmax(76px, 0.55fr) minmax(64px, 0.5fr) minmax(88px, 0.6fr) 112px;
  }
  .tlist-head {
    display: grid;
    grid-template-columns: var(--cols);
    column-gap: var(--s4);
    padding: 0 var(--s5) var(--s2);
    color: var(--text3);
    font-size: var(--fs-sm);
    font-weight: 600;
  }
  .tlist-head .r {
    text-align: right;
  }
  .trow {
    grid-template-columns: var(--cols);
    grid-template-areas: none;
    column-gap: var(--s4);
    row-gap: var(--s2);
    min-height: 72px;
    padding: var(--s3) var(--s5);
  }
  .trow-rank {
    display: block;
    color: var(--text3);
    font-size: var(--fs-sm);
    font-weight: 700;
  }
  .trow-token {
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-width: 0;
  }
  .trow .avatar,
  .trow .skel-avatar {
    align-self: center;
    margin-top: 0;
  }
  .trow .avatar,
  .trow .skel-avatar,
  .trow-id,
  .trow-prog,
  .trow-meta,
  .trow-act {
    grid-area: auto;
  }
  /* The figures become cells: every numeric column right-aligned in tabular figures. */
  .trow-meta {
    display: contents;
  }
  .trow-meta > .dotlist-br {
    display: none;
  }
  /* the phone order must not reorder the table's columns */
  .trow-meta > .trow-minted,
  .trow-meta > .trow-holders,
  .trow-meta > .trow-mints,
  .trow-meta > .trow-yours {
    order: 0;
  }
  .trow-meta > span {
    text-align: right;
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
    color: var(--text);
    font-weight: 500;
  }
  .trow-meta > span::before {
    content: none;
  }
  .trow-minted {
    font-weight: 600;
  }
  .trow-holders .m,
  .trow-mints .m,
  .trow-yours .m {
    display: none;
  }
  .trow-holders .d,
  .trow-mints .d,
  .trow-yours .d,
  .trow-meta > .trow-yours {
    display: block;
  }
  .trow-meta > .trow-yours {
    color: var(--text2);
  }
  .trow-meta > .trow-yours.is-capped {
    color: var(--err);
  }
  .trow-similar {
    grid-column: 2 / -1;
  }
  /* placeholder cells: each grey line right-aligned in the column its figure will fill */
  .trow-meta.trow-skelmeta {
    display: contents;
  }
  .trow-skelmeta > span > .skel-line {
    margin-left: auto;
  }

  .lrow {
    padding-left: var(--s5);
  }
  .tokens-about {
    margin-top: var(--s8);
  }
}