/* Token page — layout only. Colour, type and the card/button shapes come from
   the app's own stylesheets, so this page sits inside the same design system
   instead of re-stating it. */
.tk-wrap{ display:flex; flex-direction:column; gap:20px; padding-bottom:40px; }
.tk-status{ font-size:9px; color:var(--text-muted); margin:24px 0; }

.tk-grid{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start; }
@media (max-width:900px){ .tk-grid{ grid-template-columns:minmax(0,1fr); } }

.tk-head{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.tk-logo{ width:64px; height:64px; border:2px solid var(--ink); border-radius:10px; overflow:hidden;
          display:flex; align-items:center; justify-content:center; background:var(--card);
          font-family:ui-monospace,monospace; font-weight:800; font-size:18px; flex:none; }
.tk-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.tk-title{ margin:0; font-size:26px; line-height:1.15; }
.tk-sub{ margin:4px 0 0; font-size:13px; color:var(--text-mid); }

.tk-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.tk-metric dt{ font-size:8px; }
.tk-metric dd{ margin:4px 0 0; font-size:15px; font-family:ui-monospace,monospace; font-weight:700; }

.tk-rows{ display:flex; flex-direction:column; gap:8px; }
.tk-row{ display:flex; justify-content:space-between; gap:14px; font-size:12px; align-items:baseline; }
.tk-row > span:first-child{ color:var(--text-mid); }
.tk-row > span:last-child{ font-family:ui-monospace,monospace; text-align:right; word-break:break-all; }

.tk-blocks{ display:flex; flex-wrap:wrap; gap:8px; }
.tk-trade-tabs{ display:flex; gap:8px; margin-bottom:12px; }
.tk-input{ width:100%; }
.tk-quote{ font-size:12px; color:var(--text-mid); min-height:34px; margin:10px 0 0; }
.tk-note{ font-size:11px; color:var(--text-muted); margin:8px 0 0; }
.tk-bad{ color:var(--danger); }

/* .pix carries family and casing but no size, so a bare <h2> would keep the
   browser's 1.5em. Card headings across the app are the small label size. */
.tk-wrap .card > h2.pix{ margin:0; font-size:11px; line-height:1.2; letter-spacing:.08em; }
.tk-wrap .tk-logo span{ font-size:16px; }

/* On the dark theme an "off" block at 0.4 opacity disappears; give it an edge
   instead so the stack still reads as five slots, two of them empty. */
.tk-blocks .pix.chip[style*="opacity"]{ opacity:1 !important; color:var(--text-muted); border:1px dashed var(--dashed); background:transparent; }