/* ============================================================
   SECTION: TOKEN — $ROBI buyback flywheel as the higgsfield
   "SUPERCOMPUTER" stage: one glowing dark-green panel on black,
   perspective grid floor, floating glass cards, cursor chips,
   huge lime display title, white pill CTA.
   ============================================================ */

/* dark panel on black: side + bottom gutters so the glow reads
   against the page, then the lime footer follows */
.sec-token { padding: 28px 14px 14px; }

.token-field {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: 24px;
  /* CSS-art interior: lime haze top, green hall centre, dark pit below */
  background:
    radial-gradient(68% 54% at 50% 36%, rgba(96, 172, 34, 0.5), transparent 72%),
    radial-gradient(130% 90% at 50% -12%, rgba(209, 254, 23, 0.24), transparent 56%),
    linear-gradient(180deg, #0B1D07 0%, #10290B 40%, #0B2108 72%, #071504 100%);
  /* lime rim bloom: thin core line + wide soft spill, inside and out */
  box-shadow:
    0 0 0 1px rgba(209, 254, 23, 0.72),
    0 0 18px rgba(209, 254, 23, 0.45),
    0 0 90px rgba(209, 254, 23, 0.26),
    inset 0 0 4px rgba(209, 254, 23, 0.8),
    inset 0 0 42px rgba(209, 254, 23, 0.34),
    inset 0 0 150px rgba(209, 254, 23, 0.10);
}
/* corner vignette above the grids, below the content */
.token-field::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(105% 105% at 50% 46%, transparent 52%, rgba(3, 9, 2, 0.55) 100%);
  pointer-events: none;
}

/* back-wall grid: faint, fades out before mid-height */
.token-wall {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(209, 254, 23, 0.07) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, rgba(209, 254, 23, 0.055) 0 1px, transparent 1px 62px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 60%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 60%);
  pointer-events: none;
}
/* perspective floor grid */
.token-floor {
  position: absolute; left: -18%; right: -18%; bottom: -7%; height: 64%;
  background:
    repeating-linear-gradient(90deg, rgba(209, 254, 23, 0.21) 0 1px, transparent 1px 86px),
    repeating-linear-gradient(0deg, rgba(209, 254, 23, 0.15) 0 1px, transparent 1px 60px);
  transform: perspective(740px) rotateX(55deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9) 32%, transparent 97%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9) 32%, transparent 97%);
  pointer-events: none;
}

.token-inner {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: var(--content-max);
  margin-inline: auto;
  padding: 18px 18px 16px;
}
@media (min-width: 1101px) {
  .token-field { min-height: 690px; }
}

/* ---------- head strip ---------- */
.token-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.token-kicker,
.token-meta {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(209, 254, 23, 0.62);
}
.token-meta { display: flex; align-items: center; gap: 8px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); }
.token-meta-sep { color: rgba(255, 255, 255, 0.28); }
.token-meta-tge {
  background: var(--accent); color: var(--accent-text-on);
  border-radius: var(--radius-badge);
  padding: 3px 8px; letter-spacing: 0.06em; font-weight: 700;
}

/* preview notice: read before the numbers, not after them */
.token-notice {
  margin: 0 auto;
  max-width: 640px;
  padding: 7px 13px;
  border: 1px solid rgba(209, 254, 23, 0.16);
  border-radius: var(--radius-card);
  background: rgba(7, 15, 5, 0.38);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px; line-height: 1.5;
  text-align: center;
}
.token-notice b { font-weight: 700; color: var(--text-primary); }
.token-notice a { text-decoration: underline; color: inherit; }
.token-notice a:hover { color: var(--accent); }

/* ---------- centre column: cluster / title / sub / cta ---------- */
.token-center {
  text-align: center;
  margin-top: clamp(10px, 3.5vh, 38px);
}

/* the flywheel as an app-icon cluster — steps of the loop as tiles,
   $ROBI brand tile in the middle (echoes the reference icon row) */
.token-cluster {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.45));
}
.token-app {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--inset-highlight);
}
.token-app svg { width: 27px; height: 27px; }
/* CMS: an admin-uploaded image replaces the built-in icon, filling the tile */
.token-app img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.token-app-prompts {
  background: linear-gradient(160deg, #22370F, #0F1B07);
  color: #D3EC8E;
  transform: rotate(-9deg) translateY(6px);
  margin-right: -9px; z-index: 1;
}
.token-app-runs {
  width: 72px; height: 72px;
  background: linear-gradient(160deg, #123326, #081810);
  color: #7FD9AC;
  transform: rotate(4deg) translateY(1px);
  margin-right: -9px; z-index: 2;
}
.token-app-core {
  width: 92px; height: 92px;
  border-radius: 23px;
  background: var(--accent);
  color: var(--accent-text-on);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 16px 40px rgba(209, 254, 23, 0.35), var(--inset-highlight);
  transform: rotate(-3deg);
  z-index: 3;
}
.token-app-core svg { width: 46px; height: 46px; }
.token-app-buyback {
  width: 72px; height: 72px;
  background: linear-gradient(160deg, #27350C, #121A05);
  color: var(--accent);
  transform: rotate(6deg) translateY(2px);
  margin-left: -9px; z-index: 2;
}
.token-app-burn {
  background: linear-gradient(160deg, #38101B, #1B080E);
  color: #FF7BA6;
  transform: rotate(-5deg) translateY(7px);
  margin-left: -9px; z-index: 1;
}

.token-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4.2vw, 64px); line-height: 0.98;
  letter-spacing: var(--ls-display); text-transform: uppercase;
  color: var(--accent);
}
.token-sub {
  margin: 8px auto 0; max-width: 520px;
  font-size: 14.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.token-cta {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  margin-top: 16px;
}
/* the reference CTA: white pill, dark text */
.token-cta-main {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 22px;
  border-radius: var(--radius-card);
  background: var(--text-primary); color: var(--accent-text-on);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
  transition: transform var(--dur-med) var(--ease-pop), filter var(--dur-fast) var(--ease-ui);
}
.token-cta-main:hover { transform: translateY(-1px); filter: brightness(1.05); }
.token-cta-main:active { transform: scale(0.97); }
.token-cta-main:focus-visible { outline: none; box-shadow: var(--ring-accent); }

.token-addr {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 14px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono); font-size: var(--fs-meta);
}
.token-addr svg { width: 13px; height: 13px; flex: none; }
/* no contract exists yet: the pill states that, it does not pretend to be copyable */
.token-addr-pending { cursor: default; }

/* rotating one-liner for the active loop step (driven by token.js) */
.token-step {
  min-height: 34px; max-width: 540px;
  margin: 14px auto 0;
  font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}
.token-step.is-swap { animation: token-step-in var(--dur-med) var(--ease-ui); }
@keyframes token-step-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------- floating glass cards ---------- */
/* desktop: absolute against the panel (wrapper is display:contents);
   the wrapper only becomes a real grid under 1100px */
.token-cardrow { display: contents; }

.token-panel {
  background: linear-gradient(165deg, rgba(24, 36, 16, 0.94), rgba(9, 16, 7, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-card-lg);
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.45), var(--inset-highlight);
  padding: 14px;
}
@media (min-width: 1101px) {
  .token-panel { position: absolute; z-index: 2; }
  .token-panel-left  { left: 22px; top: 132px; width: 300px; }
  .token-panel-right { right: 22px; top: 128px; width: 294px; }
  .token-panel-loop  { right: 96px; bottom: -18px; width: 276px; }
}

.token-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.token-panel-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: var(--fw-card-title);
  text-transform: uppercase; letter-spacing: var(--ls-display);
  color: var(--text-primary);
}
.token-panel-title svg { width: 13px; height: 13px; flex: none; color: rgba(209, 254, 23, 0.75); }

.token-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--accent);
}
.token-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* a simulation must not wear the live badge's clothes: no lime, no pulse */
.token-live.token-sim { color: var(--text-muted); }
.token-live.token-sim i { background: var(--text-faint); animation: none; }

/* inline "modeled" / "planned" qualifiers on stat rows */
.token-row-k i {
  font-style: normal;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-left: 6px;
}

.token-take {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 10px;
  background: var(--accent-08);
  border-radius: var(--radius-card);
}
.token-take-val {
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px; line-height: 1; letter-spacing: var(--ls-display);
  color: var(--accent);
}
.token-take-label { font-size: var(--fs-meta); line-height: 1.35; color: var(--text-secondary); }

.token-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--bg-white-5);
  font-size: 13px;
}
.token-row-k { color: var(--text-muted); }
.token-row-v { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); }
.token-buy { color: var(--accent); }
.token-apr { color: var(--accent); }

.token-epoch { margin-top: 10px; }
.token-epoch-top {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 5px;
}
.token-epoch-bar {
  height: 4px; border-radius: var(--radius-pill);
  background: var(--bg-white-10); overflow: hidden;
}
.token-epoch-fill {
  display: block; height: 100%; width: 34%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-glide);
}

.token-feed-note {
  margin: 12px 0 6px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint);
}
.token-feed { list-style: none; display: grid; gap: 4px; }
.token-feed li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: rgba(5, 9, 4, 0.72);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary);
  animation: token-feed-in var(--dur-med) var(--ease-pop);
}
@keyframes token-feed-in { from { opacity: 0; transform: translateY(-6px); } }
.token-feed-tag {
  color: var(--accent-text-on); background: var(--accent);
  border-radius: var(--radius-badge);
  padding: 1px 5px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.token-feed-burn { background: var(--hot-pink); color: #fff; }
.token-feed-amt { color: var(--text-primary); }
.token-feed-tx { margin-left: auto; color: var(--text-faint); }

/* ---------- treasury split donut ---------- */
.token-split { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.token-donut {
  position: relative; flex: none;
  width: 84px; height: 84px; border-radius: 50%;
  background: conic-gradient(var(--accent) 0 60%, var(--hot-pink) 60% 100%);
  display: grid; place-items: center;
}
.token-donut::after {
  content: ""; position: absolute; inset: 12px;
  border-radius: 50%; background: #111D0C;
}
/* CMS: an admin-uploaded chart image replaces the CSS donut */
.token-donut.has-img { background: none; }
.token-donut.has-img::after { display: none; }
.token-donut.has-img .token-donut-mid { display: none; }
.token-donut img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.token-donut-mid {
  position: relative; z-index: 1; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: var(--ls-display); color: var(--text-primary);
}
.token-donut-mid i {
  display: block; font-style: normal;
  font-family: var(--font-mono); font-size: 9px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint);
}
.token-legend { list-style: none; display: grid; gap: 8px; font-size: var(--fs-meta); }
.token-legend li {
  display: grid; grid-template-columns: 8px auto 1fr;
  align-items: center; gap: 6px;
  color: var(--text-muted);
}
.token-legend b { color: var(--text-primary); font-family: var(--font-mono); font-weight: 500; }
.token-legend span {
  grid-column: 2 / -1;
  font-size: 11px; color: var(--text-faint);
}
.token-legend .token-legend-lab {
  grid-column: auto;
  font-size: inherit; color: inherit;
}
.token-legend i { width: 8px; height: 8px; border-radius: 2px; }
.token-dot-burn { background: var(--accent); }
.token-dot-stake { background: var(--hot-pink); }
.token-stake { width: 100%; margin-top: 10px; }

/* ---------- demand loop card (the "Production" card of the stage) ---------- */
.token-loop-count {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint);
}
.token-loop-steps {
  list-style: none;
  counter-reset: token-loop;
  display: grid; gap: 5px;
}
.token-node {
  counter-increment: token-loop;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: background-color var(--dur-med) var(--ease-ui),
              color var(--dur-med) var(--ease-ui),
              transform var(--dur-med) var(--ease-pop);
}
.token-node::before {
  content: counter(token-loop);
  display: grid; place-items: center;
  width: 15px; height: 15px;
  border-radius: 4px;
  background: rgba(209, 254, 23, 0.10);
  font-size: 9px; font-weight: 700;
  color: rgba(209, 254, 23, 0.65);
  transition: background-color var(--dur-med) var(--ease-ui), color var(--dur-med) var(--ease-ui);
}
.token-node.is-active {
  background: rgba(209, 254, 23, 0.15);
  color: var(--accent);
  transform: translateX(3px);
}
.token-node.is-active::before {
  background: var(--accent);
  color: var(--accent-text-on);
}

/* ---------- floating cursor chips ---------- */
.token-tip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 11.5px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  pointer-events: none;
}
.token-tip svg { width: 13px; height: 13px; flex: none; margin-left: -3px; }
.token-tip-a {
  background: var(--text-primary); color: var(--accent-text-on);
  right: 352px; top: 170px;
  animation: token-float 5s var(--ease-ui) infinite;
}
.token-tip-b {
  background: var(--accent); color: var(--accent-text-on);
  right: 186px; top: 424px;
  animation: token-float 5s var(--ease-ui) 1.6s infinite;
}
@keyframes token-float { 50% { transform: translateY(-7px); } }

/* ---------- stats strip: pinned to the panel floor, clear of the loop card ---------- */
.token-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: auto;
  padding-top: 18px;
  max-width: calc(100% - 420px);
}
.token-stat {
  background: rgba(5, 11, 4, 0.55);
  border: 1px solid rgba(209, 254, 23, 0.10);
  border-radius: var(--radius-card);
  padding: 10px 12px;
  box-shadow: var(--inset-highlight-soft);
}
.token-stat-v {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1.1; letter-spacing: var(--ls-display);
  color: var(--text-primary);
}
.token-stat-k {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.48);
}

.token-legal {
  margin-top: 10px;
  max-width: calc(100% - 420px);
  font-size: 11px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.42);
}
.token-legal a { text-decoration: underline; }
.token-legal a:hover { color: var(--accent); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .token-cardrow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin-top: 20px;
  }
  .token-panel-loop { grid-column: 1 / -1; }
  /* equal-height card pair: pin the staking CTA to the card floor */
  .token-panel { display: flex; flex-direction: column; }
  .token-panel .token-stake { margin-top: auto; }
  .token-tip { display: none; }
  .token-stats, .token-legal { max-width: none; }
  .token-stats { grid-template-columns: repeat(2, 1fr); margin-top: 20px; }
}
@media (max-width: 760px) {
  .sec-token { padding: 20px 8px 8px; }
  .token-field { border-radius: var(--radius-card-lg); }
  .token-inner { padding: 14px 12px 12px; }
  .token-cardrow { grid-template-columns: minmax(0, 1fr); }
  .token-head { gap: 6px; }
  .token-meta { font-size: 10px; }
  .token-notice { font-size: 12px; text-align: left; }
  .token-app { width: 48px; height: 48px; border-radius: 13px; }
  .token-app svg { width: 21px; height: 21px; }
  .token-app-runs, .token-app-buyback { width: 55px; height: 55px; }
  .token-app-core { width: 70px; height: 70px; border-radius: 18px; }
  .token-app-core svg { width: 34px; height: 34px; }
}
@media (max-width: 480px) {
  .token-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .token-tip,
  .token-step,
  .token-feed li { animation: none; }
  .token-node.is-active { transform: none; }
}