/* token-hdr.css — THE SLIM HEADER (founder 17 Oct, trade page review: "the holder/volume/age - they're all in square
   boxes, dont like it. also think desktop this can be compacted nicer than it is (the full info bar above the chart)").
   Option A of concepts/2026-10-17-token-header.html. On desktop the info bar above the chart is ONE band, 64 px (the
   token icon's own 52 px, the xl role of edge-chain.js ICONSIZE, plus the 6 px padding it always had):

       [icon] 1EDGE         $266.1K –          24H VOL │ HOLDERS │ AGE        Trading on ◆ Meteora  [CALL] [PnL] [ANALYTICS]
              $1EDGE ♛ ⛨    ↓ -2.9% $0.0₃2661  $33.6K  │ 424     │ 3d

   - the stats are text, label over value, split by the product's hairline (--line): no boxes, no cells;
   - the marks door (#tokMarks) moves up beside the symbol, so the name block is two lines, not three;
   - every slot has a fixed width, so the price, the stats, the venue and the buttons sit at the same x on every token
     (the GRID rule, 08 Oct). The stats column alone grows, and only on a token with limits (the LIMITS cell);
   - 1500 px and up: everything on one line (the same breakpoint as today's one-row header);
   - 1100–1499 px (laptops, and the founder's screen at 125 %): the same band; the buttons sit over the venue line on the
     right (room for the LIMITS cell and the Boost rocket too); under 1280 px the buttons drop their words (the phone
     header's squares; title / aria-label still say what they do);
   - under 1100 px (tablets, phones): nothing here applies. The phone header is unchanged.
   Layout only: no id changes and no script reads any of this (#hHolders, #sec-holders and the rest are untouched).
   Specificity: every rule starts `html body .lwrap > .thdr`, so it outranks the page's own header rules, which are spread
   over <style> blocks later in the document (the surface pass's :is(body,body.tek-mode) .thdr .ts is (0,3,1)). */
@media (min-width:1100px){
  html body .lwrap > .thdr{
    grid-template-columns:minmax(120px,210px) 118px max-content minmax(0,1fr) 168px max-content;
    grid-template-areas:"id price stats . bond acts";
    column-gap:16px;row-gap:0;padding:6px 12px 6px 10px;align-items:center;
  }
  /* identity: the name over [symbol + crown | marks] */
  html body .lwrap > .thdr .tid-txt{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:auto auto;column-gap:6px;align-items:center}
  html body .lwrap > .thdr .tname{grid-column:1 / -1}
  html body .lwrap > .thdr .tsym{grid-column:1;margin-top:4px;min-width:0}
  html body .lwrap > .thdr .tmk-row,
  html body .lwrap > .thdr .tmk-row:empty{grid-column:2;margin-top:4px;height:14px;min-height:14px;align-items:center}
  /* the stats: text, not cells. Label over value, a hairline before each */
  html body .lwrap > .thdr .tstats{display:flex;align-items:stretch;border:0;background:none;box-shadow:none;gap:0;justify-self:start;flex-grow:0}
  html body .lwrap > .thdr .ts{width:auto;min-width:66px;padding:2px 16px 2px 14px;border:0;border-left:1px solid var(--line);border-image:none;border-radius:0;background:none;box-shadow:none;display:flex;flex-direction:column;justify-content:center;gap:5px}
  html body .lwrap > .thdr .ts:last-child{padding-right:0}
  html body .lwrap > .thdr .tsl{font-size:7px;letter-spacing:.12em;margin:0;line-height:1;color:var(--g5)}
  html body .lwrap > .thdr .tsv,
  html body .lwrap > .thdr #hStatAge{font-size:13px!important;line-height:1}   /* !important: #hStatAge carries an inline 11 px */
  /* the venue / bonding slot sits right, beside the buttons */
  html body .lwrap > .thdr .hbond-wrap{width:168px;max-width:168px;justify-self:end}
  html body .lwrap > .thdr .shield-col{justify-self:end;justify-content:flex-end;gap:6px;min-width:0;overflow:visible}
}
/* laptops: the same band, the right column stacks the buttons over the venue line (the one line does not fit beside the
   trade panel at these widths) */
@media (min-width:1100px) and (max-width:1499px){
  html body .lwrap > .thdr{grid-template-columns:minmax(110px,200px) 112px max-content minmax(0,1fr) max-content;
    grid-template-areas:"id price stats . acts" "id price stats . bond";grid-template-rows:auto auto;row-gap:5px}
  html body .lwrap > .thdr .shield-col{align-self:end}
  html body .lwrap > .thdr .hbond-wrap{align-self:start;width:168px;max-width:168px}
  html body .lwrap > .thdr .tb-venue{justify-content:flex-end}
}
@media (min-width:1100px) and (max-width:1279px){
  html body .lwrap > .thdr{column-gap:12px}
  html body .lwrap > .thdr .ts{min-width:58px;padding:2px 12px 2px 11px}
  html body .lwrap > .thdr .shield-btn{width:28px;padding:0;gap:0}
  html body .lwrap > .thdr .shield-btn#shieldBtn{padding:0}
  html body .lwrap > .thdr .shield-btn .sb-t{display:none}
}