/* token page styles (Binder). Theme variables only, see inject/theme.css. */
[data-sw-page="token"] { --tk-mono: var(--f-mono, var(--sw-mono)); --tk-display: var(--f-display, var(--sw-display)); --tk-body: var(--f-body, var(--sw-body)); }
[data-sw-page="token"] section { min-width: 0; }
.tk-inline { color: var(--red); font-weight: 700; }

/* ── top: status card + live numbers ────────────────── */
.tk-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (min-width: 960px) { .tk-top { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 28px; } }

.tk-status { display: flex; flex-direction: column; gap: 10px; }
.tk-status__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; }
.tk-label {
  font: 700 9.5px/1 var(--tk-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.tk-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: var(--cream-2);
  font: 700 9.5px/1 var(--tk-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.tk-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.tk-pill[data-state="soon"]::before { background: var(--gold); box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.3); }
.tk-pill[data-state="live"] { background: var(--red); color: var(--cream); }
.tk-pill[data-state="live"]::before { background: var(--cream); }
.tk-ca {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 64px;
  justify-content: center;
  padding: 12px;
  border: 1.5px dashed var(--ink);
  border-radius: 3px;
  background: var(--cream-2);
}
.tk-ca code {
  font: 700 12px/1.45 var(--tk-mono);
  color: var(--ink);
  word-break: break-all;
}
.tk-ca__none { font: 700 12.5px/1.5 var(--tk-mono); color: var(--ink); }
.tk-ca__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: var(--cream);
  box-shadow: 2px 2px 0 var(--ink);
}
.tk-kv > div { padding: 9px 11px; min-width: 0; }
.tk-kv > div:nth-child(odd) { border-right: 1px solid var(--paper-line); }
.tk-kv > div:nth-child(n + 3) { border-top: 1px solid var(--paper-line); }
.tk-kv dt { font: 700 9px/1.2 var(--tk-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.tk-kv dd { margin: 4px 0 0; font: 800 13px/1.25 var(--tk-mono); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tk-buy .tk-buy__btn { display: flex; width: 100%; justify-content: center; text-align: center; text-decoration: none; }
/* not launched: a readable "coming" state instead of a faded red button (white on faded magenta failed contrast) */
.tk-buy button.tk-buy__btn:disabled,
.tk-buy button.tk-buy__btn:disabled:hover {
  cursor: not-allowed;
  opacity: 1;
  background: var(--cream-2);
  color: var(--ink-soft);
  border: 1.5px dashed var(--ink);
  box-shadow: none;
  transform: none;
}
.tk-note { font: 400 12px/1.55 var(--tk-body); color: var(--ink-soft); padding: 0 2px; }

.tk-mini {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  font: 700 9.5px/1 var(--tk-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.tk-mini:hover { background: var(--cream-3); text-decoration: none; }

/* keyboard focus */
.tk-mini:focus-visible, .tk-copy:focus-visible, .tk-card:focus-visible, .tk-all:focus-visible,
.tk-live__links a:focus-visible, .tk-draw__name:focus-visible, a.tk-chip:focus-visible, .tk-inline:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.tk-live { min-width: 0; }
.tk-live__head, .tk-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.tk-sec-head { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--ink-faint); }
.tk-live__links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tk-live__links a {
  font: 700 10.5px/1.2 var(--tk-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.tk-live__links a:hover { text-decoration: underline; }
.tk-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.tk-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px 14px 15px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: var(--cream);
  box-shadow: 3px 3px 0 var(--ink);
}
.tk-tile--hot { background: var(--ink); color: var(--cream); }
.tk-tile__k { font: 700 9.5px/1.2 var(--tk-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.tk-tile--hot .tk-tile__k { color: var(--red-hot); }
.tk-tile__v {
  font-family: var(--tk-display);
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tk-tile__s { font: 600 10.5px/1.45 var(--tk-mono); letter-spacing: 0.04em; color: var(--ink-mute); min-height: 1.45em; }
.tk-tile--hot .tk-tile__s { color: var(--sw-mute); }
.tk-err {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1.5px solid var(--red);
  border-radius: 3px;
  font: 600 11px/1.6 var(--tk-mono);
  color: var(--red);
}
.tk-err[hidden] { display: none; }
.tk-skel {
  display: inline-block;
  width: 60%;
  height: 0.85em;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cream-2), var(--cream-3), var(--cream-2));
  background-size: 200% 100%;
  animation: tk-shimmer 1.3s linear infinite;
  vertical-align: middle;
}
.tk-tile--hot .tk-skel { background: linear-gradient(90deg, var(--sw-panel), var(--sw-panel-2), var(--sw-panel)); background-size: 200% 100%; }
@keyframes tk-shimmer { to { background-position: -200% 0; } }

/* ── vault section ──────────────────────────────────── */
.tk-vault {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
@media (min-width: 960px) { .tk-vault { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 36px; } .tk-cards { grid-template-columns: minmax(0, 1fr) !important; } }
.tk-h3--gap { margin-top: 22px; }
.tk-all {
  display: inline-block;
  margin-top: 12px;
  font: 700 10.5px/1.2 var(--tk-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.tk-all:hover { text-decoration: underline; }
.tk-all[hidden] { display: none; }
/* line the status card + tiles up with the sections below (they sit in a 1280px box inside the page gutter) */
@media (min-width: 640px) { section.tk-wrap { max-width: calc(1280px + 56px); } }
.tk-copy {
  margin-left: 4px;
  padding: 1px 5px;
  border: 1px solid var(--ink-faint);
  border-radius: 3px;
  background: transparent;
  font: 700 9px/1.3 var(--tk-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
}
.tk-copy:hover { border-color: var(--ink); color: var(--red); }
.tk-col { min-width: 0; }
.tk-h3 {
  margin-bottom: 10px;
  font: 800 11px/1.3 var(--tk-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.tk-h3 span { color: var(--ink-mute); }
.tk-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) { .tk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tk-card {
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: var(--cream);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.tk-card:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); text-decoration: none; }
.tk-card:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.tk-card__img, .tk-noimg {
  flex: none;
  width: 64px;
  height: 104px;
  object-fit: contain;
  border-radius: 3px;
  background: var(--cream-2);
}
.tk-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.tk-card__name { font: 800 13px/1.25 var(--tk-body); color: var(--ink); overflow-wrap: anywhere; }
.tk-card__meta {
  font: 600 10px/1.4 var(--tk-mono);
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tk-card__row { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tk-card__row b { font: 800 15px/1 var(--tk-display); letter-spacing: -0.01em; color: var(--ink); }
.tk-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
  border-radius: 3px;
  border: 1px solid var(--ink-faint);
  font: 700 9px/1.2 var(--tk-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  white-space: nowrap;
}
a.tk-chip:hover { border-color: var(--ink); color: var(--red); text-decoration: none; }
.tk-card .tk-chip { border-color: var(--red); color: var(--red); }

.tk-draws { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-faint); }
.tk-draw {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--ink-faint);
}
.tk-draw__img { width: 40px; height: 56px; object-fit: contain; border-radius: 2px; background: var(--cream-2); }
.tk-draw .tk-noimg { width: 40px; height: 56px; }
.tk-draw__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tk-draw__name { font: 800 13px/1.25 var(--tk-body); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.tk-draw__name:hover { color: var(--red); text-decoration: underline; }
.tk-draw__meta { font: 600 10px/1.4 var(--tk-mono); letter-spacing: 0.04em; color: var(--ink-mute); overflow-wrap: anywhere; }
.tk-draw__side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.tk-draw__side b { font: 800 14px/1 var(--tk-display); color: var(--ink); }
.tk-draw__side > span:not(.tk-chip) { font: 600 10px/1.2 var(--tk-mono); color: var(--ink-mute); white-space: nowrap; }

.tk-state {
  padding: 18px 14px;
  border: 1.5px dashed var(--ink-faint);
  border-radius: 4px;
  font: 600 11px/1.6 var(--tk-mono);
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  text-align: center;
  grid-column: 1 / -1;
  list-style: none;
}
.tk-draws .tk-state { margin-top: 10px; }
.tk-state--err { border-color: var(--red); color: var(--red); }
.tk-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--red);
  animation: tk-pulse 1s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes tk-pulse { 50% { opacity: 0.25; transform: scale(0.7); } }

@media (max-width: 420px) {
  .tk-tiles { gap: 8px; }
  .tk-tile { padding: 12px 11px 13px; }
  .tk-tile__s { font-size: 9.5px; }
  .tk-draw { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; }
  .tk-draw__img, .tk-draw .tk-noimg { width: 34px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-skel, .tk-dot { animation: none; }
  .tk-card { transition: none; }
}