/* The token page (/token, js/orbtic/token.js): "Fuel, not a ticket". The orb holding the coin, Pump.fun's supply and fee
   table, and five fuel lines. Same night, ivory paper and brass as the rest of the site. */
/* the header's token button: beside Build an agent while the tabs show; inside the menu after that */
.hdr-token .pbtn-face { color: var(--accent); }
.hdr-token[aria-current="page"] .pbtn-face { color: var(--copper-300); }
.tk { padding-bottom: 96px; background: #0c0b0e; }
.tk p, .tk ul, .tk dl, .tk dd { margin: 0; }
.tk-head { padding-bottom: 24px; }
.tk-head-in { display: grid; grid-template-columns: minmax(0, 1fr) 448px; gap: 24px; align-items: center; }
.tk-head-l { display: grid; gap: 16px; min-width: 0; }
.tk-h1 { margin: 24px 0 0; font: 400 var(--fs-display)/1 var(--font-heading); color: var(--text); text-wrap: balance; }
.tk-lede { max-width: 720px; color: var(--text-2); text-wrap: pretty; }
/* the orb, 1:1 on the kit's grid; its 720 px cell has empty margins, cropped here so it fills the column */
.tk-orb { display: block; width: 720px; max-width: none; height: 720px; margin: -116px -136px -76px; image-rendering: pixelated; user-select: none; animation: tk-bob 2.4s steps(4, end) infinite alternate; }
@keyframes tk-bob { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .tk-orb { animation: none; } }
.tk-muted { color: var(--text-2); }
.tk-kind { color: var(--accent); text-transform: uppercase; }
.tk-sec { padding-block: 48px 0; }
.tk-sec-h { display: grid; gap: 10px; max-width: 800px; margin-bottom: 28px; }
.tk-sec-h h2 { margin: 0; }
.tk-sec-h p { text-wrap: pretty; }

/* the supply: one bar cut three ways, the three buttons, and the paper for the one you picked */
.tk-vehicle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px 24px; align-items: start; padding: 24px; background: var(--surface); clip-path: var(--px-notch); }
.tk-stack { grid-column: 1 / -1; display: flex; gap: 4px; height: 24px; }
.tk-stack i { display: block; min-width: 8px; background: var(--stone-500); }
.tk-stack i.is-on { background: var(--copper-300); }
.tk-stages { display: grid; gap: 8px; }
.tk-stage { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px; border: 0; background: var(--surface-2); color: var(--text-2); font: inherit; text-align: left; text-transform: uppercase; cursor: pointer; clip-path: var(--px-notch); }
.tk-stage b { font: 400 var(--fs-alt-lg)/1 var(--font-body-alt); color: var(--text); }
.tk-stage.is-on { background: var(--surface-hover); color: var(--text); box-shadow: inset 4px 0 0 var(--copper-300); }
.tk-stage:focus-visible { outline: 2px solid var(--copper-300); outline-offset: 2px; }
@media (hover: hover) { .tk-stage:hover { color: var(--text); } }

.tk-paper { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 24px; background: #fefaee var(--binary-ivory); color: var(--surface); clip-path: var(--px-notch); }
.tk-paper-k { color: #8a6a35; text-transform: uppercase; }
.tk-big { font: 400 var(--fs-h-xl)/1 var(--font-heading); color: #171614; }
.tk-big span { font-size: var(--fs-h-sm); margin-left: 4px; color: #8a6a35; }
.tk-paper-b { color: var(--stone-600); text-wrap: pretty; }
.tk-kv { display: grid; }
.tk-kv > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 9px 0; border-bottom: 2px dashed var(--stone-300); }
.tk-kv > div:last-child { border-bottom: 0; }
.tk-kv dt { color: var(--stone-500); }
.tk-kv dd { color: var(--stone-600); text-align: right; }
.tk-kv dd b { font-weight: 400; color: #171614; }

/* the fee table you can slide through */
.tk-fees { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: stretch; padding: 24px; background: var(--surface); clip-path: var(--px-notch); }
.tk-fees-l { display: grid; align-content: start; gap: 16px; min-width: 0; }
.tk-slide { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 12px; color: var(--text-3); text-transform: uppercase; }
.tk-slide input { width: 100%; min-width: 0; accent-color: var(--copper-500); }
.tk-slide b { min-width: 176px; font: 400 var(--fs-alt-sm)/1.2 var(--font-body-alt); color: var(--accent); text-align: right; text-transform: none; }
.tk-steps { display: flex; align-items: flex-end; gap: 3px; height: 96px; padding-bottom: 4px; border-bottom: 2px solid var(--stone-600); }
.tk-steps i { display: block; flex: 1 1 0; min-width: 0; background: var(--stone-600); }
.tk-steps i.is-on { background: var(--copper-300); }
.tk-steps-k { margin-top: -8px !important; color: var(--text-3); text-transform: uppercase; }
.tk-rcpt { display: grid; padding: 0; list-style: none; color: var(--stone-600); }
.tk-rcpt li { display: grid; grid-template-columns: auto minmax(12px, 1fr) auto 64px; align-items: baseline; gap: 8px; padding: 9px 0; }
.tk-rcpt i { height: 0; border-bottom: 2px dotted var(--stone-300); }
.tk-rcpt b { font-weight: 400; color: #171614; font-variant-numeric: tabular-nums; }
.tk-rcpt em { font-style: normal; color: var(--stone-500); text-align: right; }
.tk-rcpt .is-sub { padding-left: 16px; }
.tk-rcpt .is-mine { margin-top: 8px; padding: 12px 10px; background: var(--stone-200); box-shadow: inset 3px 0 0 #8a6a35; }
.tk-rcpt .is-mine span, .tk-rcpt .is-mine b { color: #171614; }
.tk-src { margin-top: 12px !important; max-width: 860px; }

/* the fuel lines */
.tk-feed { display: grid; padding: 24px; background: var(--surface); clip-path: var(--px-notch); }
.tk-pipes { display: block; width: 100%; height: 68px; image-rendering: pixelated; }
.tk-lines { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 0; list-style: none; }
.tk-line { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 16px; background: var(--surface-2); clip-path: var(--px-notch); }
.tk-amt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tk-amt b { font: 400 var(--fs-h-2xs)/1 var(--font-heading); color: var(--accent); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tk-amt span { color: var(--text-3); }
.tk-who { display: flex; align-items: center; gap: 10px; }
.tk-who img { flex: none; width: 56px; height: 56px; image-rendering: pixelated; }
.tk-who p { display: grid; gap: 2px; min-width: 0; }
.tk-who .t-cap-sm { color: var(--text-3); text-transform: uppercase; }
.tk-who b { font-weight: 400; color: var(--text); }
.tk-after { max-width: 860px; margin-top: 20px !important; text-wrap: pretty; }

/* why it isn't a ticket, and the rules for launch */
.tk-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.tk-notlist { display: grid; gap: 16px; padding: 0; list-style: none; }
.tk-notlist li { display: grid; gap: 4px; padding-left: 16px; box-shadow: inset 4px 0 0 var(--accent); }
.tk-notlist b { font-weight: 400; color: var(--text); }
.tk-kv dt .tk-tick { display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: #8a6a35; vertical-align: 1px; }
/* the addresses: each whole address is a button */
.tk-addrs { gap: 16px; max-width: 860px; }
.tk-addr-row { display: grid; gap: 6px; }
.tk-addr { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; border: 0; background: #171614; color: var(--text); font: inherit; text-align: left; clip-path: var(--px-notch); }
button.tk-addr { cursor: pointer; }
.tk-addr code { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--fs-alt-sm); }
.tk-addr .t-cap-sm { flex: none; color: var(--accent); text-transform: uppercase; }
.tk-addr.is-copied .t-cap-sm { color: var(--copper-300); }
button.tk-addr:focus-visible { outline: 2px solid #8a6a35; outline-offset: 2px; }
@media (hover: hover) { button.tk-addr:hover { background: var(--surface-hover); } }
.tk-addr--none { margin: 0; background: var(--stone-200); color: #8a4a2e; }
.tk-warn { padding: 8px 10px; background: var(--stone-200); color: var(--stone-600); box-shadow: inset 3px 0 0 #8a4a2e; }

.tk-last { display: grid; gap: 24px; }
.tk-acts { display: flex; flex-wrap: wrap; gap: 16px; }
.tk-credit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tk-credit .t-cap-sm { color: var(--text-3); text-transform: uppercase; }
.tk-credit code { overflow-wrap: anywhere; color: var(--text-2); font-family: var(--font-mono); }
.tk-fine { max-width: 860px; color: var(--text-3); text-wrap: pretty; }

@media (max-width: 1100px) {
  .tk-head-in { grid-template-columns: minmax(0, 1fr); }
  .tk-orb { justify-self: center; margin: -116px auto -76px; }
  .tk-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-pipes { display: none; }
  .tk-fees { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .tk-h1 { margin-top: 16px; font-size: var(--fs-h-xl); }
  /* half size: every 4 px art pixel becomes exactly 2 */
  .tk-orb { width: 360px; height: 360px; margin: -58px auto -38px; }
  .tk-vehicle, .tk-feed, .tk-fees { padding: 16px; }
  .tk-vehicle, .tk-two { grid-template-columns: minmax(0, 1fr); }
  .tk-lines { grid-template-columns: minmax(0, 1fr); }
  .tk-slide { grid-template-columns: minmax(0, 1fr) auto; }
  .tk-slide input { grid-column: 1 / -1; grid-row: 2; }
  .tk-slide b { min-width: 0; }
  .tk-rcpt li { grid-template-columns: minmax(0, 1fr) auto 56px; }
  .tk-rcpt i { display: none; }
}
@media (max-width: 1023px) { .hdr-token { display: none; } }