/* tick.css — #/t/<TICK> (page-tick.js). docs/05-design.md §4.4 (mint panel, timeline, JSON card, progress grid) and §4.7 Tick.
 * Desktop: header · six stats · main column + 392 px sticky side. ≤ 1100 px: one column in reading order (progress → panel → market →
 * timeline → JSON → tables → params). ≤ 760 px: 2 × 3 stats, vertical timeline, fixed bottom action bar. Reduced motion respected. */
.tk-page{padding-top:22px;padding-bottom:72px}
.tk-page .crumb{margin-bottom:18px}
.tk-page em{font-style:normal;color:var(--text-3);font-size:.78em;font-weight:400}
.tk-page .gold{color:var(--gold)}
.tk-page .up{color:var(--up)}.tk-page .down{color:var(--down)}

/* ── header ── */
.tk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.tk-id{display:flex;align-items:center;gap:14px;min-width:0}
.tk-seal{display:inline-flex;flex:none}
.tk-idt{min-width:0}
.tk-name{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.tk-name h1{font:600 34px/1 var(--mono);letter-spacing:.08em;margin-right:4px}
.tk-chip{display:inline-flex}
.tk-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:9px;font:400 12px/1.5 var(--sans);color:var(--text-3)}
.tk-meta b{font:500 12px/1.5 var(--mono);color:var(--text-2)}
.tk-meta a:hover b{color:var(--text)}
.tk-acts{display:flex;gap:8px;flex:none;padding-top:4px}

/* ── stats ── */
.tk-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel)}
.tk-stats>div{min-width:0;padding:15px 18px 14px;border-left:1px solid var(--line)}
.tk-stats>div:first-child{border-left:0}
.tk-stats small{display:block;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-stats b{display:block;margin-top:9px;font:500 19px/1.1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-stats b.pend{font:500 15px/1.27 var(--sans);color:var(--text-3)}
.tk-stats span{display:block;margin-top:7px;font:400 11.5px/1.35 var(--sans);font-variant-numeric:tabular-nums;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.is-stale .tk-stats b{color:var(--text-4)}

/* ── two-column grid ── */
.tk-grid{display:grid;grid-template-columns:minmax(0,1fr) 392px;gap:20px;align-items:start}
.tk-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.tk-side{position:sticky;top:calc(var(--hdr) + 16px);display:flex;flex-direction:column;gap:16px;min-width:0}
.tk-main>*,.tk-side>*{min-width:0}
/* a side taller than the window scrolls on its own, so the mint button and the params are always reachable (short laptop screens) */
@media (min-width:1101px){
  .tk-side{max-height:calc(100vh - var(--hdr) - 32px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-3) transparent;margin:-3px;padding:3px}
}

/* ── progress card ── */
.tk-pct-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.tk-pct{font:500 52px/1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tk-pct small{font-size:20px;color:var(--text-3);margin-left:2px}
.tk-pct-r{text-align:right;min-width:0}
.tk-pct-r small{display:block;font-size:12px;color:var(--text-3)}
.tk-pct-r b{display:block;margin-top:6px;font:500 15px/1.2 var(--mono);white-space:nowrap}
.tk-cells-wrap{position:relative}
.tk-cells{display:grid;grid-template-columns:repeat(var(--cols,50),minmax(0,1fr));gap:2px}
.tk-cells i{display:block;aspect-ratio:1;border-radius:1.5px;background:rgba(255,255,255,.055);transition:background-color .4s var(--ease)}
.tk-cells i.b{background:rgba(244,183,40,.26)}
.tk-cells i.p{background:rgba(244,183,40,.62)}
.tk-cells i.hf{background:rgba(244,183,40,.16)}
.tk-cells i.m{background:#ecebe5}
.tk-cells i.nx{background:transparent;box-shadow:inset 0 0 0 1px var(--gold);animation:tkblink 1.2s steps(2,start) infinite}
.tk-cells.done i.b{background:rgba(207,205,198,.32)}
.tk-cells.done i.p{background:rgba(207,205,198,.6)}
.tk-cells.exp i.b,.tk-cells.exp i.p,.tk-cells.exp i.hf{background:rgba(255,255,255,.13)}
.tk-cells i:hover{outline:1px solid var(--text);outline-offset:0}
@keyframes tkblink{50%{box-shadow:inset 0 0 0 1px transparent}}
.tk-tip{position:absolute;z-index:5;transform:translate(-50%,calc(-100% - 8px));padding:6px 9px;border:1px solid var(--line-2);border-radius:6px;background:var(--panel-3);
  font:500 11.5px/1.3 var(--mono);color:var(--text);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s}
.tk-tip.on{opacity:1}
.tk-leg{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-top:16px;font-size:12px;color:var(--text-3)}
.tk-leg-l{display:flex;flex-wrap:wrap;gap:6px 16px}
.tk-leg-l>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tk-leg-l i{width:9px;height:9px;border-radius:2px;background:rgba(255,255,255,.08)}
.tk-leg-l i.b{background:rgba(244,183,40,.3)}.tk-leg-l i.p{background:rgba(244,183,40,.65)}.tk-leg-l i.m{background:#ecebe5}
.tk-leg-l b{font:500 12px/1 var(--mono);color:var(--text-2)}
.tk-leg-r{white-space:nowrap}

/* ── market card ── */
.tk-mkt-k{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:8px}
.tk-mkt-k>div{min-width:0;padding:14px 16px 13px;border-left:1px solid var(--line)}
.tk-mkt-k>div:first-child{border-left:0}
.tk-mkt-k small{display:block;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-mkt-k b{display:block;margin-top:8px;font:500 19px/1.1 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-mkt-k b.tk-zh{font:600 16px/1.25 var(--sans)}
.tk-mkt-k b sub{font-size:.62em;vertical-align:-.25em}
.tk-mkt-k span{display:block;margin-top:7px;font:400 11.5px/1.3 var(--sans);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-dex{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:14px 0 2px;font-size:12px;color:var(--text-3)}
.tk-dex b{font:500 12.5px/1 var(--mono);color:var(--text)}
.tk-links{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px}
.tk-addr{display:inline-flex;align-items:center;gap:8px}
.tk-addr .copy{height:24px;padding:0 8px}

/* ── timeline ── */
.tk-tl{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));list-style:none;margin:0;padding:0}
.tk-tl li{position:relative;min-width:0;padding:22px 10px 0 0}
.tk-tl li::before{content:"";position:absolute;left:12px;right:0;top:5px;border-top:1px dashed var(--line-3)}
.tk-tl li:last-child::before{display:none}
.tk-tl li>i{position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;border:1px dashed var(--line-3);background:var(--panel)}
.tk-tl li.done>i{border:0;background:var(--gold)}
.tk-tl li.done::before{border-top:1px solid var(--gold)}
.tk-tl li.now>i{border:1.5px solid var(--gold);background:var(--bg);box-shadow:0 0 0 3px var(--g16);animation:tkring 1.8s infinite}
.tk-tl li.now::before{border-top:1px solid;border-image:linear-gradient(90deg,var(--gold) 40%,var(--line-3) 40%) 1}
.tk-tl li.fail>i{border:0;background:var(--text-4)}
.tk-tl li.off>i{border-color:var(--line-2)}
.tk-tl b{display:block;font:600 13px/1.3 var(--sans);color:var(--text)}
.tk-tl li.now b{color:var(--gold)}
.tk-tl li.off b,.tk-tl li.todo b,.tk-tl li.fail b{color:var(--text-2)}
.tk-tl span{display:block;margin-top:4px;font:400 12px/1.55 var(--sans);font-variant-numeric:tabular-nums;color:var(--text-3);overflow-wrap:anywhere}
.tk-tl span.mono{font-family:var(--mono);font-size:11.5px}
@keyframes tkring{50%{box-shadow:0 0 0 6px rgba(244,183,40,.04)}}

/* ── JSON row ── */
.tk-json{align-items:stretch}
.tk-latest{display:flex;min-width:0}
.tk-latest>.panel{flex:1;min-width:0}
.tk-json .json-card .kvl{border-top:1px solid var(--line)}

/* ── tables ── */
.tk-tabs-h{gap:12px}
.tk-tabs-h .utabs{min-width:0;overflow-x:auto;scrollbar-width:none}
.tk-tabs-h .r{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tk-tr{display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(150px,1.3fr) minmax(50px,.5fr) minmax(100px,.9fr) minmax(100px,.9fr) minmax(76px,.7fr);
  align-items:center;gap:12px;min-height:46px;padding:0 20px;border-bottom:1px solid var(--line);font-size:13px}
.tk-tr.h{grid-template-columns:40px minmax(150px,1.4fr) minmax(50px,.5fr) minmax(70px,.6fr) minmax(100px,.9fr) minmax(110px,.9fr)}
.tk-tr:last-of-type{border-bottom:0}
.tk-tr>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-tr .r{text-align:right}
.tk-tr .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tk-tr a:hover{color:var(--gold)}
.tk-tr .tag{margin-left:8px;height:18px}
.tk-tr.me{background:var(--g06)}
.tk-th{min-height:40px;font-size:12px;color:var(--text-3);background:rgba(255,255,255,.012)}
.tk-pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3)}
.tk-tbl .empty{padding:36px 20px}

/* ── action panel ── */
.ph.tk-ap-h{align-items:flex-start;padding-top:18px;padding-bottom:16px}
.tk-ap-h h3{font:600 15px/1.25 var(--sans)}
.tk-ap-sub{margin-top:6px;font:400 12px/1.45 var(--sans);font-variant-numeric:tabular-nums;color:var(--text-3)}
.tk-ap .pb{display:flex;flex-direction:column;gap:12px}
.tk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--text-3)}
.tk-row label,.tk-row small{font-size:12.5px;color:var(--text-3)}
.tk-row .mono{color:var(--text-2);font-variant-numeric:tabular-nums}
.tk-row b.mono{color:var(--text)}
.tk-step{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;height:50px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--bg-2);overflow:hidden}
.tk-step button{font:400 20px/1 var(--mono);color:var(--text-2)}
.tk-step button:hover{color:var(--text);background:rgba(255,255,255,.04)}
.tk-step button:first-child{border-right:1px solid var(--line)}
.tk-step button:last-child{border-left:1px solid var(--line)}
.tk-step input{width:100%;min-width:0;border:0;outline:0;background:transparent;text-align:center;font:500 21px/1 var(--mono);color:var(--text)}
.tk-step:focus-within{border-color:var(--g50)}
.tk-quick button:disabled{opacity:.35;cursor:not-allowed}
.tk-pay button{font-size:13px}
.tk-bnb{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:8px}
.tk-bnb[hidden]{display:none}
.tk-slip button{height:24px;padding:0 9px;font:500 11.5px/1 var(--mono)}
.tk-cost .kvl{margin:0}
.tk-total{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.tk-total>span{font-size:13px;color:var(--text-2);padding-top:4px}
.tk-total>div{text-align:right}
.tk-total b{display:block;font:500 20px/1.1 var(--mono)}
.tk-total small{display:block;margin-top:4px;font-size:11.5px;color:var(--text-3)}
.tk-segs{display:flex;gap:2px;height:6px;margin-top:8px}
.tk-segs i{flex:1;min-width:0;background:rgba(255,255,255,.08)}
.tk-segs i.h,.tk-segs b.h{background:#e6e3da}
.tk-segs i.a,.tk-segs b.a{background:rgba(244,183,40,.55)}
.tk-segs.flat{gap:0;background:rgba(255,255,255,.08)}
.tk-segs.flat b{display:block;height:100%}
.tk-allow .gold{color:var(--gold)}
.tk-msg{margin:0;padding:9px 12px;border:1px solid rgba(242,98,110,.3);border-radius:7px;background:rgba(242,98,110,.06);font-size:12.5px;line-height:1.5;color:var(--down)}
.tk-msg[hidden]{display:none}
.tk-msg.tk-mypos{border-color:var(--g16);background:var(--g06);color:var(--text-2)}
.tk-cta{margin-top:2px}
.tk-cta .spin{width:15px;height:15px;border-radius:50%;border:1.6px solid rgba(0,0,0,.25);border-top-color:currentColor;animation:spin .9s linear infinite}
.tk-approve[hidden]{display:none}
.tk-will{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--code)}
.tk-will code{display:block;margin-top:6px;font:400 11.5px/1.6 var(--mono);color:var(--text-2);word-break:break-all}
.tk-notes{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.tk-notes li{position:relative;padding-left:12px;font-size:12px;line-height:1.6;color:var(--text-3)}
.tk-notes li::before{content:"";position:absolute;left:0;top:.68em;width:4px;height:4px;border-radius:1px;background:var(--text-4)}
.tk-over{display:flex;flex-direction:column;gap:9px;padding:12px;border:1px dashed rgba(244,183,40,.45);border-radius:8px;background:var(--g06)}
.tk-over-top{display:flex;align-items:baseline;gap:10px;font-size:12.5px;color:var(--text-2)}
.tk-over-top b{font:500 20px/1 var(--mono);color:var(--text)}
.tk-over-top b.gold{color:var(--gold)}
.tk-over-top .dim{margin-left:auto}
.tk-over p{margin:0;font-size:12px;line-height:1.6;color:var(--text-2)}
.tk-xr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--g30);border-radius:8px;background:var(--g06)}
.tk-xr small{display:block;font-size:12px;color:var(--text-3)}
.tk-xr b{display:block;margin-top:4px;font:500 15px/1 var(--mono);color:var(--gold)}
.tk-p{margin:0;font-size:13px;line-height:1.65;color:var(--text-2)}
.tk-g46{padding:11px 12px;border:1px solid var(--line-2);border-radius:8px;background:rgba(255,255,255,.02)}
.tk-g46 b{display:block;font:600 12.5px/1.3 var(--sans);color:var(--text)}
.tk-g46 p{margin:6px 0 0;font-size:12px;line-height:1.65;color:var(--text-3)}
.tk-own p{margin:0 0 8px;font-size:12px;line-height:1.6;color:var(--text-3)}
.tk-own b{color:var(--text-2);font-weight:500}
.tk-claim{display:flex;flex-direction:column;gap:10px}
.tk-claim>small{font-size:12px;color:var(--text-3)}
.tk-claim-big{display:flex;align-items:baseline;gap:6px}
.tk-claim-big b{font:500 26px/1 var(--mono)}
.tk-claim .kvl{margin:0}
.tk-claim .bar,.tk-over .bar{flex:none;height:6px}
.tk-done{display:flex;align-items:center;gap:8px;padding:12px;border:1px solid var(--line-2);border-radius:8px;font-size:13px;color:var(--text-2)}
.tk-done svg{color:var(--up)}
.tk-ap .empty{padding:18px 4px}
.tk-params .kvl{margin:0}

/* ── mobile bottom bar ── */
.tk-mbar{display:none}

/* ── one column ── */
@media (max-width:1100px){
  .tk-grid{display:flex;flex-direction:column;align-items:stretch;gap:20px}
  .tk-main,.tk-side{display:contents}
  .tk-grid .o1,.tk-grid .o2,.tk-grid .o3,.tk-grid .o4,.tk-grid .o5,.tk-grid .o6,.tk-grid .o7{min-width:0;max-width:100%}
  .o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}.o6{order:6}.o7{order:7}
  .tk-act{width:100%}
}
@media (max-width:900px){
  .tk-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tk-stats>div:nth-child(4){border-left:0}
  .tk-stats>div:nth-child(n+4){border-top:1px solid var(--line)}
  .tk-mkt-k{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tk-mkt-k>div:nth-child(3){border-left:0}
  .tk-mkt-k>div:nth-child(n+3){border-top:1px solid var(--line)}
  .tk-json{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .tk-page{padding-top:16px;padding-bottom:96px}
  .tk-head{flex-direction:column;gap:12px}
  .tk-id{align-items:flex-start}
  .tk-name h1{font-size:28px}
  .tk-meta{gap:2px 12px}
  .tk-acts{padding-top:0}
  .tk-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tk-stats>div{padding:12px 14px}
  .tk-stats>div:nth-child(4){border-left:1px solid var(--line)}
  .tk-stats>div:nth-child(odd){border-left:0}
  .tk-stats>div:nth-child(n+3){border-top:1px solid var(--line)}
  .tk-stats b{font-size:16px}
  .tk-pct{font-size:40px}
  .tk-pct small{font-size:16px}
  .tk-pct-r b{font-size:13px}
  .tk-cells{gap:1.5px}
  .tk-leg{flex-direction:column;align-items:flex-start}
  .tk-tl{grid-template-columns:minmax(0,1fr)}
  .tk-tl li{padding:0 0 18px 26px}
  .tk-tl li:last-child{padding-bottom:0}
  .tk-tl li::before{left:5px;right:auto;top:14px;bottom:-2px;border-top:0;border-left:1px dashed var(--line-3)}
  .tk-tl li.done::before{border-top:0;border-left:1px solid var(--gold)}
  .tk-tl li.now::before{border:0;border-left:1px solid;border-image:linear-gradient(180deg,var(--gold) 40%,var(--line-3) 40%) 1}
  .tk-tl li>i{top:2px}
  .tk-tr,.tk-tr.h{grid-template-columns:minmax(0,1.25fr) minmax(0,1.2fr) minmax(34px,.4fr) minmax(0,.9fr) minmax(0,.7fr);padding:0 14px;gap:8px;font-size:12px}
  .tk-tr .hide-s{display:none}
  .tk-tr.h{grid-template-columns:22px minmax(0,1.3fr) minmax(34px,.4fr) minmax(0,.7fr) minmax(0,.9fr)}
  .tk-tr .tag{display:none}
  .tk-tr:not(.h){grid-template-columns:minmax(0,1.15fr) minmax(0,1.3fr) minmax(30px,.35fr) minmax(0,.75fr)}
  .ph.tk-tabs-h{flex-wrap:wrap;height:auto;min-height:52px;row-gap:2px;padding-top:6px;padding-bottom:12px}
  .tk-tabs-h .r{order:3;flex:1 0 100%;margin-top:6px;white-space:normal;font-size:12px;line-height:1.45}
  body:has(.tk-mbar){padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .tk-mkt-k b{font-size:16px}
  .tk-mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(7,8,10,.94);border-top:1px solid var(--line-2);transform:translateY(110%);transition:transform .25s var(--ease)}
  .tk-mbar.on{transform:none}
  .tk-mbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .tk-mbar-t{display:flex;align-items:baseline;gap:10px;min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden}
  .tk-mbar-t b{font:600 15px/1 var(--mono);letter-spacing:.06em}
  .tk-mbar .btn{flex:none;height:40px;padding:0 20px}
  body:has(.tk-mbar.on) .toasts{bottom:76px}
}
@media (prefers-reduced-motion:reduce){
  .tk-cells i{transition:none}
  .tk-cells i.nx,.tk-tl li.now>i{animation:none}
  .tk-mbar{transition:none}
}