/* ============================================================
 * LncACTdb 4.0 — Download page
 * A multi-omics download landscape: a live <canvas> ceRNA particle
 * network hero, a five-layer "omics strata" diagram, curated-bundle
 * cards, and the full 447-dataset per-file download table.
 * Loads after tokens.css + home.css; self-contained otherwise.
 * Palette: lncRNA=violet --la-lnc, miRNA=amber --la-mir, mRNA=emerald
 * --la-mrna, primary indigo --la-primary, cyan --la-cyan.
 * ============================================================ */

/* page-local wide wrapper (mirrors Statistics' .la-swrap / Browse's .la-bwrap) */
.la-dl .la-dwrap{ max-width:1500px; margin:0 auto; padding:0 24px; text-align:left; }
.la-dl-main{ padding:30px 24px 70px; }

/* shared page-head band, kept plain so every inner page matches
   (same 20px override Browse and Statistics use) */
.la-dl .la-pagehead{ padding:20px 0 20px; }

/* ===================== SECTION SHELL ===================== */
.la-dlsec{ margin-top:46px; scroll-margin-top:90px; }
.la-dlsec__hd{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:20px;
  border-bottom:1px solid var(--la-line); padding-bottom:16px; }
.la-dlsec__hd h2{ font:800 25px/1.15 var(--la-font-display); color:var(--la-ink);
  letter-spacing:-.02em; margin:0; }
.la-dlsec__hd p{ margin:8px 0 0; max-width:74ch; font:400 14.5px/1.6 var(--la-font);
  color:var(--la-muted); }
.la-dlsec__hd code{ font:600 12.5px var(--la-mono); color:var(--la-primary-d);
  background:var(--la-bg-tint); padding:1px 6px; border-radius:6px; }
.la-dlsec__tag{ display:inline-flex; align-items:center; gap:8px; flex:none;
  font:600 12px var(--la-mono); letter-spacing:.03em; color:var(--la-primary-d);
  background:var(--la-bg-tint); border:1px solid var(--la-line); padding:8px 14px;
  border-radius:999px; }
.la-dlsec__tag i{ color:var(--la-primary); }

/* ===================== CURATED BUNDLE CARDS ===================== */
.la-bundles{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:1080px){ .la-bundles{ grid-template-columns:1fr 1fr; } }
@media(max-width:680px){ .la-bundles{ grid-template-columns:1fr; } }

.la-bcard{ position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--la-line); border-radius:var(--la-r-lg);
  padding:24px 22px 22px; transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, border-color .22s; }
.la-bcard::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, var(--bc,var(--la-primary)), transparent 85%);
  transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.la-bcard::after{ content:""; position:absolute; right:-50px; top:-50px; width:150px; height:150px;
  border-radius:50%; background:var(--bc,var(--la-primary)); opacity:.06;
  transition:opacity .22s, transform .3s; }
.la-bcard:hover{ transform:translateY(-5px); box-shadow:var(--la-shadow);
  border-color:color-mix(in srgb, var(--bc,var(--la-primary)) 40%, var(--la-line)); }
.la-bcard:hover::before{ transform:scaleX(1); }
.la-bcard:hover::after{ opacity:.12; transform:scale(1.1); }

.la-bcard__top{ display:flex; align-items:center; gap:14px; }
.la-bcard__ic{ width:52px; height:52px; flex:none; border-radius:15px; display:grid;
  place-items:center; font-size:21px; color:#fff;
  background:linear-gradient(140deg, rgba(255,255,255,.22), rgba(0,0,0,.12)), var(--bc,var(--la-primary));
  box-shadow:0 8px 20px rgba(11,20,55,.20);
  box-shadow:0 8px 20px color-mix(in srgb, var(--bc,var(--la-primary)) 35%, transparent); }
.la-bcard__cat{ font:600 10.5px/1 var(--la-mono); letter-spacing:.07em; text-transform:uppercase;
  color:var(--bc,var(--la-primary)); }
.la-bcard__t{ font:700 17.5px/1.2 var(--la-font-display); color:var(--la-ink); margin-top:5px; }
.la-bcard__d{ margin:15px 0 0; font:400 13.5px/1.6 var(--la-font); color:var(--la-ink-2);
  flex:1 0 auto; }

/* the table-chip list inside each bundle */
.la-bcard__tables{ display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 0; }
.la-btab{ font:600 11px var(--la-mono); color:var(--la-ink-2);
  background:var(--la-bg-soft); border:1px solid var(--la-line); border-radius:7px;
  padding:4px 9px; white-space:nowrap; }
.la-btab b{ color:var(--bc,var(--la-primary)); font-weight:700; }

.la-bcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:18px; padding-top:16px; border-top:1px dashed var(--la-line); }
.la-bcard__size{ font:600 12px var(--la-mono); color:var(--la-muted); }
.la-bcard__size b{ color:var(--la-ink); font-weight:700; }
.la-bget{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font:700 13px var(--la-font); color:#fff; text-decoration:none;
  background:var(--bc,var(--la-primary)); border:0; padding:11px 18px; border-radius:11px;
  transition:.18s; box-shadow:0 6px 16px rgba(11,20,55,.18);
  box-shadow:0 6px 16px color-mix(in srgb, var(--bc,var(--la-primary)) 32%, transparent); }
.la-bget:hover{ filter:brightness(1.07); transform:translateY(-2px);
  box-shadow:0 10px 24px color-mix(in srgb, var(--bc,var(--la-primary)) 40%, transparent); }
.la-bget i{ font-size:12px; }
/* a bundle whose archive isn't in download/ yet shows a "soon" affordance */
.la-bcard.is-pending .la-bget{ background:var(--la-bg-soft); color:var(--la-muted);
  box-shadow:none; cursor:default; border:1px solid var(--la-line); }
.la-bcard.is-pending .la-bget:hover{ transform:none; filter:none; }
.la-bcard.is-pending .la-bcard__size b{ color:var(--la-muted); }

/* ===================== PER-DATASET TABLE ===================== */
.la-dl-legend{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; flex:none; }
.la-dl-leg{ display:inline-flex; align-items:center; gap:7px; font:600 12px var(--la-font);
  color:var(--la-ink-2); }
.la-dl-leg i{ width:11px; height:11px; border-radius:4px; display:inline-block; }

.la-dl-tablewrap{ background:#fff; border:1px solid var(--la-line);
  border-radius:var(--la-r-lg); padding:16px 18px 8px; box-shadow:0 1px 0 rgba(16,24,64,.02); }

/* table cell scale — matched to the Statistics dataset table */
.la-dl table.la-dt{ border-collapse:collapse; font-size:13px; }
.la-dl 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; }
.la-dl table.la-dt tbody td{ padding:9px 12px; border-bottom:1px solid var(--la-line);
  vertical-align:middle; }
.la-dl table.la-dt tbody tr:hover{ background:var(--la-bg-soft); }

/* dataset name + type tag (reuse Statistics' visual language) */
.la-dt-name{ font:600 12.5px var(--la-mono); color:var(--la-ink); }
.la-dt-tag{ display:inline-block; font:700 9.5px var(--la-mono); letter-spacing:.03em;
  text-transform:uppercase; color:#fff; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.la-dt-sub{ display:block; font:500 11px var(--la-font); color:var(--la-muted); margin-top:2px; }
.la-dl-num{ font:600 12px var(--la-mono); color:var(--la-ink-2);
  font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
/* extra catalogue columns: cell line list + PubMed link */
.la-dt-dim{ color:var(--la-muted); }
.la-dt-cell{ display:inline-block; max-width:190px; 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-dl div.dt-scroll-body{ border-bottom:1px solid var(--la-line); }
.la-dl table.la-dt thead th, .la-dl table.la-dt tbody td{ white-space:nowrap; }

/* download action buttons inside the table */
.la-dlbtns{ display:flex; gap:8px; justify-content:flex-end; white-space:nowrap; }
.la-dlb{ display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font:700 11.5px var(--la-font); text-decoration:none; padding:6px 12px; border-radius:9px;
  border:1px solid transparent; transition:.16s; }
.la-dlb i{ font-size:10.5px; }
.la-dlb small{ font:600 9.5px var(--la-mono); opacity:.8; }
/* expression = emerald-leaning primary */
.la-dlb--exp{ color:#fff; background:var(--la-primary); }
.la-dlb--exp:hover{ background:var(--la-primary-d); transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(67,56,202,.32); }
/* function = cyan, opens the popover */
.la-dlb--fn{ color:var(--la-cyan-d); background:rgba(6,182,212,.10);
  border-color:rgba(6,182,212,.30); }
.la-dlb--fn:hover{ background:rgba(6,182,212,.18); transform:translateY(-2px); }
.la-dlb--fn.is-empty{ color:var(--la-muted); background:var(--la-bg-soft);
  border-color:var(--la-line); cursor:default; }
.la-dlb--fn.is-empty:hover{ transform:none; }

/* ===================== FUNCTIONAL-FILES POPOVER ===================== */
.la-fnpop{ position:absolute; z-index:9998; width:auto;
  background:#fff; border:1px solid var(--la-line); border-radius:16px;
  box-shadow:var(--la-shadow-pop); padding:14px 14px 10px; }
.la-fnpop[hidden]{ display:none; }
.la-fnpop__hd{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px; }
.la-fnpop__t{ font:700 13px var(--la-font); color:var(--la-ink); }
.la-fnpop__t small{ display:block; font:500 11px var(--la-mono); color:var(--la-muted);
  margin-top:2px; }
.la-fnpop__x{ border:0; background:var(--la-bg-soft); color:var(--la-muted); cursor:pointer;
  width:24px; height:24px; border-radius:7px; font-size:13px; line-height:1; flex:none; }
.la-fnpop__x:hover{ background:var(--la-line); color:var(--la-ink); }
.la-fnrow{ display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:10px;
  text-decoration:none; transition:.14s; }
.la-fnrow:hover{ background:var(--la-bg-tint); }
.la-fnrow__ic{ width:30px; height:30px; flex:none; border-radius:9px; display:grid;
  place-items:center; font-size:12px; color:#fff; background:var(--fc,var(--la-cyan)); }
.la-fnrow__b{ flex:1 0 auto; min-width:0; }
.la-fnrow__t{ font:600 12.5px var(--la-font); color:var(--la-ink); }
.la-fnrow__d{ font:500 10.5px var(--la-mono); color:var(--la-muted); }
.la-fnrow__sz{ font:600 11px var(--la-mono); color:var(--la-muted); white-space:nowrap; }
.la-fnrow__dl{ color:var(--la-cyan-d); font-size:12px; }
.la-fnpop__all{ display:block; text-align:center; margin-top:6px; padding:9px;
  font:700 12px var(--la-font); color:var(--la-primary-d); text-decoration:none;
  border-top:1px dashed var(--la-line); }
.la-fnpop__all:hover{ color:var(--la-primary); }

/* ===================== FORMAT / CITATION FOOTER ===================== */
.la-dlfoot{ display:grid; grid-template-columns:1.3fr 1fr; gap:20px; margin-top:46px; }
@media(max-width:780px){ .la-dlfoot{ grid-template-columns:1fr; } }
.la-dlfoot__card{ background:var(--la-bg-soft); border:1px solid var(--la-line);
  border-radius:var(--la-r-lg); padding:22px 24px; }
.la-dlfoot__card h3{ font:700 15px var(--la-font-display); color:var(--la-ink);
  margin:0 0 12px; display:flex; align-items:center; gap:9px; }
.la-dlfoot__card h3 i{ color:var(--la-primary); }
.la-dlfoot__card ul{ margin:0; padding-left:18px; }
.la-dlfoot__card li{ font:400 13px/1.7 var(--la-font); color:var(--la-ink-2); margin-bottom:7px; }
.la-dlfoot__card p{ font:400 13px/1.65 var(--la-font); color:var(--la-ink-2); margin:0 0 10px; }
.la-dlfoot__card code{ font:600 12px var(--la-mono); color:var(--la-primary-d);
  background:#fff; border:1px solid var(--la-line); padding:1px 6px; border-radius:6px; }
.la-dlfoot__by{ font:600 12px var(--la-mono); color:var(--la-muted); }

/* DataTables reskin parity with the rest of the site uses .la-dt from tokens */
#dlTable tbody td{ vertical-align:middle; }