/*
 * token.css — /token ($ICE) surface.
 *
 * Design language is lifted from the live-radio hero and /subscribe: same glassy
 * ICE panel, mono section labels, badge shell — so $ICE reads as part of ICEFAM,
 * not a bolted-on coin page. Recolored slightly cooler (icy blue) to match the
 * $ICE mark.
 *
 * Two hard rules that have bitten this codebase:
 *   1. Touch targets get min-width AND min-height: 44px. Never one axis.
 *   2. No bare `1fr` track: `1fr` is minmax(auto, 1fr) and a long token blows the
 *      column past the viewport. Always minmax(0, 1fr).
 */

.token-page {
  background: #04080f;
  color: #eaf2fb;
}

.token-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2.5rem) max(16px, 4vw) clamp(3rem, 8vw, 5rem);
}

.token-back {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.25rem;
  font: 600 0.76rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #a9c6e6;
}

.token-back:hover,
.token-back:focus-visible {
  color: #eaf2fb;
}

/* --- Hero (reuses .live-radio / .live-radio-badge) ------------------------ */

.token-hero-grid {
  display: grid;
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px), (pointer: fine) and (min-width: 560px) {
  .token-hero-grid {
    grid-template-columns: 128px minmax(0, 1fr);
  }
}

.token-mark {
  width: clamp(96px, 28vw, 128px);
  height: auto;
  border-radius: 22px;
  display: block;
}

.token-hero-copy {
  min-width: 0;
}

.token-hero h1 {
  margin: 0;
  font: 600 clamp(1.7rem, 5.5vw, 2.7rem)/1.06 "Instrument Serif", Georgia, serif;
  color: #f2f8ff;
}

.token-hero h1 em {
  font-style: italic;
  color: #9fc6f0;
}

.token-lede {
  margin: 0.75rem 0 0;
  max-width: 62ch;
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  line-height: 1.55;
  color: #cfe0f2;
}

/* --- CA gate: the loudest block on the page ------------------------------ */

.token-gate {
  margin-top: clamp(1.25rem, 4vw, 2rem);
  padding: clamp(1.1rem, 3.5vw, 1.75rem);
  border-radius: 20px;
  border: 1px solid rgba(126, 192, 245, 0.4);
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(126, 192, 245, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(11, 22, 38, 0.95), rgba(4, 8, 15, 0.97));
}

.token-gate-title {
  margin: 0 0 0.5rem;
  font: 600 clamp(1.2rem, 3.6vw, 1.7rem)/1.15 "Instrument Serif", Georgia, serif;
  color: #f2f8ff;
}

.token-gate-copy {
  margin: 0 0 0.75rem;
  max-width: 68ch;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #dceaf8;
}

.token-scam {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(245, 168, 126, 0.45);
  background: rgba(60, 30, 14, 0.4);
  font-size: 0.94rem;
  line-height: 1.6;
  color: #ffe7d6;
}

.token-scam strong {
  color: #ffd2b3;
}

/* On-chain verification table (filled only when a real mint verifies). */
.token-onchain {
  margin: 1rem 0 0;
  display: grid;
  gap: 0.4rem;
}

.token-onchain > div {
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(126, 192, 245, 0.14);
}

.token-onchain dt {
  font: 600 0.68rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9fc0e0;
}

.token-onchain dd {
  margin: 0;
  font: 500 0.9rem/1.5 "IBM Plex Mono", ui-monospace, monospace;
  color: #eaf2fb;
  overflow-wrap: anywhere;
}

.token-onchain-state {
  margin: 0.9rem 0 0;
  font: 500 0.86rem/1.6 "IBM Plex Mono", ui-monospace, monospace;
  color: #bcd4ee;
}

/* --- Risk: full weight, cool border to signal "stop and read". ----------- */

.token-risk {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(1.1rem, 3.5vw, 1.75rem);
  border-radius: 20px;
  border: 1px solid rgba(126, 192, 245, 0.28);
  background: linear-gradient(180deg, rgba(11, 22, 38, 0.92), rgba(4, 8, 15, 0.96));
}

.token-risk-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
}

.token-risk-list li {
  position: relative;
  min-width: 0;
  padding-left: 1.5rem;
  /* Deliberately body-size. Shrinking the risk copy is the dark pattern. */
  font-size: 0.95rem;
  line-height: 1.6;
  color: #eaf2fb;
  overflow-wrap: anywhere;
}

.token-risk-list li::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 0;
  font: 700 0.95rem/1.6 "Space Grotesk", system-ui, sans-serif;
  color: #7cc0f5;
}

/* --- Content blocks ------------------------------------------------------ */

.token-h2 {
  margin: 0 0 clamp(0.6rem, 2vw, 0.9rem);
  font: 600 clamp(1.2rem, 3.6vw, 1.7rem)/1.2 "Instrument Serif", Georgia, serif;
  color: #f2f8ff;
}

.token-block {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.token-note {
  margin: 0 0 0.9rem;
  max-width: 70ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #bcd4ee;
}

.token-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.token-list li {
  position: relative;
  min-width: 0;
  padding-left: 1.5rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: #dceaf8;
  overflow-wrap: anywhere;
}

.token-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: #7fa4c8;
}

.token-list-plan li::before {
  content: "›";
  color: #7cc0f5;
}

.token-list a,
.token-terms-copy a {
  color: #a9c6e6;
}

.token-terms-label {
  margin: 1.1rem 0 0.35rem;
  font: 600 0.72rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9fc0e0;
}

.token-terms-copy {
  margin: 0 0 0.6rem;
  max-width: 72ch;
  font-size: 0.94rem;
  line-height: 1.6;
  color: #eaf2fb;
}

.token-distinct {
  padding: clamp(1rem, 3vw, 1.5rem);
  border-radius: 18px;
  border: 1px solid rgba(126, 192, 245, 0.22);
  background: linear-gradient(180deg, rgba(11, 22, 38, 0.9), rgba(4, 8, 15, 0.95));
}

/* --- Foot ---------------------------------------------------------------- */

.token-foot {
  margin-top: clamp(2rem, 6vw, 3rem);
  padding-top: 1rem;
  border-top: 1px solid rgba(126, 192, 245, 0.14);
}

.token-foot p {
  margin: 0 0 0.5rem;
  font: 500 0.78rem/1.7 "IBM Plex Mono", ui-monospace, monospace;
  color: #bcd4ee;
}

.token-foot a {
  display: inline-block;
  min-height: 44px;
  min-width: 44px;
  line-height: 44px;
  color: #a9c6e6;
}

.token-foot-fine {
  max-width: 74ch;
  color: #89a6c4;
}

/* --- State machine: gated (default) vs live. Fail closed. ---------------- */

.token-page [data-when="live"] { display: none; }
.token-page[data-ice-state="live"] [data-when="live"] { display: block; }
.token-page[data-ice-state="live"] [data-when="gated"] { display: none; }

/* --- Wallet + payment (Deploy 2). Buttons: 44px on BOTH axes. ------------ */

.token-wallet-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.token-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 20px;
  border: 1px solid #2b6cb0;
  border-radius: 12px;
  background: #123a63;
  color: #eaf3ff;
  font: 600 1rem/1.1 "Space Grotesk", system-ui, sans-serif;
  cursor: pointer;
}

.token-btn:hover,
.token-btn:focus-visible {
  background: #1b4f85;
  outline: 2px solid #7fb3e6;
  outline-offset: 2px;
}

.token-btn-pay {
  border-color: #3a9d78;
  background: #123f33;
}

.token-wallet-addr {
  font: 600 0.95rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
  color: #bfe3ff;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(18, 58, 99, 0.4);
}

.token-wallet-balance {
  margin-top: 12px;
  font: 600 1.05rem/1.3 "IBM Plex Mono", ui-monospace, monospace;
  color: #eaf3ff;
}

.token-wallet-status {
  margin-top: 6px;
  color: #9fc0e3;
  min-height: 1.3em;
}

.token-pay {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(58, 157, 120, 0.4);
  border-radius: 14px;
  background: rgba(18, 63, 51, 0.25);
}

.token-pay-title {
  margin: 0 0 12px;
  font: 700 1.1rem/1.2 "Space Grotesk", system-ui, sans-serif;
  color: #eaf3ff;
}

.token-fee {
  margin-bottom: 14px;
}

.ice-fee-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #cfe3f6;
}

.ice-fee-total {
  border-bottom: none;
  font-weight: 700;
  color: #eaf3ff;
}

.ice-fee-note {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: #9fc0e3;
}

.token-pay-gate {
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: #f0c674;
}

.token-pay-tx {
  margin: 12px 0 0;
  font-size: 0.95rem;
  color: #cfe3f6;
}

.token-pay-tx a,
.token-verify-link a {
  color: #7fb3e6;
  min-height: 44px;
  min-width: 44px;
  display: inline-block;
}

/* --- Live market: chart embed + on-chain stats strip + trade links -------- */

.token-market {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(1.1rem, 3.5vw, 1.75rem);
  border-radius: 20px;
  border: 1px solid rgba(126, 192, 245, 0.28);
  background: linear-gradient(180deg, rgba(9, 20, 36, 0.94), rgba(4, 8, 15, 0.97));
}

.token-market-note {
  margin: 0.35rem 0 1.2rem;
  font: 500 0.9rem/1.6 "Space Grotesk", system-ui, sans-serif;
  color: #bcd4ee;
}

.token-market-note a {
  color: #7ec0f5;
}

/* Stats strip — flex wrap (not grid) so we never need a bare 1fr track. */
.token-stats {
  margin: 0 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.token-stats > div {
  flex: 1 1 150px;
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(126, 192, 245, 0.16);
  background: rgba(7, 16, 29, 0.6);
}

.token-stats dt {
  font: 600 0.62rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9fc0e0;
}

.token-stats dd {
  margin: 0;
  font: 600 0.98rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
  color: #eaf2fb;
  overflow-wrap: anywhere;
}

/* Custom canvas chart — themed to the site design system. */
.token-chart {
  margin: 0;
  border-radius: 16px;
  border: 1px solid rgba(126, 192, 245, 0.2);
  background: linear-gradient(180deg, rgba(9, 20, 36, 0.9), #06101d);
  padding: 0.75rem 0.75rem 0.55rem;
}

.token-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}

.token-chart-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.token-chart-last {
  font: 700 1.15rem/1 "IBM Plex Mono", ui-monospace, monospace;
  color: #eaf2fb;
  font-variant-numeric: tabular-nums;
}

.token-chart-chg {
  font: 600 0.82rem/1 "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.token-chart-chg.is-up { color: #5fe3b0; }
.token-chart-chg.is-down { color: #ff7a8a; }

.token-chart-tfs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(7, 16, 29, 0.7);
  border: 1px solid rgba(126, 192, 245, 0.14);
}

.token-tf {
  min-height: 30px;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #9fc0e0;
  font: 600 0.72rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.token-tf.is-active {
  background: linear-gradient(180deg, #a9dbff, #6bb6f2);
  color: #04121f;
}

.token-chart-plot {
  position: relative;
  width: 100%;
  height: clamp(220px, 42vw, 320px);
}

.token-chart-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.token-chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  padding: 1rem;
  font: 500 0.85rem/1.5 "Space Grotesk", system-ui, sans-serif;
  color: #93b3d4;
}

.token-chart-foot {
  margin-top: 0.4rem;
  font: 500 0.7rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.03em;
  color: #7ea6c8;
}
.token-chart-foot a { color: #7ec0f5; }

.token-trade {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.1rem;
}

.token-trade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 1.25rem;
  border-radius: 999px;
  font: 700 0.9rem/1 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #04121f;
  background: linear-gradient(180deg, #a9dbff, #6bb6f2);
  border: 1px solid rgba(126, 192, 245, 0.5);
}

.token-trade-btn:hover,
.token-trade-btn:focus-visible {
  background: linear-gradient(180deg, #c2e6ff, #86c6f7);
}

.token-trade-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.5rem;
  font: 600 0.82rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: #9fc0e0;
  text-decoration: none;
}

.token-trade-link:hover,
.token-trade-link:focus-visible {
  color: #eaf2fb;
}

.token-trade-fine {
  margin: 0.9rem 0 0;
  font: 500 0.78rem/1.6 "Space Grotesk", system-ui, sans-serif;
  color: #93b3d4;
}

/* --- Milestone drops: MC-tier ladder (fail-closed placeholders) ----------- */

.token-milestones {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(1.1rem, 3.5vw, 1.75rem);
  border-radius: 20px;
  border: 1px solid rgba(126, 192, 245, 0.28);
  background: linear-gradient(180deg, rgba(9, 20, 36, 0.94), rgba(4, 8, 15, 0.97));
}

.token-milestones-disclosure {
  margin: 0.35rem 0 1.1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(126, 192, 245, 0.24);
  background: rgba(7, 16, 29, 0.6);
  font: 500 0.86rem/1.6 "Space Grotesk", system-ui, sans-serif;
  color: #cfe1f4;
}

.token-milestones-mc {
  margin: 0 0 1.1rem;
  font: 500 0.95rem/1.5 "IBM Plex Mono", ui-monospace, monospace;
  color: #bcd4ee;
}

.token-milestones-mc strong {
  color: #eaf2fb;
}

.token-mc-label {
  font-size: 0.78rem;
  color: #93b3d4;
}

.token-tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.token-tier {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  padding: 0.8rem;
  border-radius: 14px;
  border: 1px solid rgba(126, 192, 245, 0.16);
  background: rgba(7, 16, 29, 0.55);
}

.token-tier[data-state="released"] {
  border-color: rgba(126, 192, 245, 0.5);
  background: rgba(11, 27, 46, 0.8);
}

.token-tier-cover {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0c2136, #06101d);
  border: 1px solid rgba(126, 192, 245, 0.2);
}

.token-tier-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.token-tier-cover.is-placeholder {
  filter: saturate(0.6);
}

.token-tier-num {
  font: 700 1.1rem/1 "EB Garamond", Georgia, serif;
  letter-spacing: 0.04em;
  color: #7ec0f5;
}

.token-tier-body {
  display: grid;
  gap: 0.3rem;
}

.token-tier-title {
  margin: 0;
  font: 600 0.98rem/1.3 "Space Grotesk", system-ui, sans-serif;
  color: #eaf2fb;
}

.token-tier-status {
  margin: 0;
  font: 500 0.82rem/1.5 "IBM Plex Mono", ui-monospace, monospace;
  color: #a9c6e6;
}

.token-tier[data-state="released"] .token-tier-status {
  color: #7ec0f5;
}

.token-tier-progress {
  height: 3px;
  border-radius: 2px;
  background: rgba(126, 192, 245, 0.16);
  overflow: hidden;
}

.token-tier-progress-fill {
  height: 100%;
  background: rgba(126, 192, 245, 0.55);
}

.token-tier-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  font: 700 0.85rem/1 "Space Grotesk", system-ui, sans-serif;
  color: #7ec0f5;
  text-decoration: none;
}

.token-tier-link:hover,
.token-tier-link:focus-visible {
  color: #cfe8ff;
}

.token-milestones-foot {
  margin: 1rem 0 0;
  font: 500 0.78rem/1.6 "Space Grotesk", system-ui, sans-serif;
  color: #93b3d4;
}

.token-milestones-foot a {
  color: #7ec0f5;
}

/* --- Live strip + reward distribution ------------------------------------- */
.token-live dd[data-live="chg"] { font-variant-numeric: tabular-nums; }

.token-rewards {
  margin-top: 1.4rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border-radius: 16px;
  border: 1px solid rgba(126, 192, 245, 0.24);
  background: rgba(7, 16, 29, 0.55);
}

.token-rewards-title {
  margin: 0 0 0.5rem;
  font: 700 1.05rem/1.2 "EB Garamond", Georgia, serif;
  color: #eaf2fb;
}

.token-rewards-copy {
  margin: 0 0 0.8rem;
  font: 500 0.92rem/1.6 "Space Grotesk", system-ui, sans-serif;
  color: #cfe1f4;
}

.token-rewards-copy a,
.token-rewards a { color: #7ec0f5; }

/* --- Gamified milestone tiers --------------------------------------------- */
.token-tier-titlerow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.token-tier-chip {
  font: 700 0.72rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: #04121f;
  background: linear-gradient(180deg, #a9dbff, #6bb6f2);
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
}

.token-tier-badge {
  font: 700 0.62rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  color: #7ec0f5;
  border: 1px solid rgba(126, 192, 245, 0.5);
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  animation: token-pulse 1.8s ease-in-out infinite;
}
.token-tier-badge.is-reached {
  color: #5fe3b0;
  border-color: rgba(95, 227, 176, 0.6);
  animation: none;
}

@keyframes token-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.token-tier.is-next {
  border-color: rgba(126, 192, 245, 0.6);
  background: linear-gradient(180deg, rgba(13, 32, 54, 0.85), rgba(7, 16, 29, 0.7));
  box-shadow: 0 0 0 1px rgba(126, 192, 245, 0.2), 0 0 22px rgba(107, 182, 242, 0.14);
}
.token-tier[data-state="reached"] {
  border-color: rgba(95, 227, 176, 0.4);
}

.token-tier-pct {
  margin: 0.3rem 0 0;
  font: 600 0.72rem/1.3 "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: #9fc0e0;
}

.token-tier-progress-fill {
  background: linear-gradient(90deg, rgba(126, 192, 245, 0.5), #7ec0f5);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.token-tier.is-next .token-tier-progress-fill {
  background: linear-gradient(90deg, #6bb6f2, #a9dbff);
  box-shadow: 0 0 10px rgba(126, 192, 245, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .token-tier-badge { animation: none; }
  .token-tier-progress-fill { transition: none; }
}

/* Ensure the empty-state overlay truly hides when there IS data (its display:flex
   otherwise beats the [hidden] attribute — the specificity trap). */
.token-chart-empty[hidden] { display: none; }