/* ============================================================
 * LncACTdb 4.0 — Statistics page  (rev 2)
 * Anatomical atlas (human iframe + drawn mouse map) + a right column
 * split into a linked tissue panel and a per-tissue dataset ranking;
 * a mosaic of eight distinct charts; the full data_info table.
 * Loads after tokens.css + home.css; self-contained otherwise.
 * ============================================================ */

/* page-local wide wrapper (mirrors Browse's .la-bwrap; .la-swrap
   is NOT defined in shared CSS, so we own it here) */
.la-stat .la-swrap{ max-width:1500px; margin:0 auto; padding:0 24px;text-align: left; }
.la-stat-main{ padding:30px 24px 70px; }



.la-stat h2{ font:700 24px/1.2 var(--la-font-display); color:var(--la-ink);
  letter-spacing:-.02em; margin:0 0 6px; }

/* ===================== HERO COUNTERS ===================== */
.la-stat-counters{
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin:26px 0 30px; }
.la-sc{ position:relative; overflow:hidden; background:#fff; border:1px solid var(--la-line);
  border-radius:var(--la-r-lg); padding:18px 16px 16px; }
.la-sc::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--c,var(--la-primary)); }
.la-sc::after{ content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px;
  border-radius:50%; background:var(--c,var(--la-primary)); opacity:.07; }
.la-sc__n{ font:800 27px/1 var(--la-font-display); color:var(--la-ink); letter-spacing:-.02em;
    text-align: left;
  font-variant-numeric:tabular-nums; }
.la-sc__n small{ font-size:15px; font-weight:700; color:var(--la-muted); margin-left:2px; }
.la-sc__l{ margin-top:7px; font:600 11.5px/1.3 var(--la-mono); letter-spacing:.04em;
  text-transform:uppercase; color:var(--la-muted); display:flex; align-items:center; gap:6px; }
.la-sc__q{ width:14px; height:14px; border-radius:50%; display:inline-grid; place-items:center;
  background:rgba(16,24,64,.07); color:var(--la-muted); font:700 9px var(--la-mono); cursor:help;
  flex:none; }
.la-sc__ic{ position:absolute; right:14px; top:14px; color:var(--c,var(--la-primary)); opacity:.9;
  font-size:15px; }
@media(max-width:1180px){ .la-stat-counters{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:620px){ .la-stat-counters{ grid-template-columns:repeat(2,1fr); } }

/* ===================== PANEL SHELL ===================== */
.la-panel{ background:#fff; border:1px solid var(--la-line); border-radius:var(--la-r-xl,20px);
  box-shadow:0 1px 0 rgba(16,24,64,.02); }

/* ===================== ATLAS ===================== */
.la-atlas{ padding:24px 24px 22px; margin-bottom:30px; }
.la-atlas__head{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:8px; }
.la-atlas__sub{ font-size:14px; color:var(--la-muted); max-width:64ch; margin:2px 0 0; }

.la-atlas__grid{ display:grid; grid-template-columns:minmax(0,1fr) 384px; gap:22px;
  align-items:stretch; margin-top:14px; }
@media(max-width:1080px){ .la-atlas__grid{ grid-template-columns:1fr; } }

/* the stage holding the maps */
.la-atlas__stage{ position:relative; border-radius:var(--la-r-lg); overflow:hidden;

  border:1px solid var(--la-line-2); min-height:560px;
  display:flex; flex-direction:column; }
.la-atlas__map{ flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  padding:8px 8px 0; }
.la-atlas__map.is-hidden{ display:none; }
#bodyFrame{ width:820px; max-width:100%; height:812px; border:0; background:transparent;
  display:block; }
@media(max-width:900px){ #bodyFrame{ height:680px; } .la-atlas__stage{ min-height:0; } }

/* legend strip under the map */
.la-atlas__legend{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  padding:12px 16px 14px; border-top:1px dashed var(--la-line); background:rgba(255,255,255,.6); }
.la-alg{ display:inline-flex; align-items:center; gap:7px; font:600 12px var(--la-font);
  color:var(--la-ink-2); }
.la-alg--mods i{ width:11px; height:11px; border-radius:3px; display:inline-block; margin-left:6px; }
.la-alg--mods i:first-child{ margin-left:0; }
.la-alg--hint{ color:var(--la-muted); margin-left:auto; }
.la-alg--hint i{ color:var(--la-mir); border-radius:0; width:auto; height:auto; }

/* PARENT-LEVEL tooltip for the human map (the iframe's own fixed tip is
   clipped by the iframe box, so we suppress it and draw this instead) */
.la-bodytip{ position:fixed; z-index:9999; display:none; pointer-events:none;
  min-width:172px; padding:12px 14px; border-radius:14px; color:#fff;
  background:rgba(15,22,56,.95); box-shadow:0 16px 40px rgba(0,0,0,.32);
  transform:translateY(-50%); }
.la-bodytip__t{ font:700 14px var(--la-font); margin-bottom:8px; }
.la-bodytip__row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font:600 12px var(--la-font); color:rgba(234,240,255,.78); }
.la-bodytip__row b{ font:800 15px var(--la-mono); color:#fff; }
.la-bodytip__mods{ display:flex; gap:4px; margin-top:9px; }
.la-bodytip__seg{ height:6px; border-radius:999px; }
.la-bodytip__hint{ margin-top:9px; font:600 10.5px var(--la-mono); letter-spacing:.04em;
  color:#a5b4fc; }

/* ---- right column: split into linked panel + tissue ranking ---- */
.la-atlas__side{ display:grid; grid-template-rows:auto 1fr; gap:18px; min-width:0; }

/* (1) linked per-tissue panel (compact, dark) */
.la-tp{ background:linear-gradient(180deg,#0f1638,#161d44);
  border-radius:var(--la-r-lg); color:#eaf0ff; overflow:hidden; position:relative; }
.la-tp::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(420px 220px at 80% 0%, rgba(99,102,241,.30), transparent 65%);
  pointer-events:none; }

.la-tp-empty{ position:relative; padding:26px 24px; }
.la-tp-empty.is-hidden{ display:none; }
.la-tp-empty__ic{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:rgba(99,102,241,.20); color:#a5b4fc; font-size:18px; margin-bottom:13px; }
.la-tp-empty h3{ font:700 17px var(--la-font-display); margin:0 0 7px; color:#fff; }
.la-tp-empty p{ font-size:13px; line-height:1.6; color:rgba(234,240,255,.72); margin:0; }

.la-tp-body{ position:relative; padding:20px 22px 20px; display:flex; flex-direction:column; gap:14px; }
.la-tp-body.is-hidden{ display:none; }
.la-tp-head{ display:flex; align-items:center; gap:11px; }
.la-tp-dot{ width:14px; height:14px; border-radius:5px; background:#6366f1; flex:none;
  box-shadow:0 0 0 4px rgba(99,102,241,.18); }
.la-tp-head h3{ font:800 22px var(--la-font-display); color:#fff; margin:0; letter-spacing:-.02em;
  flex:1; }
.la-tp-go{ font:600 12px var(--la-font); color:#c7d2fe; text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  background:rgba(99,102,241,.18); transition:.16s; }
.la-tp-go:hover{ background:rgba(99,102,241,.34); color:#fff; }
.la-tp-go i{ font-size:10px; transition:transform .16s; }
.la-tp-go:hover i{ transform:translateX(3px); }

.la-tp-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.la-tpk{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:11px 11px 10px; }
.la-tpk__n{ font:800 19px/1 var(--la-font-display); color:#fff; font-variant-numeric:tabular-nums;
  letter-spacing:-.01em; }
.la-tpk__l{ margin-top:5px; font:600 9.5px var(--la-mono); letter-spacing:.04em; text-transform:uppercase;
  color:rgba(234,240,255,.55); }

/* compact modality split bar (CSS, no ECharts) */
.la-tp-bar{ display:flex; height:14px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.07); }
.la-tp-bar i{ height:100%; display:block; }
.la-tp-note{ font-size:12px; color:rgba(234,240,255,.6); line-height:1.55; }
.la-tp-note b{ color:#c7d2fe; }

/* (2) datasets-by-tissue ranking */
.la-tt{ background:#fff; border:1px solid var(--la-line); border-radius:var(--la-r-lg);
  padding:16px 18px 12px; display:flex; flex-direction:column; min-height:0; }
.la-tt__hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.la-tt__hd span{ font:700 12.5px var(--la-mono); letter-spacing:.04em; text-transform:uppercase;
  color:var(--la-ink-2); }
.la-tt__hd em{ font-style:normal; font:700 11px var(--la-mono); padding:3px 9px; border-radius:999px;
  background:var(--la-bg-soft); color:var(--la-primary-d); border:1px solid var(--la-line); }
.la-tt__list{ display:flex; flex-direction:column; gap:3px; overflow-y:auto; max-height:550px;
  margin:0 -6px; padding:0 6px; }
.la-ttrow{ display:grid; grid-template-columns:18px 1fr auto; align-items:center; gap:10px;
  padding:6px 8px; border-radius:9px; cursor:pointer; transition:.14s; position:relative; }
.la-ttrow::before{ content:""; position:absolute; left:0; top:0; bottom:0; border-radius:9px 0 0 9px;
  width:var(--w,0); background:var(--cc,var(--la-primary)); opacity:.12; z-index:0; }
.la-ttrow:hover{ background:var(--la-bg-soft); }
.la-ttrow.is-active{ background:rgba(67,56,202,.07); }
.la-ttrow>*{ position:relative; z-index:1; }
.la-ttrow__rk{ font:700 11px var(--la-mono); color:var(--la-muted); text-align:right; }
.la-ttrow__nm{ font:600 13px var(--la-font); color:var(--la-ink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.la-ttrow__v{ font:700 12px var(--la-mono); color:var(--la-ink-2); font-variant-numeric:tabular-nums; }
.la-ttrow__v small{ color:var(--la-muted); font-weight:600; margin-left:1px; }
.la-tt__list::-webkit-scrollbar{ width:8px; }
.la-tt__list::-webkit-scrollbar-thumb{ background:var(--la-line); border-radius:999px; }


/* ===================== CHART MOSAIC ===================== */
.la-mosaic{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px; margin-bottom:30px; }
.la-mcard{ padding:20px 22px 18px; display:flex; flex-direction:column; min-width:0; }
.la-mcard--modality{ grid-column:span 4; }
.la-mcard--hubs{     grid-column:span 8; }
.la-mcard--lit{      grid-column:span 5; }
.la-mcard--roles{    grid-column:span 7; }
.la-mcard--disease{  grid-column:span 6; }
.la-mcard--species{  grid-column:span 6; }
.la-mcard--reg{      grid-column:span 5; }
.la-mcard--scatter{  grid-column:span 7; }
@media(max-width:1080px){
  .la-mosaic{ grid-template-columns:1fr 1fr; }
  .la-mcard{ grid-column:span 2 !important; }
}
@media(max-width:680px){
  .la-mosaic{ grid-template-columns:1fr; }
  .la-mcard{ grid-column:span 1 !important; }
}

.la-mcard__hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  margin-bottom:12px; }
.la-mcard__hd h3{ font:700 18px/1.25 var(--la-font-display); color:var(--la-ink); margin:0;
  letter-spacing:-.01em; }
.la-mcard__sub{ font:500 12.5px var(--la-font); color:var(--la-muted); margin:3px 0 0; }
.la-mcard__body{ flex:1; display:flex; min-width:0; }

/* shared segmented control */
.la-seg{ display:inline-flex; background:var(--la-bg-soft); border:1px solid var(--la-line);
  border-radius:999px; padding:3px; flex:none; }
.la-seg__b{ border:0; cursor:pointer; background:transparent; color:var(--la-muted);
  font:600 12.5px var(--la-font); padding:6px 14px; border-radius:999px; transition:.16s; }
.la-seg__b.is-on{ background:#fff; color:var(--la-primary-d); box-shadow:0 2px 6px rgba(16,24,64,.10); }

/* modality donut + legend */
.la-mod{ flex-direction:column; gap:6px; width:100%; }
.la-mod__chart{ width:100%; height:236px; }
.la-mod__legend{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; padding-top:4px; }
.la-modleg{ display:flex; align-items:center; gap:9px; cursor:default; }
.la-modleg__sw{ width:11px; height:11px; border-radius:3px; flex:none; }
.la-modleg__nm{ font:600 12.5px var(--la-font); color:var(--la-ink-2); flex:1; }
.la-modleg__v{ font:700 12px var(--la-mono); color:var(--la-ink); }
.la-modleg__v small{ color:var(--la-muted); font-weight:600; }

.la-hub-chart{ width:100%; height:340px; }
.la-lit-chart{ width:100%; height:286px; }
.la-roles-chart{ width:100%; height:286px; }
.la-disease-chart{ width:100%; height:300px; }
.la-species-chart{ width:100%; height:300px; }
.la-scatter-chart{ width:100%; height:300px; }

/* regulation: semicircle gauge + legend */
.la-reg{ flex-direction:column; gap:4px; width:100%; }
.la-reg-chart{ width:100%; height:212px; }
.la-reg-legend{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
.la-regleg{ display:flex; align-items:center; gap:9px; }
.la-regleg__sw{ width:11px; height:11px; border-radius:3px; flex:none; }
.la-regleg__nm{ font:600 12.5px var(--la-font); color:var(--la-ink-2); flex:1; }
.la-regleg__v{ font:700 12px var(--la-mono); color:var(--la-ink); }

/* ===================== DATASET TABLE ===================== */
.la-dstable{ padding:20px 22px 22px; }
.la-dstable__wrap{ margin-top:6px; }
.la-stat table.la-dt{ border-collapse:collapse; font-size:13px; }
.la-stat table.la-dt thead th{ font:700 11px var(--la-mono); letter-spacing:.03em;
  text-transform:uppercase; color:var(--la-muted); border-bottom:2px solid var(--la-line);
  padding:10px 12px; text-align:left; }
.la-stat table.la-dt tbody td{ padding:9px 12px; border-bottom:1px solid var(--la-line);
  color:var(--la-ink-2); vertical-align:middle; }
.la-stat table.la-dt tbody tr:hover{ background:var(--la-bg-soft); }
.la-dt-name{ font:600 12.5px var(--la-mono); color:var(--la-ink); }
.la-dt-tag{ font:700 9.5px var(--la-mono); letter-spacing:.03em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; color:#fff; }
.la-dt-num{ font:600 12px var(--la-mono); color:var(--la-ink-2); font-variant-numeric:tabular-nums;
  text-align:right; }
.la-dt-go{ color:var(--la-primary); text-decoration:none; font-weight:600; white-space:nowrap; }
.la-dt-go:hover{ text-decoration:underline; }
/* extra dataset columns: cell line list + PubMed link */
.la-dt-dim{ color:var(--la-muted); }
.la-dt-cell{ display:inline-block; max-width:200px; font:500 12px var(--la-font);
  color:var(--la-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  vertical-align:bottom; cursor:default; }
.la-dt-more{ font:700 10px var(--la-mono); color:var(--la-primary);
  background:rgba(var(--la-primary-rgb),.10); padding:1px 5px; border-radius:999px; }
/* PubMed cell — shared style from lncact-result.css, so it matches the result tables */
.la-pmid-cell{ display:inline-flex; align-items:center; gap:5px; text-decoration:none;
  white-space:nowrap; line-height:1; background:rgba(6,182,212,.10);
  border:1px solid rgba(6,182,212,.20); padding:2px 8px; border-radius:7px; transition:.15s; }
.la-pmid-cell:hover{ border-color:var(--la-cyan-d); background:rgba(6,182,212,.18); }
.la-pmid-cell__ic{ font-size:11px; color:var(--la-cyan-d); flex:none; }
.la-pmid-cell__n{ font:700 11.5px var(--la-mono); color:var(--la-cyan-d); }
/* horizontal scroll for the now-wider catalogue (DataTables 2.x class names) */
.la-stat div.dt-scroll-body{ border-bottom:1px solid var(--la-line); }
.la-stat table.la-dt thead th, .la-stat table.la-dt tbody td{ white-space:nowrap; }
.la-stat .dataTables_wrapper .dataTables_filter input{ border:1px solid var(--la-line);
  border-radius:999px; padding:7px 14px; font:500 13px var(--la-font); outline:none; }
.la-stat .dataTables_wrapper .dataTables_filter input:focus{ border-color:var(--la-primary); }
.la-stat .dataTables_wrapper .dataTables_length select{ border:1px solid var(--la-line);
  border-radius:8px; padding:5px 8px; }
.la-stat .dataTables_wrapper .dataTables_info,
.la-stat .dataTables_wrapper .dataTables_paginate{ font:500 12.5px var(--la-font);
  color:var(--la-muted); padding-top:12px; }
.la-stat .dataTables_wrapper .paginate_button.current{ background:var(--la-primary); color:#fff !important;
  border-radius:8px; }
.la-pagehead {
    padding: 20px 0 20px;
}
.la-menu__item:hover .la-menu__drop{
	text-align:left;
}