/* TOKENS — discovery pass. Loads last and owns the Tokens layout:
   heading count · quick views · compact filters · dense list (≥1024px) ·
   compact cards (≤1023px) · quick-detail drawer. Forensic tokens: dense rows,
   small metadata, restrained borders, lime only for active/brand states. */

/* ---------- heading + search ---------- */
#hero .explorer-heading h1{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2) var(--space-3)}
.explorer-count{font:600 12px/1.5 var(--font-ui);color:var(--text-secondary);letter-spacing:0;border:1px solid var(--line);border-radius:999px;padding:2px 10px;background:var(--surface-subtle)}
.explorer-count b{color:var(--ink);font-variant-numeric:tabular-nums}
body[data-view="tokens"] #hero.hero{padding-bottom:var(--space-2)}
body[data-view="tokens"] #hero .form-foot{min-height:24px}
body[data-view="tokens"] #hero .forensic-heading{margin-bottom:var(--space-2)}
body[data-view="tokens"] #hero .forensic-heading h1{font:700 22px/1.3 var(--font-heading);margin:0}
body[data-view="tokens"] #hero .forensic-heading p{display:none}
body[data-view="tokens"] #hero.hero{padding-block:var(--space-3) var(--space-2)}
body[data-view="tokens"] #hero .scanbar{min-height:40px}
body[data-view="tokens"] #hero .scanbar input{font:400 13.5px/1.4 var(--font-ui);min-height:38px}
body[data-view="tokens"] #hero .scanbar-go{min-height:34px;padding-inline:var(--space-3);font-size:12.5px}
body[data-view="tokens"] #hero .scanbar-go .ic{width:14px;height:14px}
body[data-view="tokens"] #hero .form-foot{min-height:0;margin-top:4px}
body[data-view="tokens"] #hero .forensic-input-label{display:none}

/* ---------- bar: quick views · filters · sort ---------- */
#tokens{padding-top:0}
#tokens .tokens-bar{order:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-4);margin:0 0 var(--space-2)}
#tokens .tokens-filters{display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap;padding:0;background:none;border:0;border-radius:0}
.tokens-qv-label{font:600 10.5px/1.5 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin-right:var(--space-2)}
#tokens .tokens-filter{min-height:34px;padding:0 var(--space-3);border-radius:var(--radius-sm);border:1px solid transparent;font:500 12.5px/1 var(--font-ui);color:var(--text-secondary);background:transparent}
#tokens .tokens-filter span{font-variant-numeric:tabular-nums;opacity:.65;margin-left:2px}
#tokens .tokens-filter:hover{color:var(--ink);background:var(--surface-subtle)}
#tokens .tokens-filter.active{color:var(--ink);background:var(--surface-subtle);border-color:var(--line);font-weight:650;box-shadow:inset 0 -2px 0 var(--green-dark)}
#tokens .tokens-controls{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}
#tokens .tokens-radar-link{min-height:36px;padding:0 var(--space-3);font:500 12px/1 var(--font-ui)}
#tokens .tokens-refresh{height:36px;width:36px;min-width:36px;border-radius:var(--radius-sm)}
.tokens-filters-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);font:500 12.5px/1 var(--font-ui);cursor:pointer}
.tokens-filters-btn .ic{width:14px;height:14px;color:var(--text-secondary)}
.tokens-filters-btn:hover,.tokens-filters-btn[aria-expanded="true"]{border-color:var(--text-secondary);background:var(--surface-subtle)}
.tokens-filters-btn.has-filters{border-color:var(--green-dark)}
.tokens-filters-btn b{min-width:18px;padding:1px 6px;border-radius:999px;background:var(--green-dark);color:var(--invert-ink,#fff);font:700 10.5px/1.4 var(--font-ui);text-align:center}
:root[data-theme="dark"] .tokens-filters-btn b{color:#0b0d0e}

/* status + NOW link */
#tokens .tokens-statusrow{order:2;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);margin:0 0 var(--space-2);min-height:20px}
#tokens .tokens-statusrow .tokens-research,#tokens .tokens-statusrow .tk-sortnote-slot,#tokens .tokens-statusrow .tokens-chips{display:inline-flex;align-items:center;margin:0;min-width:0}
#tokens .tokens-statusrow .tokens-research:empty,#tokens .tokens-statusrow .tk-sortnote-slot:empty,#tokens .tokens-statusrow .tokens-chips:empty{display:none}
#tokens .tokens-statusrow .tokens-legendwrap{margin-left:auto}
#tokens .tokens-statusrow .research-status{margin:0;position:relative}
#tokens .tokens-statusrow .research-status>summary{padding:2px 9px;border:1px solid var(--line);border-radius:999px;font-size:10.5px;color:var(--ink-2,var(--ink))}
#tokens .tokens-statusrow .research-status>summary .rs-hint{margin-left:4px}
#tokens .tokens-statusrow .research-status[open]{flex:1 1 100%}
#tokens .tokens-statusrow .research-status[open]>summary{display:inline-flex}
#tokens .tokens-statusrow .tokens-status{display:inline;flex:0 1 auto;width:auto;order:0;font:400 11.5px/1.5 var(--font-ui);color:var(--text-secondary)}
.tokens-nowlink[hidden],.explorer-count[hidden],.tokens-filters-btn b[hidden],#tokens .tokens-more[hidden]{display:none!important}
.tokens-nowlink{display:inline-flex;align-items:center;gap:4px;font:500 11.5px/1.5 var(--font-ui);color:var(--text-secondary)}
.tokens-nowlink i{color:var(--green-dark);font-style:normal;font-size:9px}
.tokens-nowlink b{color:var(--ink);font-variant-numeric:tabular-nums}
.tokens-nowlink button{border:0;background:none;padding:0;min-height:24px;color:var(--green-dark);font:600 11.5px/1.5 var(--font-ui);cursor:pointer}
.tokens-nowlink button:hover{text-decoration:underline}
#tokens #tokens-list{order:3}
#tokens .tokens-more{order:4}
#tokens .tokens-more[hidden]{display:none}
#tokens .tokens-empty{min-height:120px;font:500 13px/1.7 var(--font-ui);letter-spacing:.01em}
#tokens .tokens-empty[data-loading="true"]{letter-spacing:.06em;font-weight:600;font-size:12px}

/* ---------- dense list (≥1024px) ---------- */
#tokens .tk-table{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card);overflow:visible;min-width:0}
#tokens .tk-table .tk-tr{display:grid;grid-template-columns:var(--tk-cols);gap:var(--space-2);align-items:center;padding:6px var(--space-3);min-height:56px;border-bottom:1px solid var(--line);cursor:pointer;opacity:1;animation:none;font-family:var(--font-ui)}
#tokens .tk-table .tk-tr:last-child{border-bottom:0}
#tokens .tk-table .tk-tr:focus-visible{outline:2px solid var(--green-dark);outline-offset:-2px}
#tokens .tk-table .tk-tr.tk-thin{opacity:.78}
#tokens .tk-table .tk-tr.tk-danger{background:color-mix(in srgb,var(--red) 6%,var(--card))}
#tokens .tk-table .tk-head{min-height:36px;padding-block:0;cursor:default;font:500 11px/1.4 var(--font-ui);color:var(--text-secondary);background:var(--surface-subtle);border-radius:var(--radius-md) var(--radius-md) 0 0;text-transform:none;letter-spacing:0;position:sticky;top:0;z-index:2}
#tokens .tk-head>span{font:inherit;font-size:11.5px;font-weight:600;white-space:nowrap;display:flex;align-items:center;min-height:0;height:36px}
#tokens .tk-head>.tk-num,#tokens .tk-head>.tk-trust{justify-content:flex-end;text-align:right}
#tokens .tk-head>.tk-change,#tokens .tk-head>.tk-tok{justify-content:flex-start;text-align:left}
#tokens .tk-head .tk-sortable{cursor:pointer;border-radius:var(--radius-sm)}
#tokens .tk-head .tk-sortable:hover{color:var(--ink)}
#tokens .tk-head .tk-sortable.is-sorted{color:var(--ink);font-weight:600}
#tokens .tk-head .th-arr{margin-left:3px;font-size:9px;opacity:.4;font-style:normal}
#tokens .tk-head .is-sorted .th-arr{opacity:1;color:var(--green-dark)}
/* token cell */
#tokens .tk-table .tk-tr>.tk-tok{display:flex;align-items:center;gap:var(--space-2);min-width:0}
#tokens .tk-av{width:30px;height:30px;flex:0 0 30px;border-radius:8px;font:700 12px var(--font-ui)}
#tokens .tk-idcol{min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.3}
#tokens .tk-line1{display:flex;align-items:baseline;gap:6px;min-width:0}
#tokens .tk-sym{font:650 13px/1.3 var(--font-ui);color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tokens .tk-name{font:400 11px/1.3 var(--font-ui);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:140px}
#tokens .tk-name:empty{display:none}
#tokens .tk-flagslot:empty{display:none}
#tokens .tk-meta{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap}
#tokens .tk-addr{font:400 10.5px/1.4 var(--font-data);color:var(--text-secondary);text-decoration:none;white-space:nowrap}
#tokens .tk-addr:hover{color:var(--green-dark);text-decoration:underline}
#tokens .tk-copy{width:20px;height:20px;padding:2px;border:0;background:none;color:var(--text-secondary);cursor:pointer;opacity:.8;display:inline-flex;align-items:center;justify-content:center;border-radius:4px}
#tokens .tk-copy .ic{width:12px;height:12px}
#tokens .tk-copy:hover{opacity:1;background:var(--surface-subtle)}
#tokens .tk-srcslot:empty,#tokens .tk-agebadge:empty{display:none}
.tk-srcbadge{display:inline-block;font:500 10px/1.5 var(--font-ui);color:var(--text-secondary);border:1px solid var(--line);border-radius:4px;padding:0 5px;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.tk-srcbadge.flag{border-color:color-mix(in srgb,var(--red) 50%,var(--line));color:var(--red)}
#tokens .tk-agebadge{font:400 10px/1.5 var(--font-ui);color:var(--text-secondary);white-space:nowrap}
#tokens .tk-grad{margin:0}
/* numeric cells */
#tokens .tk-table .tk-tr>.tk-price,#tokens .tk-table .tk-tr>.tk-chg,#tokens .tk-table .tk-tr>.tk-mcap,#tokens .tk-table .tk-tr>.tk-liq,#tokens .tk-table .tk-tr>.tk-concentration{display:block;grid-area:auto;text-align:right;font:500 12.5px/1.4 var(--font-data);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tokens .tk-table .tk-tr>.tk-concentration.hot{color:var(--ink);font-weight:700}
#tokens .mk-chg{font-weight:600}
#tokens .mk-chg.pos{color:#1f8f4a}
#tokens .mk-chg.neg{color:var(--red)}
:root[data-theme="dark"] #tokens .mk-chg.pos{color:#2fd575}
#tokens .mk-dash,#tokens .mk-load{color:var(--text-secondary);opacity:.7}
/* trust */
#tokens .tk-table .tk-tr>.tk-trust{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;grid-area:auto;text-align:right;font:600 12.5px/1.3 var(--font-data);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;cursor:help}
#tokens .tk-trust b{font-weight:700}
#tokens .tk-trust small{font-size:10.5px;font-weight:400;color:var(--text-secondary);margin-left:2px}
#tokens .tk-trust em{display:block;font:400 10px/1.3 var(--font-ui);font-style:normal;color:var(--text-secondary)}
#tokens .tk-trust.fresh.low b{color:#1f8f4a}
#tokens .tk-trust.fresh.warn b{color:#b26a00}
#tokens .tk-trust.fresh.high b{color:var(--red)}
:root[data-theme="dark"] #tokens .tk-trust.fresh.low b{color:#2fd575}
:root[data-theme="dark"] #tokens .tk-trust.fresh.warn b{color:#ffb340}
.tk-trust-none,.tk-trust-stale{display:inline-block;font:600 9.5px/1.5 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);border:1px solid var(--line);border-radius:4px;padding:0 5px}
.tk-trust-stale{border-style:dashed}
.tk-lowcov{font:600 9.5px/1.5 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:#b26a00;white-space:nowrap}
:root[data-theme="dark"] .tk-lowcov{color:#ffb340}
#tokens .tk-trust b.lowcov,.token-drawer .td-trust.lowcov{color:var(--ink)!important;font-weight:600}
#tokens .tk-trust small.tk-lowcov{margin-left:4px;font-weight:600;color:inherit}
/* recent change */
#tokens .tk-table .tk-tr>.tk-change{display:block;grid-area:auto;text-align:left;min-width:0;overflow:hidden}
#tokens .token-signal-link{display:inline-flex;align-items:center;gap:6px;max-width:100%;border:0;background:transparent;color:var(--ink);font:600 12px/1.4 var(--font-ui);padding:var(--space-1) 0;min-height:28px;cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tokens .token-signal-link:hover{color:var(--green-dark);text-decoration:underline}
.tk-sigdot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--green-dark)}
:root[data-theme="dark"] .tk-sigdot{background:#ccff00}
.tk-nochange{color:var(--text-secondary);opacity:.6;font:500 12px/1.4 var(--font-data)}
/* actions: Investigate primary; star = watch on desktop */
#tokens .tk-table .tk-tr>.tk-act{display:flex;grid-area:auto;justify-content:flex-end;gap:var(--space-1);min-width:0}
#tokens .tk-scan{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;height:34px;min-width:34px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);font:600 12px/1 var(--font-ui);cursor:pointer;white-space:nowrap}
#tokens .tk-scan .ic{width:15px;height:15px}
#tokens .tk-scan span{display:inline}
#tokens .tk-scan:hover{border-color:var(--ink);background:var(--surface-subtle)}
#tokens .tk-watch{display:none}
#tokens .tk-table .tk-tr>.tk-star{width:28px;height:36px;opacity:1;color:var(--text-secondary);grid-area:auto;border:0;background:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
#tokens .tk-table .tk-tr>.tk-star .ic{width:15px;height:15px}
#tokens .tk-table .tk-tr>.tk-star:hover{color:var(--ink);background:var(--surface-subtle)}
#tokens .tk-table .tk-tr>.tk-star.on{color:var(--green-dark)}
#tokens .tk-table .tk-tr>.tk-star.on .ic{fill:currentColor}
#tokens .tk-table .tk-tr>[data-label]::before{content:none}
@media(hover:hover) and (pointer:fine){#tokens .tk-table .tk-tr:not(.tk-head):hover{background:var(--surface-subtle)}}
@media(max-width:1180px){
  /* Twelve columns is tight at 1024px. Trim the fixed widths so the flexible
     columns keep their minimums without pushing the row past the viewport. */
  #tokens .tk-table .tk-tr{gap:6px}
  #tokens .tk-scan{width:34px;padding:0}
  #tokens .tk-scan span{display:none}
  #tokens .tk-name{max-width:110px}
}

/* ---------- compact cards (≤1023px): tablets get two columns, phones one ---------- */
@media(max-width:1023px){
  #tokens .tk-table{border:0;background:transparent;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
  /* retired: superseded by the named-area mobile card below */

  #tokens .tk-table .tk-tr.tk-head{display:none}
  #tokens .tk-table .tk-tr>.tk-tok{grid-area:tok}
  #tokens .tk-table .tk-tr>.tk-star{display:none}
  #tokens .tk-table .tk-tr>.tk-chg{grid-area:chg;align-self:center;text-align:right;font-size:13px}
  #tokens .tk-table .tk-tr>.tk-price{grid-area:price}
  #tokens .tk-table .tk-tr>.tk-mcap{grid-area:mcap}
  #tokens .tk-table .tk-tr>.tk-liq{grid-area:liq}
  #tokens .tk-table .tk-tr>.tk-trust{grid-area:trust;align-items:flex-start;text-align:left}
  #tokens .tk-table .tk-tr>.tk-concentration{grid-area:conc;align-self:center;font-size:11px;color:var(--text-secondary)}
  /* Intelligence sits on its own row on a card so attention and structure read as a
     pair rather than as two more stray numbers among the market figures. */
  #tokens .tk-table .tk-tr>.tk-fomo{grid-area:fomo}
  #tokens .tk-table .tk-tr>.tk-quality{grid-area:quality}
  #tokens .tk-table .tk-tr>.tk-fomo,#tokens .tk-table .tk-tr>.tk-quality{align-self:center;padding-top:var(--space-2);border-top:1px solid var(--line)}
  #tokens .tk-table .tk-tr>.tk-fomo::before{content:"FOMO";display:block;font:700 9px/1.4 var(--font-ui);letter-spacing:.06em;color:var(--text-secondary)}
  #tokens .tk-table .tk-tr>.tk-quality::before{content:"QUALITY";display:block;font:700 9px/1.4 var(--font-ui);letter-spacing:.06em;color:var(--text-secondary)}
  #tokens .tk-table .tk-tr>.tk-trust{padding-top:var(--space-2);border-top:1px solid var(--line)}
  #tokens .tk-score{align-items:flex-start}
  #tokens .tk-table .tk-tr>.tk-change{grid-area:change;align-self:center}
  #tokens .tk-table .tk-tr>.tk-act{grid-area:act;justify-content:flex-start;gap:var(--space-2);padding-top:var(--space-1);border-top:1px solid var(--line)}
  #tokens .tk-table .tk-tr>.tk-price,#tokens .tk-table .tk-tr>.tk-mcap,#tokens .tk-table .tk-tr>.tk-liq{text-align:left;font-size:13px;white-space:normal}
  #tokens .tk-table .tk-tr>.tk-price::before,#tokens .tk-table .tk-tr>.tk-mcap::before,#tokens .tk-table .tk-tr>.tk-liq::before,#tokens .tk-table .tk-tr>.tk-trust::before{content:attr(data-label);display:block;font:400 10px/1.4 var(--font-ui);color:var(--text-secondary);letter-spacing:.02em}
  #tokens .tk-table .tk-tr>.tk-concentration::before{content:"Conc. ";font:400 10px/1.4 var(--font-ui)}
  #tokens .tk-table .tk-tr>.tk-concentration .mk-load::before{content:""}
  #tokens .tk-trust em{display:inline;margin-left:4px}
  #tokens .tk-name{max-width:none}
  #tokens .tk-scan{width:auto;height:34px;padding:0 12px;flex:0 0 auto}
  #tokens .tk-scan span{display:inline}
  #tokens .tk-watch{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:transparent;color:var(--ink);font:600 12px/1 var(--font-ui);cursor:pointer}
  #tokens .tk-watch .ic{width:15px;height:15px}
  #tokens .tk-watch.on{border-color:var(--green-dark);color:var(--green-dark)}
  #tokens .tk-watch.on .ic{fill:currentColor}
  #tokens .tokens-controls{margin-left:0;width:100%;justify-content:flex-start}
}
@media(max-width:767px){
  #tokens .tk-table{grid-template-columns:1fr;gap:var(--space-2)}
  #tokens .tokens-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  #tokens .tokens-filters::-webkit-scrollbar{display:none}
  .tokens-qv-label{display:none}
  #tokens .tokens-filter{flex:0 0 auto;min-height:36px}
  #tokens .tokens-controls{flex-wrap:wrap;gap:var(--space-2)}
  #tokens .tokens-radar-link{flex:0 0 auto}
  #tokens .tokens-sortrow{flex:1 1 220px}
  #tokens .tk-sortselect{flex:1 1 auto;min-width:0}
  /* compact card: identity+24h · price/mcap/conc · liquidity/trust · change · actions */
  /* retired: superseded by the named-area mobile card below */

  /* the three intelligence cells share one row on a phone, so they share one rule */
  #tokens .tk-table .tk-tr>.tk-fomo,
  #tokens .tk-table .tk-tr>.tk-quality,
  #tokens .tk-table .tk-tr>.tk-trust{align-self:start;padding-top:var(--space-2);border-top:1px solid var(--line);
    min-width:0;overflow-wrap:anywhere}
  /* The trust qualifier ("6d ago") sits inline on wider cards. In a three-up phone
     row there is no room for it beside the state, so it wraps onto its own line
     instead of pushing the card past the viewport. */
  #tokens .tk-table .tk-tr>.tk-trust em{display:inline;margin-left:4px;font-size:10px;line-height:1.4}
  /* A bare "40%" beside a score is ambiguous — it reads as a second score. Abbreviate
     rather than delete the noun, so a coverage figure can never be mistaken for one. */
  #tokens .tk-cov i{font-style:normal}
  #tokens .tk-cov i::before{content:"cov"}
  #tokens .tk-cov i{font-size:0}
  #tokens .tk-cov i::before{font-size:9px;margin-left:2px}
  #tokens .tk-score{max-width:100%;overflow:hidden}
  #tokens .tk-table .tk-tr>.tk-trust>*{max-width:100%}
  #tokens .tk-table .tk-tr>.tk-trust::before{content:"EVIDENCE";display:block;font:700 9px/1.4 var(--font-ui);letter-spacing:.06em;color:var(--text-secondary)}
  #tokens .tk-table .tk-tr>.tk-concentration{padding-top:var(--space-1)}
  
  #tokens .tk-av{width:28px;height:28px;flex-basis:28px}
  #tokens .tk-name{max-width:120px}
  #tokens .tk-table .tk-tr>.tk-price,#tokens .tk-table .tk-tr>.tk-mcap,#tokens .tk-table .tk-tr>.tk-liq,#tokens .tk-table .tk-tr>.tk-concentration{display:flex;align-items:baseline;gap:4px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;color:var(--ink)}
  #tokens .tk-table .tk-tr>.tk-price::before,#tokens .tk-table .tk-tr>.tk-mcap::before,#tokens .tk-table .tk-tr>.tk-liq::before,#tokens .tk-table .tk-tr>.tk-trust::before,#tokens .tk-table .tk-tr>.tk-concentration::before{content:attr(data-label);display:inline;font:400 10.5px/1.4 var(--font-ui);color:var(--text-secondary);letter-spacing:0;margin:0}
  #tokens .tk-table .tk-tr>.tk-price::before{content:none}
  #tokens .tk-table .tk-tr>.tk-mcap::before{content:none}
  /* retired: the cell now carries a real "Market cap" label, so an "MC" suffix
     restated the same fact twice in the same cell */
  #tokens .tk-table .tk-tr>.tk-liq::before{content:"Liq"}
  #tokens .tk-table .tk-tr>.tk-concentration::before{content:"Conc."}
  #tokens .tk-table .tk-tr>.tk-concentration{justify-content:flex-end;color:var(--ink)}
  #tokens .tk-table .tk-tr>.tk-trust{flex-direction:row;align-items:baseline;gap:4px;font-size:13px}
  #tokens .tk-trust em{display:inline;margin-left:2px}
  #tokens .tk-table .tk-tr>.tk-chg{font-size:13.5px}
  #tokens .tk-table .tk-tr>.tk-change{min-height:0}
  #tokens .token-signal-link{min-height:24px;padding:2px 0}
  #tokens .tk-table .tk-tr>.tk-act{padding-top:5px;margin-top:2px}
  #tokens .tk-scan,#tokens .tk-watch{height:30px}
}

/* ---------- quick-detail drawer ---------- */
.token-drawer .td-id{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.token-drawer .td-id .tk-av{width:36px;height:36px;flex:0 0 36px;border-radius:9px;display:grid;place-items:center;font:700 14px var(--font-ui);color:#fff;background:hsl(var(--h,210) 70% 45%);overflow:hidden}
.token-drawer .td-id .tk-av.has-img{background:var(--surface-subtle)}
.token-drawer .td-id .tk-av img{width:100%;height:100%;object-fit:cover}
.token-drawer .td-id h2{margin:0;font:700 18px/1.3 var(--font-heading);overflow-wrap:anywhere}
.token-drawer .td-id p{margin:0;font:400 12px/1.4 var(--font-ui);color:var(--text-secondary)}
.token-drawer .td-addr{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-2)}
.token-drawer .td-addr code{font:400 12px/1.5 var(--font-data);color:var(--text-secondary);overflow-wrap:anywhere}
.token-drawer .td-addr .tk-copy{width:26px;height:26px;border:0;background:none;color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:4px}
.token-drawer .td-addr .tk-copy .ic{width:13px;height:13px}
.token-drawer .td-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:0 0 var(--space-4);font:400 12px/1.5 var(--font-ui);color:var(--text-secondary)}
.token-drawer .td-meta a{color:var(--green-dark);text-decoration:none}
.token-drawer .td-meta a:hover{text-decoration:underline}
.token-drawer .td-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--line)}
.token-drawer .td-stat{background:var(--card);padding:var(--space-3) var(--space-4);min-width:0}
.token-drawer .td-stat dt{font:400 11px/1.5 var(--font-ui);color:var(--text-secondary)}
.token-drawer .td-stat dd{margin:2px 0 0;font:600 15px/1.4 var(--font-data);font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.token-drawer .td-stat dd small{display:block;font:400 11px/1.5 var(--font-ui);color:var(--text-secondary);margin-top:2px}
.token-drawer .td-trust{font-size:22px}
.token-drawer .td-trust.low{color:#1f8f4a}.token-drawer .td-trust.warn{color:#b26a00}.token-drawer .td-trust.high{color:var(--red)}
:root[data-theme="dark"] .token-drawer .td-trust.low{color:#2fd575}:root[data-theme="dark"] .token-drawer .td-trust.warn{color:#ffb340}
.token-drawer .td-main h3{font:650 13px/1.5 var(--font-heading);margin:var(--space-5) 0 var(--space-2)}
.token-drawer .td-signals{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.token-drawer .td-signals li+li{border-top:1px solid var(--line)}
.token-drawer .td-signals button{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-3) var(--space-4);border:0;background:var(--card);color:var(--ink);font:400 12.5px/1.5 var(--font-ui);text-align:left;cursor:pointer}
.token-drawer .td-signals button:hover{background:var(--surface-subtle)}
.token-drawer .td-signals b{font-weight:650;white-space:nowrap}
.token-drawer .td-signals span{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.token-drawer .td-signals time{color:var(--text-secondary);font-size:11px;white-space:nowrap}
.token-drawer .td-main .now-meta{margin:var(--space-2) 0 0;font:400 12px/1.6 var(--font-ui);color:var(--text-secondary)}
.token-drawer .td-foot{align-items:center}
.token-drawer .td-foot .td-secondary{display:flex;gap:var(--space-2);margin-left:auto}
.token-drawer .td-foot .ghost-btn{border-color:transparent;color:var(--text-secondary)}
.token-drawer .td-foot .ghost-btn:hover{color:var(--ink);border-color:var(--line)}
@media(max-width:600px){.token-drawer .td-foot .td-secondary{margin-left:0;flex-basis:100%}.token-drawer .td-foot .primary{flex:1 1 55%}}
@media(prefers-reduced-motion:reduce){#tokens *{animation:none!important;transition:none!important}}
/* Uncertainty must remain visible at compact widths; never truncate its qualifiers. */
#tokens .tk-trust,#tokens .tk-trust-none,#tokens .tk-lowcov{white-space:normal;overflow-wrap:anywhere}
#tokens .token-signal-link{white-space:normal;overflow:visible;align-items:flex-start}
#tokens .tk-nochange{display:block;font-size:11px;line-height:1.5;opacity:1;overflow-wrap:anywhere}
.token-drawer .td-signals time{white-space:normal;overflow-wrap:anywhere}
.token-drawer .td-id p{overflow-wrap:anywhere}

/* ---------- compact intelligence states + legend + baseline banner ---------- */
.tk-nochange{color:var(--text-secondary);font:500 12px/1.4 var(--font-ui);cursor:help;white-space:nowrap}
.tk-nochange.tk-state-unobserved{opacity:.6;font-family:var(--font-data)}
.tk-nochange.tk-state-baseline{color:var(--text-secondary)}
.tk-nochange.tk-state-unavailable,.tk-nochange.tk-state-not_monitored{font-size:11px;border:1px dashed var(--line);border-radius:4px;padding:0 5px}
#tokens .tk-trust-none{font:500 12px/1.4 var(--font-data);color:var(--text-secondary);opacity:.7;border:0;padding:0;letter-spacing:0;text-transform:none}
#tokens .tk-trust[data-state="unknown"] .tk-trust-none{opacity:1;font-family:var(--font-ui)}
.tokens-legendwrap{position:relative;margin-left:auto}
.tokens-legend-btn{border:1px solid var(--line);background:transparent;color:var(--text-secondary);border-radius:999px;padding:1px 9px;min-height:22px;font:500 11px/1.4 var(--font-ui);cursor:pointer}
.tokens-legend-btn:hover,.tokens-legend-btn[aria-expanded="true"]{color:var(--ink);border-color:var(--text-secondary)}
.tokens-legend{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:min(340px,calc(100vw - 32px));padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card);box-shadow:0 18px 48px -18px rgba(0,0,0,.35);font:400 12px/1.5 var(--font-ui);color:var(--ink)}
.tokens-legend:not(:popover-open){display:none!important}
.tokens-legend:popover-open{position:fixed;inset:auto 16px 80px auto;margin:0;max-height:calc(100dvh - 112px);overflow:auto}
.tokens-legend h4{margin:0 0 var(--space-1);font:600 10.5px/1.5 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.tokens-legend h4+dl{margin:0 0 var(--space-3)}
.tokens-legend dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--space-3);margin:0}
.tokens-legend dt{font:600 12px/1.5 var(--font-data);white-space:nowrap}
.tokens-legend dd{margin:0;color:var(--text-secondary)}
.tokens-legend p{margin:0;font-size:11px;color:var(--text-secondary)}
.tokens-banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-3);margin:0 0 var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-left:3px solid var(--green-dark);border-radius:var(--radius-sm);background:var(--surface-subtle);font:400 12px/1.5 var(--font-ui);color:var(--text-secondary)}
.tokens-banner b{font:600 11px/1.5 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.tokens-banner[hidden]{display:none!important}
@media(max-width:767px){.tokens-legend{position:fixed;left:0;right:0;top:auto;bottom:0;width:100%;border-radius:16px 16px 0 0;padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom,0px));z-index:120}.tokens-legendwrap{margin-left:0}}

.tk-nochange.tk-state-quality{color:#b26a00;font-weight:600}
:root[data-theme="dark"] .tk-nochange.tk-state-quality{color:#ffb340}


/* FOMO / Quality: attention and structure, never presented as safety */
#tokens .tk-score{display:flex;flex-direction:column;align-items:flex-end;gap:1px;background:transparent;border:0;
  cursor:pointer;padding:2px 0;font:inherit;color:inherit;line-height:1.15}
#tokens .tk-score b{font:650 14px/1 var(--font-ui);font-variant-numeric:tabular-nums}
#tokens .tk-band{font:700 8px/1 var(--font-ui);letter-spacing:.06em;color:var(--text-secondary)}
#tokens .tk-cov{font:500 9px/1 var(--font-ui);color:var(--text-secondary);opacity:.8}
#tokens .tk-score:hover b{text-decoration:underline}
#tokens .tk-score:focus-visible{outline:2px solid var(--green-dark);outline-offset:2px}
#tokens .tk-unknown{color:var(--text-secondary);opacity:.7}
.tk-why h3{margin:0 0 4px;font:650 15px/1.3 var(--font-ui)}
.tk-why h4{margin:14px 0 4px;font:700 10px/1 var(--font-ui);letter-spacing:.07em;color:var(--text-secondary)}
.tk-why ul{margin:0;padding-left:18px;font-size:13px;display:grid;gap:3px}
.tk-why-cov{margin:0;font-size:11px;color:var(--text-secondary)}
.tk-why .muted-note{margin-top:14px;font-size:11px;line-height:1.5}
@media(max-width:900px){#tokens .tk-score{align-items:flex-start}}
#tokens .tk-lowcov b{color:var(--text-secondary);opacity:.7}
.tk-why-withheld{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--warn,#e0b341)}

/* a never-scanned token offers the scan that would fill the column in */
/* An unknown Trust cell keeps the em dash (bounded absence) but invites the scan
   that would establish it, so the column reads as pending rather than broken. */
#tokens .tk-trust-actionable{cursor:pointer;border-radius:6px}
#tokens .tk-trust-actionable:hover{color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}
#tokens .tk-trust-actionable:focus-visible{outline:2px solid var(--green-dark);outline-offset:2px}

/* Unknown is a first-class state, not a gap. The dash stays as the value; the label
   names the state and the cell offers the action that would resolve it. */
#tokens .tk-trust-state{display:block;font:500 9px/1.3 var(--font-ui);color:var(--text-secondary);opacity:.85;white-space:normal;overflow-wrap:anywhere;max-width:100%}
#tokens .tk-trust-actionable::after{content:"Scan 92";display:block;font:600 9px/1.3 var(--font-ui);color:var(--green-dark);opacity:0;transition:opacity .12s}
#tokens .tk-trust-actionable:hover::after,#tokens .tk-trust-actionable:focus-visible::after{opacity:1}
#tokens .tk-trust{min-width:0;overflow-wrap:anywhere}
#tokens .tk-trust>*{max-width:100%;min-width:0}

/* No descendant of the evidence cell may exceed its grid track. The regression test
   guards the component boundary, not merely whether the document happens to scroll. */
#tokens .tk-trust,#tokens .tk-fomo,#tokens .tk-quality{min-width:0}
#tokens .tk-trust *,#tokens .tk-fomo *,#tokens .tk-quality *{max-width:100%;min-width:0;overflow-wrap:anywhere}
#tokens .tk-trust em,#tokens .tk-trust small{white-space:normal}
#tokens .tk-building{display:block;font:600 8px/1.3 var(--font-ui);letter-spacing:.04em;color:var(--warn,#e0b341);opacity:.9}
.tk-traj{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px;font-size:12px}
.tk-traj li{display:flex;justify-content:space-between;gap:16px}
.tk-traj span{color:var(--text-secondary)}
.tk-traj b{font-variant-numeric:tabular-nums}

/* ---------- Trading cost ----------
   Severity is carried by colour AND by a word, never by colour alone. An extreme
   market is stated plainly rather than styled as an opportunity. */
#tokens .tk-cost{min-width:0}
#tokens .tk-coststate{display:block;font:400 10px/1.3 var(--font-ui);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tokens .tk-score.tk-cost-normal b{color:var(--ink)}
#tokens .tk-score.tk-cost-elevated b{color:var(--warn,#b26a00)}
#tokens .tk-score.tk-cost-severe b{color:var(--danger,#c0392b)}
#tokens .tk-score.tk-cost-extreme b{color:var(--danger,#c0392b)}
#tokens .tk-score.tk-cost-extreme{background:color-mix(in srgb,var(--danger,#c0392b) 10%,transparent);border-radius:var(--radius-sm,4px)}
#tokens .tk-score.tk-cost-extreme .tk-band,#tokens .tk-score.tk-cost-severe .tk-band{color:var(--danger,#c0392b);font-weight:600}

/* ---------- extreme cost gate ----------
   Deliberately plain. The destructive-looking styling belongs on the number, not on
   a button, and "Cancel" is the focused default. */
.cost-gate{border:0;padding:0;background:transparent;max-width:min(440px,92vw)}
.cost-gate::backdrop{background:rgb(0 0 0/.55)}
.cost-gate-body{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg,10px);padding:var(--space-4,18px);display:flex;flex-direction:column;gap:var(--space-3,12px)}
.cost-gate-body h2{margin:0;font:600 16px/1.3 var(--font-ui);color:var(--danger,#c0392b)}
.cost-gate-body p{margin:0;font:400 13px/1.55 var(--font-ui)}
.cost-gate-note{color:var(--ink-3);font-size:12px!important}
.cost-gate-acts{display:flex;gap:var(--space-2,8px);flex-wrap:wrap;margin-top:var(--space-2,8px)}
.cost-gate-acts button{flex:1 1 auto;min-width:140px;padding:10px var(--space-3,12px);border-radius:var(--radius-md,8px);font:500 13px/1 var(--font-ui);cursor:pointer}
.cost-gate-cancel{border:1px solid var(--line);background:var(--card);color:var(--ink)}
.cost-gate-go{border:1px solid var(--line);background:transparent;color:var(--ink-2,var(--ink))}
.cost-gate-go:hover{border-color:var(--danger,#c0392b);color:var(--danger,#c0392b)}

/* A score that is qualified says so beside itself, never only in a tooltip. */
#tokens .tk-qual{display:block;font:500 9px/1.3 var(--font-ui);color:var(--danger,#c0392b)}
#tokens .tk-score.tk-score-qualified b{opacity:.7}
#tokens .tk-score.tk-cost-feeonly b{color:var(--ink)}
#tokens .tk-score.tk-cost-unknown b{color:var(--ink-3)}
#tokens .tk-score.tk-cost-unknown .tk-band{color:var(--ink-2,var(--ink-3))}

/* ---------- grouped sort control ---------- */
.tokens-sortrow{display:flex;align-items:center;gap:var(--space-2,8px);flex-wrap:nowrap;margin:0;min-width:0}
.tk-sortlabel{font:600 10px/1 var(--font-ui);letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
.tk-sortselect{padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-sm,6px);background:var(--card);color:var(--ink);font:500 12px/1.2 var(--font-ui);max-width:100%}
.tk-sortnote{margin:0;font:400 11px/1.5 var(--font-ui);color:var(--ink-3)}
.tk-sortnote i{font-style:normal;opacity:.85}
.tk-sortnote-degraded{color:var(--warn,#b26a00)}
.tk-sortnote-slot:empty{display:none}
@media (max-width:430px){
  .tokens-sortrow{gap:6px}
  .tk-sortselect{flex:1 1 auto;min-width:0}
}

/* ---------- filter drawer (scoped tfd-) ---------- */
.tokens-filterrow{display:flex;gap:var(--space-2,8px);margin:0 0 var(--space-2,8px)}
.tokens-filter-btn{padding:6px 12px;border:1px solid var(--line);border-radius:var(--radius-sm,6px);background:var(--card);color:var(--ink);font:500 12px/1.2 var(--font-ui);cursor:pointer}
.tokens-filter-btn:hover{border-color:var(--ink-3)}
.tokens-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.tfd-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tfd-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink-2,var(--ink));font:500 11px/1.2 var(--font-ui);cursor:pointer}
.tfd-chip:hover{border-color:var(--danger,#c0392b);color:var(--danger,#c0392b)}
.tfd-chip i{font-style:normal;opacity:.6}
.tfd-clear{padding:4px 8px;border:1px dashed var(--line);border-radius:999px;background:transparent;color:var(--ink-3);font:500 11px/1.2 var(--font-ui);cursor:pointer}

.tokens-filter-drawer{border:0;padding:0;background:transparent;margin-left:auto;margin-right:0;height:100%;max-height:100vh;width:min(400px,94vw)}
.tokens-filter-drawer::backdrop{background:rgb(0 0 0/.5)}
.tfd-shell{display:flex;flex-direction:column;height:100vh;max-height:100vh;background:var(--card);border-left:1px solid var(--line)}
.tfd-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3,14px);border-bottom:1px solid var(--line);flex:0 0 auto}
.tfd-head h2{margin:0;font:600 14px/1 var(--font-ui)}
.tfd-x{border:0;background:transparent;color:var(--ink-3);font-size:15px;cursor:pointer;padding:4px 8px}
.tfd-body{flex:1 1 auto;overflow-y:auto;padding:var(--space-3,14px);display:flex;flex-direction:column;gap:var(--space-4,18px)}
.tfd-group h3{margin:0 0 8px;font:600 9.5px/1 var(--font-ui);letter-spacing:.09em;color:var(--ink-3)}
.tfd-ctrl{margin:0 0 10px;display:flex;flex-direction:column;gap:4px}
.tfd-ctrl>label{font:500 11.5px/1.3 var(--font-ui);color:var(--ink-2,var(--ink))}
.tfd-range{display:flex;align-items:center;gap:6px}
.tfd-unit{font:500 10px/1 var(--font-ui);color:var(--ink-3);min-width:22px}
.tfd-in{flex:1 1 0;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius-sm,6px);background:var(--bg,transparent);color:var(--ink);font:400 12px/1.2 var(--font-ui)}
.tfd-dash{font:400 10px/1 var(--font-ui);color:var(--ink-3)}
.tfd-win{padding:5px 8px;border:1px solid var(--line);border-radius:var(--radius-sm,6px);background:var(--bg,transparent);color:var(--ink);font:400 11px/1.2 var(--font-ui)}
.tfd-inc{display:inline-flex;align-items:center;gap:6px;font:400 10.5px/1.3 var(--font-ui);color:var(--ink-3)}
.tfd-opts{display:flex;flex-wrap:wrap;gap:6px}
.tfd-opt{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid var(--line);border-radius:var(--radius-sm,6px);font:400 11px/1.2 var(--font-ui);cursor:pointer}
.tfd-none{margin:0;font:400 11px/1.4 var(--font-ui);color:var(--ink-3)}
.tfd-foot{flex:0 0 auto;border-top:1px solid var(--line);padding:var(--space-3,14px);display:flex;flex-direction:column;gap:8px}
.tfd-count{margin:0;font:500 11.5px/1.4 var(--font-ui);color:var(--ink-3)}
.tfd-acts{display:flex;gap:8px;flex-wrap:wrap}
.tfd-acts button{flex:1 1 auto;min-width:88px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-sm,6px);background:var(--card);color:var(--ink);font:500 12px/1 var(--font-ui);cursor:pointer}
.tfd-acts .tfd-apply{border-color:var(--ink-3)}
@media (max-width:640px){
  .tokens-filter-drawer{width:100vw;max-width:100vw;margin:0}
  .tfd-shell{border-left:0}
  .tfd-acts button{flex:1 1 100%}
}
.tk-sortalt{margin-left:6px;padding:3px 8px;border:1px solid var(--line);border-radius:var(--radius-sm,6px);background:var(--card);color:var(--ink);font:500 11px/1.2 var(--font-ui);cursor:pointer}
.tk-sortalt:hover{border-color:var(--ink-3)}

/* ---------- research status ---------- */
.research-status{margin:0;font:400 11px/1.4 var(--font-ui);color:var(--ink-3)}
.research-status>summary{cursor:pointer;display:flex;align-items:center;gap:8px;list-style:none}
.research-status>summary::-webkit-details-marker{display:none}
.rs-hint{margin-left:auto;font-size:10px;opacity:.7;text-decoration:underline}
.rs-body{padding:8px 0 0;display:flex;flex-direction:column;gap:6px}
.rs-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rs-row b{font-weight:600;color:var(--ink-2,var(--ink));min-width:150px}
.rs-state{font-weight:500}
.rs-row[data-tone="on"] .rs-state{color:var(--green-dark,#2e7d32)}
.rs-row[data-tone="off"] .rs-state{color:var(--ink-3)}
.rs-num{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.85}
.rs-dot{width:7px;height:7px;border-radius:50%;background:var(--green-dark,#2e7d32);flex:none}
.rs-note{margin:0;font-size:10.5px;opacity:.85}
@media (max-width:430px){ .rs-row b{min-width:0} .rs-num{margin-left:0;width:100%} }
/* Stage explanation for a missing market value: says where the data stopped. */
#tokens .tk-mkstate{display:block;font:400 9.5px/1.3 var(--font-ui);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ---------- columns control ---------- */
.tokens-colwrap{position:relative}
.tokens-cols-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);font:500 12.5px/1 var(--font-ui);cursor:pointer}
.tokens-cols-btn:hover,.tokens-cols-btn[aria-expanded="true"]{border-color:var(--text-secondary);background:var(--surface-subtle)}
.tokens-cols-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:40;width:min(260px,calc(100vw - 32px));padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card);box-shadow:0 18px 48px -18px rgba(0,0,0,.35)}
.tokens-cols-pop[hidden]{display:none}
.tokens-cols-pop h4{margin:0 0 var(--space-2);font:600 10.5px/1.5 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.tkc-opt{display:flex;align-items:center;gap:8px;padding:5px 0;font:400 12.5px/1.4 var(--font-ui);color:var(--ink);cursor:pointer}
.tkc-opt input{accent-color:var(--green-dark);width:15px;height:15px;flex:none}
.tkc-opt[data-locked="1"]{opacity:.55;cursor:default}
.tkc-reset{margin-top:var(--space-2);padding:5px 0 0;border:0;border-top:1px solid var(--line);background:none;color:var(--green-dark);font:600 12px/1.5 var(--font-ui);cursor:pointer;width:100%;text-align:left}
.tkc-reset:hover{text-decoration:underline}

/* ---------- shared column template ---------- */
#tokens .tk-table{--tk-cols:minmax(200px,1.8fr) minmax(74px,.9fr) minmax(70px,.7fr) minmax(82px,.9fr) minmax(82px,.9fr) minmax(76px,.85fr) minmax(76px,.85fr) minmax(104px,1.1fr) minmax(96px,.9fr)}
/* Must out-specify the per-column display rules below (e.g. .tk-tr>.tk-change),
   so a column the user switched off cannot re-appear and add a second grid row. */
#tokens .tk-table .tk-tr>.tk-colhidden,#tokens .tk-table .tk-head>.tk-colhidden{display:none}
/* Watch moved inside identity: it is a property of the token, not its own column. */
#tokens .tk-table .tk-tr>.tk-tok{display:flex;align-items:center;gap:var(--space-2);min-width:0}
#tokens .tk-tr .tk-star{flex:0 0 auto;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;color:var(--ink-3);cursor:pointer;border-radius:var(--radius-sm)}
#tokens .tk-tr .tk-star:hover{color:var(--ink);background:var(--surface-subtle)}
#tokens .tk-tr .tk-star[aria-pressed="true"]{color:var(--green-dark)}
#tokens .tk-tr .tk-star[aria-pressed="true"] .ic{fill:currentColor}
#tokens .tk-head>.tk-tok{padding-left:34px}
/* The symbol is the route to the token page; it must look like one. */
#tokens a.tk-sym{color:var(--ink);font:650 14px/1.35 var(--font-ui);text-decoration:none;border-bottom:1px solid transparent}
#tokens a.tk-sym:hover,#tokens a.tk-sym:focus-visible{color:var(--green-dark);border-bottom-color:currentColor}

/* ---------- readable rows: one line of identity, one compact action ----------
   Scores and their coverage sit on two short lines instead of a vertical tower, so
   the limitation stays visible without making the row twice as tall. */
#tokens .tk-table .tk-tr:not(.tk-head){min-height:56px;max-height:none}
#tokens .tk-tr>span{min-width:0}
#tokens .tk-tr .tk-idcol{min-width:0;display:flex;flex-direction:column;gap:1px}
#tokens .tk-tr .tk-line1{display:flex;align-items:baseline;gap:6px;min-width:0}
#tokens .tk-tr .tk-name{font:400 12px/1.35 var(--font-ui);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#tokens .tk-tr .tk-meta{display:flex;align-items:center;gap:5px;font:400 11.5px/1.3 var(--font-ui);color:var(--ink-3);min-width:0;flex-wrap:nowrap;overflow:hidden}
#tokens .tk-tr .tk-meta>*{flex:0 0 auto}
#tokens .tk-score{display:flex;flex-direction:column;align-items:flex-end;gap:0;border:0;background:none;padding:0;cursor:pointer;line-height:1.25;width:100%}
#tokens .tk-score b{font:600 14px/1.25 var(--font-ui);font-variant-numeric:tabular-nums;color:var(--ink)}
#tokens .tk-cov{font:400 11px/1.3 var(--font-ui);color:var(--ink-3);font-variant-numeric:tabular-nums}
#tokens .tk-band{font:500 10.5px/1.3 var(--font-ui);color:var(--text-secondary);text-transform:none;letter-spacing:0}
#tokens .tk-building{font:400 10.5px/1.3 var(--font-ui);color:var(--ink-3)}
#tokens .tk-act{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-1)}
#tokens .tk-act .tk-scan{min-height:32px;height:32px;padding:0 10px;font:500 12px/1 var(--font-ui);white-space:nowrap}
/* one quiet treatment for every unknown in the grid; the reason is on the cell */
#tokens .tk-tr .mk-dash,#tokens .tk-tr .tk-unknown,#tokens .tk-tr .tk-trust-none{color:var(--ink-3);font-variant-numeric:tabular-nums;cursor:help}
#tokens .tk-tr .mk-dash:focus-visible{outline:2px solid var(--green-dark);outline-offset:2px;border-radius:3px}
#tokens .tk-tr .tk-mkstate{display:none}
#tokens .tk-num,#tokens .tk-price,#tokens .tk-mcap,#tokens .tk-liq,#tokens .tk-chg{font-variant-numeric:tabular-nums}
#tokens .tk-trust{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
#tokens .tk-trust em{font-style:normal;font-size:11px;color:var(--ink-3)}
#tokens .tk-trust small{font-size:11px}
#tokens .tk-lowcov{font-size:11px}
/* subtle grouping: market · intelligence · evidence, without boxing every cell */
#tokens .tk-tr>[data-col="fomo"]{box-shadow:inset 1px 0 0 var(--line)}
#tokens .tk-tr>[data-col="trust"]{box-shadow:inset 1px 0 0 var(--line)}
#tokens .tk-tr>[data-col="fomo"],#tokens .tk-tr>[data-col="trust"]{padding-left:var(--space-2)}

/* State words belong on one line beside their dash, not stacked into a tower (§10). */
@media(min-width:1024px){#tokens .tk-tr>.tk-trust,#tokens .tk-tr>.tk-cost{white-space:nowrap}}
#tokens .tk-tr .tk-trust-state,#tokens .tk-tr .tk-coststate{display:inline;margin-left:5px;font:400 11px/1.3 var(--font-ui);color:var(--ink-3);white-space:nowrap}
#tokens .tk-tr>.tk-trust{flex-direction:row;align-items:baseline;justify-content:flex-end;gap:4px;flex-wrap:nowrap;overflow:hidden}
#tokens .tk-tr>.tk-trust>*{flex:0 0 auto}

/* ---------- phone / tablet cards: three bands ----------
   Identity+movement, then the three market figures, then the three scores with the
   one action. The previous six-band card repeated a label for every optional column
   and ran to 217px; those columns are off by default now, so the card says the same
   things in three rows. Heights are targets - a long name or a warning may grow. */
@media(max-width:1023px){
  #tokens .tk-table .tk-tr:not(.tk-head){
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;
    grid-template-areas:"tok tok tok chg" "price mcap liq liq" "fomo quality trust act";
    row-gap:4px;min-height:0;padding:8px var(--space-3)}
  #tokens .tk-table .tk-tr>[data-col="tok"]{grid-area:tok}
  #tokens .tk-table .tk-tr>[data-col="chg"]{grid-area:chg;justify-self:end;align-self:center}
  #tokens .tk-table .tk-tr>[data-col="price"]{grid-area:price}
  #tokens .tk-table .tk-tr>[data-col="mcap"]{grid-area:mcap}
  #tokens .tk-table .tk-tr>[data-col="liq"]{grid-area:liq}
  #tokens .tk-table .tk-tr>[data-col="fomo"]{grid-area:fomo}
  #tokens .tk-table .tk-tr>[data-col="quality"]{grid-area:quality}
  #tokens .tk-table .tk-tr>[data-col="trust"]{grid-area:trust}
  #tokens .tk-table .tk-tr>[data-col="act"]{grid-area:act;align-self:center}
  /* the score group keeps its labels and coverage, left-aligned as a band */
  #tokens .tk-table .tk-tr>[data-col="fomo"],
  #tokens .tk-table .tk-tr>[data-col="quality"],
  #tokens .tk-table .tk-tr>[data-col="trust"]{padding-top:5px;border-top:1px solid var(--line);box-shadow:none;padding-left:0}
  #tokens .tk-table .tk-tr>[data-col="trust"]{justify-content:flex-start}
  #tokens .tk-table .tk-tr .tk-score{align-items:flex-start}
  #tokens .tk-table .tk-tr>[data-col="act"]{padding-top:5px;border-top:1px solid var(--line)}
  /* a comfortable touch target, even though the control reads compact */
  #tokens .tk-act .tk-scan{min-height:40px;height:40px;padding:0 12px}
  #tokens .tk-tr .tk-star{width:40px;height:40px}
}
@media(max-width:767px){
  /* one card per row; the three bands are unchanged */
  #tokens .tk-table{grid-template-columns:1fr}
}

/* compact change indicator inside identity — visible whether or not the
   Recent change column is shown */
#tokens .tk-sigdot{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border:1px solid var(--green-dark);border-radius:999px;background:transparent;color:var(--green-dark);font:600 10.5px/1 var(--font-ui);font-variant-numeric:tabular-nums;cursor:pointer}
#tokens .tk-sigdot:hover{background:color-mix(in srgb,var(--green-dark) 14%,transparent)}

/* On a card the trust state wraps instead of running past its own edge. */
@media(max-width:1023px){
  /* Trust gets the widest of the three score tracks, because its state is a phrase
     rather than a number. It CLIPS rather than overflowing: the full wording stays
     on the cell (title/aria-label) and in quick detail. */
  #tokens .tk-table .tk-tr:not(.tk-head){grid-template-columns:minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.35fr) auto}
  #tokens .tk-tr>[data-col="trust"]{overflow:hidden;min-width:0}
  /* A flex item does not shrink below its content unless it is told to, so
     overflow:hidden on the cell could never bite while the item was flex:0 0 auto. */
  #tokens .tk-tr>[data-col="trust"]>*{flex:0 1 auto;min-width:0}
  #tokens .tk-tr .tk-trust-state{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;margin-left:4px}
  #tokens .tk-tr>[data-col="fomo"],#tokens .tk-tr>[data-col="quality"]{overflow:hidden;min-width:0}
}

/* On a card the score and its coverage read as one line ("11 · 60% cov") instead of
   a stack. Coverage stays visible - it is the limitation, not decoration - but the
   score band stops costing the card two extra lines. */
@media(max-width:1023px){
  #tokens .tk-table .tk-tr .tk-score{flex-direction:row;align-items:baseline;gap:5px;flex-wrap:wrap}
  #tokens .tk-table .tk-tr .tk-score b{font-size:13.5px;line-height:1.2}
  #tokens .tk-table .tk-tr .tk-cov{font-size:10.5px;line-height:1.2}
  #tokens .tk-table .tk-tr .tk-band{font-size:10px;line-height:1.2}
  #tokens .tk-table .tk-tr:not(.tk-head){row-gap:3px;padding:7px var(--space-3)}
}

/* §9 type targets: secondary identity metadata reads at 12px, not 10.5px, and the
   coverage label keeps a legible size rather than shrinking to fit. */
#tokens .tk-tr .tk-meta,#tokens .tk-tr .tk-addr,#tokens .tk-tr .tk-agebadge{font-size:12px;line-height:1.35}
#tokens .tk-tr .tk-cov{font-size:11.5px}
#tokens .tk-head>span{font-size:12px}

/* ---------- identity must not be truncated to initials ----------
   The symbol IS the token's name; it never shrinks. Only the descriptive name
   gives up space, and the contract line below is the disambiguator when two
   tokens share a ticker. */
/* SHRINK PRIORITY, not "never shrink": the descriptive name gives up its space
   first and almost entirely, so an ordinary ticker is never cut to initials; the
   symbol only ellipsises when it alone still cannot fit, and it never escapes. */
#tokens .tk-tr a.tk-sym,#tokens .tk-tr .tk-sym{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tokens .tk-tr .tk-name{flex:0 999 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Coverage is a labelled fact, not a tiny all-caps stamp (§9). */
#tokens .tk-tr .tk-cov{text-transform:none;letter-spacing:0;opacity:1;font-weight:400}
#tokens .tk-tr .tk-cov i{font-style:normal;font-size:inherit}

/* The low-coverage marker sat in the same tiny uppercase voice as everything else,
   which made the limitation the least readable thing in the row. */
#tokens .tk-tr .tk-lowcov{font:500 11.5px/1.35 var(--font-ui);letter-spacing:0;text-transform:none;white-space:nowrap}

/* Trust reads as one line on desktop: value, then its limitation, then coverage/age.
   Stacked, the number looked like the finding and the limitation like a footnote. */
@media(min-width:1024px){
  #tokens .tk-tr>[data-col="trust"]{flex-direction:row;align-items:baseline;justify-content:flex-end;
    gap:5px;flex-wrap:nowrap;overflow:hidden;text-align:right}
  #tokens .tk-tr>[data-col="trust"]>*{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #tokens .tk-head>[data-col="trust"]{justify-content:flex-end;text-align:right}
}
/* A floating helper must never sit on top of a row's action (§13). */
#tokens .tk-table{padding-bottom:0}
body[data-view="tokens"] #tokens-list{padding-bottom:72px}

/* ---------- card band 3: the limitation must be readable ----------
   With real data the Trust state is a phrase ("Not investigated", "Queued #4"),
   and a 0.85/0.85/1.35/auto split clipped it to "Not inve...". Clipping the
   limitation while keeping the score is exactly the failure mode to avoid, so the
   score columns give way and the action becomes compact-but-labelled. */
@media(max-width:1023px){
  #tokens .tk-table .tk-tr:not(.tk-head){grid-template-columns:minmax(0,.78fr) minmax(0,.78fr) minmax(0,1.6fr) auto}
  #tokens .tk-act .tk-scan{padding:0 9px;gap:5px}
  #tokens .tk-tr>[data-col="trust"]{font-size:12px}
  #tokens .tk-tr .tk-trust-state{font-size:11.5px}
}

/* The CELL owns the single-line truncation on a card, not its children: as a column
   flex the state span was sized to itself and clipped no matter how wide the cell
   got. As one inline run the whole "- Not investigated" gets the full track. */
@media(max-width:1023px){
  #tokens .tk-table .tk-tr>[data-col="trust"]{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
  #tokens .tk-table .tk-tr>[data-col="trust"]>*{display:inline;max-width:none;overflow:visible;text-overflow:clip;float:none}
  #tokens .tk-table .tk-tr>[data-col="trust"]::before{content:"Trust ";font:600 9px/1.4 var(--font-ui);letter-spacing:.06em;color:var(--text-secondary);text-transform:uppercase}
}

/* ---------- sortable headers ----------
   Interactive headers must LOOK interactive, but an unsorted column does not get a
   loud icon: the direction glyph only gains weight on the column actually sorting. */
#tokens .tk-head .tk-sortable{cursor:pointer;user-select:none;border-radius:var(--radius-sm);padding-inline:2px;transition:color .12s ease}
#tokens .tk-head .tk-sortable:hover{color:var(--ink);background:var(--surface-subtle)}
#tokens .tk-head .tk-sortable:focus-visible{outline:2px solid var(--green-dark);outline-offset:1px}
#tokens .tk-head .th-arr{margin-left:4px;font-size:9px;opacity:.35;font-style:normal;flex:none}
#tokens .tk-head .tk-sortable:hover .th-arr{opacity:.7}
#tokens .tk-head .is-sorted{color:var(--ink);font-weight:700}
#tokens .tk-head .is-sorted .th-arr{opacity:1;color:var(--green-dark);font-size:10px}

/* ---------- identity metadata priority ----------
   Every child of the meta line was flex:0 0 auto, so when the line ran out of room
   the LAST items were simply cut off - which is how pool age and the venue badge
   disappeared at 1024-1180px. The address is already abbreviated and copyable, so
   it is the part that gives way; age and source are decision-relevant and stay. */
#tokens .tk-tr .tk-meta>.tk-addr{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tokens .tk-tr .tk-meta>.tk-srcslot,#tokens .tk-tr .tk-meta>.tk-agebadge{flex:0 0 auto}
#tokens .tk-tr .tk-agebadge{white-space:nowrap}
/* The brief's 240-280px identity budget at 1440: the floor was 200px and the shared
   track maths was handing Token only 237px. */
#tokens .tk-table{--tk-cols:minmax(240px,2fr) minmax(74px,.9fr) minmax(70px,.7fr) minmax(82px,.9fr) minmax(82px,.9fr) minmax(76px,.85fr) minmax(76px,.85fr) minmax(104px,1.1fr) minmax(96px,.9fr)}

/* ==========================================================================
   MOBILE TOKEN CARD - every column has a named, labelled home
   --------------------------------------------------------------------------
   The previous card named nine areas. Enabling an optional column therefore
   auto-placed it, which created implicit tracks and crushed the named ones:
   measured at 390px with Concentration, Trading cost and Recent change on,
   price/mcap/fomo/quality/trust collapsed to 7px and the page overflowed at
   1024px. Six tracks give every column a home whether or not it is enabled,
   and an unused row simply collapses.
   ========================================================================== */
@media(max-width:1023px){
  #tokens .tk-table .tk-tr:not(.tk-head){
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-areas:
      "tok    tok    tok     tok     tok   tok"
      "price  price  price   chg     chg   chg"
      "mcap   mcap   mcap    liq     liq   liq"
      "fomo   fomo   quality quality trust trust"
      "wshare wshare wshare  cost    cost  cost"
      "change change change  change  change change"
      "act    act    act     act     act   act";
    row-gap:10px;column-gap:10px;padding:13px var(--space-3);min-height:0;align-items:start}

  #tokens .tk-table .tk-tr:not(.tk-head)>*{min-inline-size:0;min-width:0}
  #tokens .tk-tr>[data-col="tok"]{grid-area:tok}
  #tokens .tk-tr>[data-col="price"]{grid-area:price}
  #tokens .tk-tr>[data-col="chg"]{grid-area:chg}
  #tokens .tk-tr>[data-col="mcap"]{grid-area:mcap}
  #tokens .tk-tr>[data-col="liq"]{grid-area:liq}
  #tokens .tk-tr>[data-col="wshare"]{grid-area:wshare}
  #tokens .tk-tr>[data-col="fomo"]{grid-area:fomo}
  #tokens .tk-tr>[data-col="quality"]{grid-area:quality}
  #tokens .tk-tr>[data-col="cost"]{grid-area:cost}
  #tokens .tk-tr>[data-col="trust"]{grid-area:trust}
  #tokens .tk-tr>[data-col="change"]{grid-area:change}
  #tokens .tk-tr>[data-col="act"]{grid-area:act}

  /* Labels are REAL elements, visible beside the value. The ::before labels this
     replaces could not be copied and vanished with the stylesheet. */
  #tokens .tk-tr .tk-lbl{display:block;font:500 12px/1.35 var(--font-ui);font-style:normal;
    letter-spacing:0;text-transform:none;color:var(--text-secondary);margin-bottom:1px}
  #tokens .tk-tr .tk-v{display:block;min-width:0}
  #tokens .tk-table .tk-tr>[data-col]::before{content:none!important}

  /* value typography: readable, tabular, never truncated with an ellipsis */
  #tokens .tk-tr>[data-col="price"] .tk-v,#tokens .tk-tr>[data-col="mcap"] .tk-v,
  #tokens .tk-tr>[data-col="liq"] .tk-v,#tokens .tk-tr>[data-col="chg"] .tk-v{
    font:600 16px/1.3 var(--font-ui);font-variant-numeric:tabular-nums;color:var(--ink);
    white-space:normal;overflow-wrap:anywhere;text-overflow:clip;overflow:visible}
  #tokens .tk-tr>[data-col="wshare"] .tk-v,#tokens .tk-tr>[data-col="cost"] .tk-v,
  #tokens .tk-tr>[data-col="change"] .tk-v{font:500 14px/1.4 var(--font-ui);
    font-variant-numeric:tabular-nums;color:var(--ink);white-space:normal;overflow:visible}

  /* the three assessment tiles keep their score AND its limitation */
  #tokens .tk-tr>[data-col="fomo"],#tokens .tk-tr>[data-col="quality"],
  #tokens .tk-tr>[data-col="trust"]{padding-top:10px;border-top:1px solid var(--line);
    box-shadow:none;padding-left:0;display:block;text-align:left;white-space:normal;overflow:visible}
  #tokens .tk-table .tk-tr .tk-score{flex-direction:row;align-items:baseline;gap:6px;
    flex-wrap:wrap;width:100%;justify-content:flex-start}
  #tokens .tk-table .tk-tr .tk-score b{font:600 19px/1.2 var(--font-ui)}
  #tokens .tk-table .tk-tr .tk-cov{font:400 12.5px/1.35 var(--font-ui);color:var(--text-secondary)}
  #tokens .tk-table .tk-tr .tk-band{font:500 12px/1.35 var(--font-ui)}
  #tokens .tk-table .tk-tr .tk-building{font:400 12px/1.35 var(--font-ui)}
  #tokens .tk-tr>[data-col="trust"] .tk-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;
    font:500 14px/1.4 var(--font-ui)}
  #tokens .tk-tr .tk-trust-state{display:inline;white-space:normal;font:400 12.5px/1.4 var(--font-ui);
    color:var(--text-secondary);margin-left:0;max-width:none;overflow:visible;text-overflow:clip}

  /* identity: symbol link, watch, address, venue and a labelled age basis */
  #tokens .tk-tr>[data-col="tok"]{display:flex;align-items:flex-start;gap:var(--space-2);
    overflow:visible;white-space:normal}
  #tokens .tk-tr .tk-idcol{min-width:0;flex:1 1 auto}
  #tokens .tk-tr .tk-line1{flex-wrap:wrap;row-gap:2px}
  /* A symbol may WRAP rather than be cut to initials, but a token name is
     attacker-controlled and may be one unbroken 130-character word. Wrapping alone
     cannot break such a string, so overflow-wrap is required - without it the card
     grew to 1787px at a 375px viewport and took the page with it. */
  #tokens .tk-tr a.tk-sym{font:650 17.5px/1.3 var(--font-ui);white-space:normal;
    overflow-wrap:anywhere;word-break:break-word;max-width:100%;overflow:hidden;min-width:0}
  #tokens .tk-tr .tk-name{white-space:normal;overflow-wrap:anywhere;word-break:break-word;
    overflow:hidden;max-width:100%;min-width:0;font:400 13px/1.4 var(--font-ui);flex:1 1 100%}
  #tokens .tk-tr .tk-meta{flex-wrap:wrap;row-gap:3px;overflow:visible;font-size:12.5px}
  #tokens .tk-tr .tk-star{width:44px;height:44px;flex:0 0 auto;margin:-6px -6px 0 0}

  /* actions: comfortable targets, no extra dock */
  #tokens .tk-tr>[data-col="act"]{display:flex;gap:var(--space-2);padding-top:10px;
    border-top:1px solid var(--line);justify-content:flex-start;flex-wrap:wrap}
  #tokens .tk-act .tk-scan{min-height:44px;height:44px;padding:0 16px;font-size:13.5px;flex:1 1 auto;
    justify-content:center}
  #tokens .tk-table{gap:11px}
}

/* Narrow phones and enlarged text: the assessment row drops to two columns and the
   evidence tile takes the full width rather than compressing to nothing. */
@media(max-width:379px){
  #tokens .tk-table .tk-tr:not(.tk-head){
    grid-template-areas:
      "tok    tok    tok     tok    tok   tok"
      "price  price  price   chg    chg   chg"
      "mcap   mcap   mcap    liq    liq   liq"
      "fomo   fomo   fomo    quality quality quality"
      "trust  trust  trust   trust  trust trust"
      "wshare wshare wshare  cost   cost  cost"
      "change change change  change change change"
      "act    act    act     act    act   act"}
}

/* The visible label belongs to the CARD layout. On the desktop table the column
   header already carries it, so showing it inside the cell duplicated the text and
   pushed the value out of its own track. */
#tokens .tk-tr .tk-lbl{display:none}
#tokens .tk-table .tk-tr:not(.tk-head)>[data-col]{justify-self:stretch}
@media(max-width:1023px){
  #tokens .tk-tr .tk-lbl{display:block}
}

/* ---------- twelve columns do not fit every desktop ----------
   With Concentration, Trading cost and Recent change all enabled the track floors
   exceed the container below ~1300px. The bounded container scrolls; the PAGE never
   does. Measured before this: document overflow at 1024px with all columns on. */
@media(min-width:1024px){
  /* The grid overflows only when the track FLOORS genuinely exceed the container,
     which is the twelve-column case. min-width:max-content was tried and removed: it
     forced that width unconditionally and leaked into page-level overflow even with
     the default nine columns. The id selector is required - the plain class lost to
     the base .tokens-grid rule and computed back to overflow:visible. */
  #tokens #tokens-list.tokens-grid{overflow-x:auto;overscroll-behavior-x:contain;min-width:0}
  /* a long execution state wraps inside its own cell instead of running past it */
  #tokens .tk-tr>[data-col="cost"]{white-space:normal;overflow:hidden}
  #tokens .tk-coststate{white-space:normal;overflow-wrap:anywhere}
  #tokens .tk-tr>[data-col="act"]{overflow:hidden}
}

/* The execution state is a phrase ("Market found · route unresolved"), not a number:
   on a narrow card it wraps inside its own cell rather than running past the edge. */
@media(max-width:1023px){
  #tokens .tk-tr>[data-col="cost"]{white-space:normal;overflow:hidden;min-width:0}
  #tokens .tk-tr>[data-col="cost"] .tk-v,#tokens .tk-tr .tk-coststate{white-space:normal;
    overflow-wrap:anywhere;overflow:hidden;text-overflow:clip;max-width:100%}
  #tokens .tk-tr .tk-score{max-width:100%}
  #tokens .tk-tr>[data-col="change"]{overflow:hidden}
  #tokens .tk-tr>[data-col="change"] .tk-v{overflow-wrap:anywhere}
  /* the missing-value dash and its state are two words, not one */
  #tokens .tk-tr .tk-coststate{margin-left:5px}
  /* no generated suffix survives on a labelled card cell */
  #tokens .tk-table .tk-tr>[data-col]::after{content:none!important}
}

/* Same containment for every card cell: hostile metadata must never set the page width. */
@media(max-width:1023px){
  #tokens .tk-tr>[data-col="tok"]{overflow:hidden;max-width:100%}
  #tokens .tk-tr .tk-idcol,#tokens .tk-tr .tk-line1,#tokens .tk-tr .tk-meta{min-width:0;max-width:100%;overflow:hidden}
  #tokens .tk-tr .tk-meta>*{max-width:100%;overflow-wrap:anywhere}
}