/* token-bond.css — the BONDING slot of the token header (founder 08 Oct: "I like C" — the design lane's concept C,
   shipped for every token). Painted by token-bond.js from the page's own numbers (#bPct, #bSol, the raise line) and
   state (body.bonded, TOKEN.status, TOKEN.migratedAt, html.pool-rh). Founder: no word GRADUATED; the bar goes a few
   minutes after graduation and a small "Trading on [mark] Meteora" takes its place; blocks as the bar.

   The slot is ONE fixed box in every state at every width (founder 07–08 Oct: the header never jumps between tokens or
   states): 20 px tall, two rows (a 12 px text row, a 5 px bar row of 20 blocks) or, once the bar has gone, one centred
   venue line.

   States (data-st on .tb):
     bonding    the blocks fill, one block = 5%; the block filling now blinks; "24.6 SOL to go"
     near       90% and up: ALMOST THERE, the label and figure gold, the empty blocks blink gold
     migrating  the pool crossed the line and the move to the DEX is running: "Moving to [mark] Meteora…", a gold scan
     fresh      graduated under GRAD_BAR_MS (5 min) ago: the full bar, gold, "85 / 85 SOL · [mark] Meteora"
     venue      graduated longer ago (or no time known): "Trading on [mark] Meteora" (Uniswap on Robinhood / Arc), linked
                where the page's dex icon links
   Colours: the mode channel (--mode: green, orange on TEK) for the fill, --gold for fresh / near / migrating, --g4 empty. */

/* the page's own two rows stay in the DOM, hidden (the phone INFO strip reads #bPct back); .tb replaces them */
.lwrap > .thdr .hbond-wrap > .hbond-top,
.lwrap > .thdr .hbond-wrap > .hbond-track{display:none}
.lwrap > .thdr .hbond-wrap{height:20px;min-height:20px;max-height:20px;display:block;position:relative;gap:0;padding:0;overflow:hidden}
.tb{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between}
.tb-top{display:flex;align-items:baseline;gap:5px;height:12px;line-height:12px;min-width:0;white-space:nowrap}
.tb-lbl{font-family:var(--mono);font-size:6px;letter-spacing:.12em;color:var(--g6);text-transform:uppercase;flex:none}
.tb-pct{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--mode,var(--grn));line-height:1;flex:none}
.tb-sub{font-family:var(--mono);font-size:7px;color:var(--g6);margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;gap:3px}
.tb-sub b{color:var(--txt);font-weight:400}
.tb-sub img{height:9px;width:auto;display:block;opacity:.92}
.tb-sub .tb-dot{color:var(--g5)}
.tb-frac{display:inline-flex;align-items:center;gap:3px}
/* the bar's width: the header's own grid gives the slot 180 px on the one-row desktop and 132 px on phones; on the two-row
   laptop layout (1100–1499) the slot is the rest of the row, which turned the blocks into slabs — the same 240 px cap on
   every token, flush right where the bar sits today */
@media (min-width:1100px) and (max-width:1499px){
  .lwrap > .thdr .hbond-wrap{max-width:240px;width:240px;justify-self:end}
}
/* phones: the 132 px slot has room for the figure and the raise, not the caption too (it clipped the raise today);
   once graduated the spent fraction goes, the venue stays */
@media (max-width:1099px){
  .tb-lbl{display:none}
  .tb[data-st="fresh"] .tb-frac{display:none}
}
/* the bar row */
.tb-bar{height:5px;position:relative}
/* twenty blocks, each 5%. Square-ish: 5 px tall, flex-grown to the slot (7 px on the 180 px desktop column,
   4.7 px on the 132 px phone column), 2 px apart, like the 4.4/0.5 grid of the CALL / PnL / ANALYTICS marks. */
.tb-blocks{display:grid;grid-template-columns:repeat(20,1fr);gap:2px;height:5px}
.tb-blk{background:var(--g4);display:block;height:5px;transition:background .25s,opacity .25s}
.tb-blk.on{background:var(--mode,var(--grn))}
.tb-blk.live{background:var(--mode,var(--grn));opacity:.45;animation:tbLive 1.2s ease-in-out infinite}   /* the block filling now */
@keyframes tbLive{0%,100%{opacity:.25}50%{opacity:.75}}
/* the venue line (after the bar has gone) */
.tb-venue{position:absolute;inset:0;display:none;align-items:center;gap:5px;font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--g6);text-decoration:none;white-space:nowrap;min-width:0;overflow:hidden}
.tb-venue img{height:11px;width:auto;display:block;opacity:.92;flex:none}
.tb-venue b{color:var(--txt);font-weight:400}
a.tb-venue:hover b{color:#fff}
a.tb-venue:focus-visible{outline:1px solid var(--grn);outline-offset:2px}
.tb[data-st="venue"] > .tb-top,.tb[data-st="venue"] > .tb-bar{visibility:hidden}
.tb[data-st="venue"] > .tb-venue{display:flex}
/* fresh: just graduated, the full bar in gold for GRAD_BAR_MS (5 min, token-bond.js), the venue in the raise slot */
.tb[data-st="fresh"] .tb-lbl{display:none}
.tb[data-st="fresh"] .tb-pct{color:var(--gold)}
.tb[data-st="fresh"] .tb-blk.on{background:var(--gold)}
.tb[data-st="fresh"] .tb-blocks{animation:tbGold 2.2s ease-in-out infinite}
@keyframes tbGold{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
/* near (90% and up) — the label and the figure go gold, the empty blocks blink gold so the eye lands on what is left */
.tb[data-st="near"] .tb-lbl,.tb[data-st="near"] .tb-pct{color:var(--gold)}
.tb[data-st="near"] .tb-blk:not(.on){background:var(--golddim);animation:tbNear 1.1s ease-in-out infinite}
.tb[data-st="near"] .tb-blk.live{background:var(--gold);animation:tbLive 1.1s ease-in-out infinite}
@keyframes tbNear{0%,100%{opacity:.35}50%{opacity:.9}}
/* migrating — the move to the DEX is running: the top line names where it is going, the full bar runs a scan */
.tb[data-st="migrating"] .tb-lbl,.tb[data-st="migrating"] .tb-pct{display:none}
.tb[data-st="migrating"] .tb-sub{margin-left:0;color:var(--gold);font-size:9px;letter-spacing:.04em}
.tb[data-st="migrating"] .tb-sub b{color:var(--gold)}
.tb[data-st="migrating"] .tb-sub img{height:11px}
.tb[data-st="migrating"] .tb-blk{background:var(--golddim);animation:tbScan 1.6s linear infinite;animation-delay:calc(var(--i) * -80ms)}
@keyframes tbScan{0%,70%{background:var(--golddim)}80%{background:var(--gold)}100%{background:var(--golddim)}}
@media (prefers-reduced-motion:reduce){
  .tb-blk,.tb-blocks{animation:none !important}
  .tb[data-st="migrating"] .tb-blk{background:var(--gold)}
}