/* ==========================================================================
   /tracker — hub head.
   The hub wears the same compact app header as the boards it links to
   (identity tile, inline H1, state pill, facts line, CTAs, stat strip).
   That head is the casino-originals system, so this file layers on
   crash-tracker.css and is scoped under .crx.thx. Everything below the head
   — the live card grid, sections and method notes — stays on trackers-hub.css;
   nothing here touches it.
   ========================================================================== */

.crx.thx{padding-bottom:0}

/* Identity tile: no single casino owns this page, so it carries the activity
   glyph on the same 58px tile the casino marks use, tinted live-green. */
.thx .crx-mark{display:grid;place-items:center;background:linear-gradient(150deg,rgba(46,212,127,.18),rgba(79,199,234,.2));color:var(--up,#2ED47F)}
.thx .crx-mark svg{width:28px;height:28px}

/* The pill carries a live count (trackers-hub.js repaints it), so its <b>
   needs the pill's own colour and tabular figures. */
.thx .crx-live b{font-weight:800;color:inherit;font-variant-numeric:tabular-nums}

/* trackers-hub.js toggles `is-off` on the pill when any feed stops — mirror
   the .crx-live.stale look, since "stale" is exactly what it means. */
.thx .crx-live.is-off{background:rgba(245,196,81,.1);color:var(--gold,#F5C451);border-color:rgba(245,196,81,.3)}
.thx .crx-live.is-off i{box-shadow:0 0 0 3px rgba(245,196,81,.18);animation:none}

/* The facts line here is longer than on the board pages, and crash-tracker.css
   keeps facts nowrap inside a flex column with no min-width — on phones the
   longest li (Evolution · Pragmatic Play · casino originals) would push the
   whole head past the viewport. Let the column shrink and the facts wrap. */
.thx .crx-ident-text{min-width:0}
@media (max-width:560px){
	.thx .crx-facts li{white-space:normal}
}

/* Four tiles, not the boards' eight. */
.thx .crx-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:0}

/* Below this the head's own breakpoint in crash-tracker.css is out-specificised
   by the rule above, so the fold has to be repeated here. */
@media (max-width:1080px){
	.thx .crx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}