/* ══════════════════════════════════════════════════════════════════════════
   ENTITY PROFILE (collection / case / weapon / paint kit / rarity / sticker
   capsule / tournament / team / catalogue types)
   ──────────────────────────────────────────────────────────────────────────
   The Entity Profile is the Item Profile's sibling, not a second design. It
   composes the canonical §32 components from mct.css and adds nothing of its
   own where one of them fits:

     .mct-cols/.mct-side/.mct-work   the two-column workspace + phone reflow
     .card/.card-h/.card-b           every section container   (via MCT.card)
     .mct-render/.mct-render-rar     the identity render stage
     .mct-pgrid/.mct-pcard           every item tile    (via MCT.productCard)
     .mct-rows                       every key/value statistic list
     .mct-bc                         the breadcrumb (+ its phone back link)
     .kpi/.kpis, .rel-chip           headline figures, knowledge-graph links

   What IS this page's own, and all that lives here: the identity card's text
   block, the composition block (rarity + distribution as one compact
   visualisation) and the item grid's pager.
   ══════════════════════════════════════════════════════════════════════════ */

/* Body column, centred to the same width as the shell header/footer and the
   Item Profile, so all four edges line up across the product. */
body.ent-page { --ent-pad:var(--mct-shell-pad); }
.ent { width:100%; max-width:var(--mct-shell-max); margin:0 auto; box-sizing:border-box;
       padding:18px var(--ent-pad) 80px; }

/* ── Identity card ─────────────────────────────────────────────────────────
   The render stage (.mct-render) sits at the top of the card body; the kind,
   title, chips and description follow it on one tight vertical rhythm. An
   entity with no artwork (a rarity, a catalogue type) simply omits the stage
   and the block reads as a title card. ── */
.ent-render { height:210px; }
.ent-kind { display:flex; align-items:center; gap:6px; margin-top:12px;
            font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
            color:var(--mct-accent); }
.ent-kind i { font-size:13px; }
.ent-title { font-size:20px; font-weight:800; color:var(--mct-text-1); margin:8px 0 0;
             line-height:1.24; letter-spacing:-.01em; }
.ent-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.echip { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:var(--r-sm);
         font-size:var(--fs-sm); background:var(--surface-1); border:1px solid var(--mct-card-border);
         color:var(--mct-text-2); }
.echip i { font-size:13px; opacity:.75; }
.echip.ok { color:#22c55e; background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.25); }
.ent-desc { font-size:13px; line-height:1.6; color:var(--mct-text-2); margin:12px 0 0; }
/* Identity, wide layout: a catalogue type has no sidebar-worth of metadata, so
   its identity card becomes a band — text left, chips right, no render. */
.ent-band { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; }
.ent-band-t { min-width:0; }
.ent-band .ent-kind { margin-top:0; }
.ent-band .ent-title { margin:6px 0 0; }
.ent-band .ent-chips { margin-top:0; }
.ent-band .ent-desc { flex-basis:100%; }

/* ── Statistics ────────────────────────────────────────────────────────────
   Hierarchy, not a wall of equal tiles: the two figures a trader reads first
   are KPI tiles, everything else is a quiet key/value row underneath. The
   secondary line under a value (which item is the most expensive) is muted so
   the number stays the thing being read. ── */
.ent-stats .kpis { margin-bottom:4px; }
.ent-stats .mct-rows strong small { display:block; margin-top:2px; font-size:var(--fs-xs);
  font-weight:500; color:var(--mct-text-3); overflow-wrap:anywhere; }
.ent-note { font-size:var(--fs-sm); color:var(--mct-text-3); line-height:1.5; margin:10px 0 0; }

/* ── Composition (rarity + weapon/type distribution) ───────────────────────
   One information block, not two unrelated cards. Each dimension is a single
   100%-stacked bar — the shape of the whole set in ten pixels of height —
   with a two-column key underneath naming the largest contributors. The old
   one-row-per-value bar chart cost ~16px of height per value in each of two
   columns; this is a fixed ~95px per dimension however many values there are.

   The bar carries the proportions and the key carries the names, so the key is
   capped: anything past the cap is folded into a single trailing entry rather
   than dropped, and the counts still add up to the total. ── */
.ent-dist { display:flex; flex-direction:column; gap:14px; }
.ent-dist > * + * { padding-top:14px; border-top:1px solid var(--surface-hairline); }
.dist-hd { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
.dist-t { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--mct-text-2); }
.dist-n { font-size:var(--fs-xs); color:var(--mct-text-3); font-variant-numeric:tabular-nums; }
.dist-seg { display:flex; gap:2px; height:10px; border-radius:5px; overflow:hidden; background:var(--surface-1); }
/* Slices are sized by an inline flex-basis percentage. They must never grow,
   but they DO shrink: the 2px gaps come out of the same 100%, and a slice too
   thin to see is still information, so each keeps a 3px floor. */
.dist-seg span { flex-grow:0; min-width:3px; border-radius:2px; }
.dist-key { list-style:none; margin:9px 0 0; padding:0;
            display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:1px 14px; }
.dist-key li { display:flex; align-items:center; gap:7px; padding:3px 0; font-size:var(--fs-sm); color:var(--mct-text-2); min-width:0; }
.dist-key .dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.dist-key .k { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dist-key b { margin-left:auto; color:var(--mct-text-1); font-weight:600; font-variant-numeric:tabular-nums; }
.dist-key li.rest .k, .dist-key li.rest b { color:var(--mct-text-3); font-weight:500; }

/* ── Related (knowledge-graph links) ──────────────────────────────────────
   Chips, not tiles: a collection can relate to thirty paint kits, and thirty
   render cards would bury the page. Grouped by relation with a quiet label. */
.rel-group + .rel-group { margin-top:13px; }
.rel-group .rg-lbl { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em;
                     color:var(--mct-text-3); margin-bottom:7px; }

/* ── Item grid pager ──────────────────────────────────────────────────────
   A 100-item collection is six screens of scrolling. The grid opens at one
   screenful and grows on demand; the button states exactly what is left. */
   The control itself is the canonical button (.mct-btn); only its placement
   is here. */
.ent-more { display:flex; justify-content:center; margin-top:var(--sp-4); }

/* ── Empty / loading / error states ───────────────────────────────────────── */
.ent-empty { color:var(--mct-text-3); font-size:var(--fs-base); padding:6px 0; }
.ent-load { text-align:center; color:var(--mct-text-3); padding:80px 0; }
.ent-err { text-align:center; padding:64px 24px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.ent-err i { font-size:44px; color:var(--mct-text-3); opacity:.4; }
.ent-err h2 { font-size:18px; font-weight:700; color:var(--mct-text-1); margin:0; }
.ent-err p { font-size:14px; color:var(--mct-text-2); margin:0; }

/* ══════════════════════════════════════════════════════════════════════════
   PHONES (≤768px) — a dedicated layout, not the desktop page compressed.
   The sidebar is gone and every section is a full-width block, in the reading
   order the page module gives them (identity → statistics → items →
   composition → related) by MOVING the section nodes. The card rhythm, the
   one-column reflow, the two-column tile grid, the roomier metadata rows and
   the breadcrumb's collapse to a single back link are all the canonical §32
   phone behaviour and are NOT restated here.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  body.ent-page { --ent-pad:14px; }
  .ent { padding:10px var(--ent-pad) 48px; }

  /* The render becomes a short landscape band: CS2 artwork is wide, so a
     full-width 132px strip shows it LARGER than a square panel would while
     taking under a fifth of the viewport. The watermark is sized in
     container-query WIDTH units, so re-anchor it to the band's height or the
     "M" is cropped top and bottom. */
  .ent-render { height:132px; }
  .ent-render img { padding:8px 14px; }
  .ent-render .fam-mark { font-size:calc(132px * .92); }

  .ent-title { font-size:18px; }
  /* The band collapses to a stack — side-by-side text and chips at 375px
     leaves neither enough room. */
  .ent-band { display:block; }
  .ent-band .ent-chips { margin-top:11px; }

  /* The key goes to one column: two 132px columns at this width truncate
     every rarity name. */
  .dist-key { grid-template-columns:1fr; }
  .dist-key li { padding:5px 0; font-size:var(--fs-base); }

  /* Thumb-sized targets (Standard §24: ≥ ~40px). There is no global
     border-box reset here, so they are built from padding. */
  .echip, .rel-chip { padding:10px 13px; }
  .ent-more .mct-btn { width:100%; padding:13px 18px; }
  .ent-err .mct-btn { padding:13px 18px; }
}