/* ============================================================
 * LncACTdb 4.0 — CeClinical tool (page-specific)
 * Loaded after tools/lncact-tools.css. Expression maps + clinical overlay.
 * ============================================================ */

/* ---- Row 1: 3 UMAP/tSNE expression maps (same as Expression) ---- */
.la-cl-maps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.la-cl-map{border:1px solid var(--la-line);border-radius:12px;overflow:hidden;background:#fff;}
.la-cl-map__t{font:700 12.5px var(--la-font);color:var(--la-ink);padding:9px 12px;
  border-bottom:1px solid var(--la-line-2);border-left:3px solid var(--c,var(--la-primary));}
.la-cl-map__c{height:260px;}

/* ---- Row 2: clinical map (1/3) + stats charts (2/3) ---- */
.la-cl-row2{display:grid;grid-template-columns:1fr 2fr;gap:18px;align-items:stretch;}
#clMap{height:440px;border:1px solid var(--la-line);border-radius:12px;overflow:hidden;background:#fff;}
/* stats: 2 charts stacked (lnc+mRNA on top, −log10p below) */
.la-cl-stats-wrap{display:flex;flex-direction:column;gap:10px;}
.la-cl-stat-box{border:1px solid var(--la-line);border-radius:12px;overflow:hidden;background:#fff;}
#clStats{height:260px;}
#clStats2{height:170px;}

/* ---- embedding toggle (UMAP/tSNE) in the maps header ---- */
.la-dt-embtog button{font:600 12px var(--la-font);color:var(--la-muted);background:var(--la-bg-soft);
  border:1px solid var(--la-line);border-radius:8px;padding:5px 12px;cursor:pointer;margin-left:6px;transition:.15s;}
.la-dt-embtog button.on{background:var(--la-primary);color:#fff;border-color:var(--la-primary);}

/* ---- point-size slider ---- */
.la-symslider{display:inline-flex;align-items:center;gap:8px;color:var(--la-muted);
  background:var(--la-bg-soft);border:1px solid var(--la-line);border-radius:10px;padding:6px 12px;}
.la-symslider i{color:var(--la-primary);opacity:.75;font-size:11px;}
.la-symslider input[type=range]{width:92px;accent-color:var(--la-primary);cursor:pointer;}

/* ---- Clinical variable select (.la-cl-select) ---- */
.la-cl-select{position:relative;display:inline-block;vertical-align:middle;margin-left:14px;}
.la-cl-select select{-webkit-appearance:none;appearance:none;
  font:600 13px var(--la-font);color:var(--la-ink);
  min-height:40px;padding:0 36px 0 14px;border-radius:10px;
  border:1.5px solid var(--la-line);background:#fff;
  cursor:pointer;transition:background-color .15s ease,border-color .15s ease;}
.la-cl-select select:hover{background-color:var(--la-bg-tint);border-color:rgba(67,56,202,.4);}
.la-cl-select select:focus{outline:2px solid var(--la-primary);outline-offset:1px;}
.la-cl-select::after{content:"";position:absolute;top:50%;right:12px;width:6px;height:6px;
  border-left:2px solid var(--la-muted);border-bottom:2px solid var(--la-muted);
  transform:translateY(-65%) rotate(-45deg);pointer-events:none;
  transition:transform .2s ease,border-color .2s ease;}
.la-cl-select:hover::after{border-color:var(--la-primary);}

/* ---- dual-pick (reuses expression.css pattern) ---- */
.la-dualpick{display:grid;grid-template-columns:128px 1fr;gap:8px;}
.la-dualpick .ts-control{min-height:26px;}

/* coloured type-select tinted by current category */
.la-dualpick__type[data-cat] .ts-control{font-weight:700;border-width:1.5px;}
.la-dualpick__type[data-cat="0"] .ts-control{color:var(--la-primary-d);background:var(--la-bg-tint);border-color:var(--la-line);}
.la-dualpick__type[data-cat="T"] .ts-control{color:#0e7490;background:rgba(6,182,212,.12);border-color:rgba(6,182,212,.45);}
.la-dualpick__type[data-cat="s"] .ts-control{color:#6d28d9;background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.45);}
.la-dualpick__type[data-cat="C"] .ts-control{color:#b45309;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.5);}
.la-dualpick__type[data-cat="O"] .ts-control{color:#047857;background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.45);}
.la-typopt{font-weight:600;padding:2px 0;}
.la-typopt--dsT{color:#0e7490;} .la-typopt--dss{color:#6d28d9;}
.la-typopt--dsC{color:#b45309;} .la-typopt--dsO{color:#047857;}
.la-typitem{font-weight:700;}

/* dataset value dropdown — wider floating panel + rich rows */
.la-dualpick__val--ds .ts-dropdown{width:420px;}
.la-dualpick__val--ds .ts-dropdown .option{align-items:flex-start;}
.la-opt--ds{display:flex;}
.la-ds-name{flex:0 1 auto;min-width:0;font-weight:700;color:var(--la-ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.la-ds-meta{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;}
.la-ds-cond{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 10px var(--la-mono);text-transform:uppercase;letter-spacing:.03em;
  padding:2px 7px;border-radius:5px;color:#b45309;background:rgba(245,158,11,.14);}
.la-ds-cond--norm{color:#047857;background:rgba(16,185,129,.12);}
.la-ds-sp{font:italic 600 11px var(--la-font);color:var(--la-muted);}
.la-ds-cnt{font:600 11px var(--la-mono);color:var(--la-primary-d);
  background:var(--la-bg-tint);border:1px solid var(--la-line);padding:2px 8px;border-radius:999px;white-space:nowrap;}
.la-dualpick__val--ds.single .ts-control{flex-wrap:nowrap;}
.la-dualpick__val--ds.single .ts-control > .item{
  min-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.la-tool-aside{z-index:20;}

/* lnc/mRNA fixed-type badges */
.la-dualpick__static{display:flex;align-items:center;justify-content:center;
  min-height:26px;padding:0 10px;border-radius:8px;border:1.5px solid;
  font:700 12px var(--la-font);letter-spacing:.02em;white-space:nowrap;}
.la-dualpick__static--lnc{color:var(--la-lnc);background:rgba(124,58,237,.10);border-color:rgba(124,58,237,.45);}
.la-dualpick__static--mrna{color:#047857;background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.45);}

/* lnc/mRNA option tags in dropdown */
.la-opt-name{flex:1 1 auto;}
.ts-dropdown .option{display:flex;align-items:center;}

/* ---- Responsive ---- */
@media(max-width:1100px){
  .la-cl-maps{grid-template-columns:1fr;}
  .la-cl-row2{grid-template-columns:1fr;}
  #clMap{height:300px;}
  #clStats{height:300px;}
  .la-cl-map__c{height:220px;}
}