/* /t/<id> (js/pages/token.js): one token. Its art big on a grey plate, sticky on a desktop, with ‹ 12 of 37 › under
   it to step through the drop; beside it the drop and who runs it, the name, the price and Mint, who holds it,
   the traits with how many of the 100 share each, and the links. */
.token-page { padding-top: var(--page-top); }
.token-page .tk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: 64px; align-items: start; }
.token-page .tk-art { position: sticky; top: 76px; min-width: 0; display: grid; justify-items: center; }
/* Room under the plate for the steps, so both fit on a desktop screen. */
.token-page .tk-frame { width: min(100%, calc(100svh - 210px)); min-width: min(100%, 420px); aspect-ratio: 1; padding: 14px; background: var(--tint); border-radius: var(--radius);
  touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; }
/* js/cards.js fitArt sizes the canvas to whole screen pixels per art pixel; the white shows around it. */
.token-page .tk-pic { width: 100%; height: 100%; display: grid; place-items: center; background: #fff; border-radius: 16px; overflow: hidden; }
.token-page .tk-pic canvas.art { width: 100%; }

/* ‹ 12 of 37 › */
.token-page .tk-step { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.token-page .tk-step button { width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.token-page .tk-step button[aria-disabled=true] { opacity: .35; cursor: default; background: var(--tint); }
.token-page .tk-step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (pointer: coarse) { .token-page .tk-step button { width: 44px; height: 44px; } }
.token-page .tk-at { min-width: 6.5em; font-size: 15px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }

.token-page .tk-side { min-width: 0; padding-top: 12px; }
.token-page .eyebrow { margin-bottom: 10px; }
.token-page .eyebrow a { color: var(--ink); text-decoration: none; }
.token-page .eyebrow .tk-drop { font-weight: 500; }
.token-page .eyebrow a:hover { text-decoration: underline; }
.token-page .tk-by { overflow-wrap: anywhere; }
.token-page h1 { margin: 0; overflow-wrap: anywhere; }
.token-page .tk-id { margin: 10px 0 0; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* The price, bold dollars then the ETH muted, how many are left, and Mint. */
.token-page .tk-buy { margin-top: 28px; }
.token-page .tk-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.token-page .tk-price b { font-size: 32px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.token-page .tk-price span { font-size: 17px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.token-page .tk-price span:first-child { font-size: 32px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); } /* ETH alone, with no dollar rate */
.token-page .tk-price .tk-left { margin-left: auto; font-size: 15px; }
.token-page .tk-mint { display: block; width: 100%; margin-top: 16px; text-align: center; }

.token-page .tk-rows { margin: 32px 0 0; }
.token-page .tk-rows + .tk-rows { margin-top: 24px; }
.token-page .tk-rows div { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--tint-2); font-size: 15px; }
.token-page .tk-rows dt { flex: 1; min-width: 0; color: var(--muted); }
.token-page .tk-rows dd { margin: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.token-page .tk-rows dd a { color: var(--ink); }
.token-page .tk-rows .tk-n { min-width: 4.6em; font-size: 13px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.token-page .tk-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }

/* While it loads. */
.token-page .tk-skel { display: block; width: 40%; height: 16px; margin-top: 16px; border-radius: 8px; background: var(--tint-2); animation: pulse 1.2s ease-in-out infinite; }
.token-page .tk-skel-h { width: 80%; height: 52px; border-radius: 14px; }
.token-page dd .tk-skel { display: inline-block; width: 7.5em; height: 14px; margin: 0; vertical-align: -2px; }

@media (max-width: 980px) {
  .token-page .tk { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .token-page .tk-art { position: static; }
  .token-page .tk-frame { width: 100%; min-width: 0; }
  .token-page .tk-side { padding-top: 32px; }
}
@media (max-width: 640px) {
  .token-page .tk-frame { padding: 10px; border-radius: 18px; }
  .token-page .tk-pic { border-radius: 12px; }
  .token-page .tk-step { margin-top: 10px; }
  .token-page .tk-side { padding-top: 24px; }
  .token-page .tk-price b { font-size: 28px; }
  .token-page .tk-price span:first-child { font-size: 28px; }
}

/* Last, so it wins over the display each part sets above. */
.token-page [hidden] { display: none; }