/* ============================================================
 * LncACTdb 4.0 — SHARED tool-page layout (tools/)
 * Loaded by every analysis tool page before its own CSS.
 * Reuses design tokens from home/shared/lncact-tokens.css.
 * Namespace: .la-tool* — the tool-page chrome (head band, query
 * aside, chart panels) shared by Network / Expression / etc.
 * ============================================================ */

/* page background: same subtle multi-radial wash as the homepage */
.la-tool{
  background:
    radial-gradient(1100px 520px at 85% -8%, rgba(67,56,202,.06), transparent 60%),
    radial-gradient(900px 480px at -5% 12%, rgba(6,182,212,.06), transparent 55%),
    var(--la-bg);
  min-height:100vh;
}

/* ---- title band (compact, gradient — matches .la-pagehead but tool-flavoured) ---- */
.la-toolhead{
  position:relative;overflow:hidden;
  padding:20px 0 20px;
  background:linear-gradient(120deg,var(--la-primary-d),var(--la-primary) 56%,var(--la-cyan-d));
  color:#fff;
}
.la-toolhead::after{content:"";position:absolute;inset:0;opacity:.16;
  background:radial-gradient(circle at 82% -20%,#fff,transparent 46%);}
.la-toolhead__in{position:relative;z-index:2;}
.la-toolhead .la-eyebrow{color:#fff;background:rgba(255,255,255,.14);}
.la-toolhead .la-eyebrow::before{background:var(--la-cyan);}
.la-toolhead h1{font:700 clamp(28px,3.6vw,44px)/1.1 var(--la-font-display);
  letter-spacing:-.02em;margin:0 0 12px;color:#fff;}
.la-toolhead p{max-width:90ch;color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.65;margin:0;}

/* ---- body: query aside (left) + main (right) ---- */
.la-toolbody{padding:34px 0 70px;}
.la-tool-grid{display:grid;grid-template-columns:25% 1fr;gap:24px;align-items:start;max-width:80%}
.la-tool-aside{display:flex;flex-direction:column;gap:18px;position:sticky;top:84px;}
.la-tool-main{display:flex;flex-direction:column;gap:22px;min-width:0;}

.la-tool-card{padding:24px;}
.la-tool-card .la-card__title{display:flex;align-items:center;gap:9px;margin-bottom:18px;}
.la-tool-card .la-card__title i{color:var(--la-primary);font-size:15px;}

/* run button: full width */
.la-tool-run{width:100%;justify-content:center;margin-top:22px;}

/* segmented control (Top-N etc.) */
.la-seg{display:flex;gap:6px;background:var(--la-bg-soft);border:1px solid var(--la-line);
  border-radius:12px;padding:5px;}
.la-seg button{flex:1;border:0;background:none;cursor:pointer;border-radius:8px;
  font:600 13.5px var(--la-font);color:var(--la-muted);padding:8px 0;transition:.16s;}
.la-seg button:hover{color:var(--la-primary-d);}
.la-seg button.on{background:#fff;color:var(--la-primary-d);
  box-shadow:0 3px 10px rgba(11,20,55,.10);}

/* legend row */
.la-tool-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--la-line-2);}
.la-tool-legend span{display:inline-flex;align-items:center;gap:7px;
  font:600 12.5px var(--la-font);color:var(--la-ink-2);}
.la-tool-legend .dot{width:11px;height:11px;border-radius:50%;display:inline-block;}

/* KPI mini-cards inside the aside */
.la-tool-kpis{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;overflow:hidden;}
.la-tool-kpi{padding:18px 16px;border-right:1px solid var(--la-line-2);
  border-bottom:1px solid var(--la-line-2);}
.la-tool-kpi:nth-child(2n){border-right:0;}
.la-tool-kpi__n{font:700 26px/1 var(--la-font-display);color:var(--la-ink);letter-spacing:-.02em;}
.la-tool-kpi__l{margin-top:6px;font:600 10.5px var(--la-mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--la-muted);}

/* ---- chart panel ---- */
.la-tool-chartwrap{padding:20px 22px 22px;}
.la-tool-chart__hd{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:8px;flex-wrap:wrap;}
.la-tool-chart__hd h3{font:700 17px var(--la-font-display);color:var(--la-ink);margin:0;}
.la-tool-chart__act{display:flex;gap:8px;}
.la-tool-chart{width:100%;height:560px;}

.la-tool-tablewrap{padding:22px 24px 24px;}
.la-tool-tablewrap .la-card__title{display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.la-tool-tablewrap .la-card__title i{color:var(--la-primary);font-size:15px;}

/* empty state (shared with result pages) */
.la-tool .la-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 24px;color:var(--la-muted);min-height:340px;}
.la-tool .la-empty i{font-size:40px;color:var(--la-line);margin-bottom:16px;}
.la-tool .la-empty h3{font:700 19px var(--la-font-display);color:var(--la-ink-2);margin:0 0 8px;}
.la-tool .la-empty p{font-size:14px;margin:0;}
.la-tool .la-empty a{color:var(--la-primary);font-weight:600;}

/* sticky footer for short pages */
.la-tool .page-wrapper{display:flex;flex-direction:column;min-height:100vh;}
.la-tool .la-toolbody{flex:1 0 auto;}

@media(max-width:980px){
  .la-tool-grid{grid-template-columns:1fr;}
  .la-tool-aside{position:static;}
}

/* ---- tom-select option rows + tcos chips + optgroup heavders (shared) ---- */
.la-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.la-opt small{font:600 11px var(--la-mono);display:inline-flex;align-items:center;gap:6px;color:var(--la-muted);}
.la-opt .la-tcos{font:600 10px var(--la-mono);padding:2px 7px;border-radius:5px;
  text-transform:uppercase;letter-spacing:.04em;}
.la-tcos--T{color:#0e7490;background:rgba(6,182,212,.12);}
.la-tcos--s{color:#6d28d9;background:rgba(124,58,237,.12);}
.la-tcos--C{color:#b45309;background:rgba(245,158,11,.14);}
.la-tcos--O{color:#047857;background:rgba(16,185,129,.12);}
.ts-dropdown .optgroup-header{font:700 11px var(--la-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--la-primary-d);background:var(--la-bg-soft);padding:7px 12px;position:sticky;top:0;}
.ts-dropdown .optgroup:not(:first-child) .optgroup-header{border-top:1px solid var(--la-line-2);}

/* rich dataset option row: name (left) + meta line (condition · species · count) */
.la-opt--ds{align-items:flex-start;flex-direction:column;gap:3px;}
.la-ds-name{font-weight:600;color:var(--la-ink);}
.la-ds-meta{display:inline-flex;flex-wrap:wrap;align-items:center;gap:7px;}
.la-ds-cond{font:600 10.5px var(--la-mono);color:#b45309;background:rgba(245,158,11,.13);
  padding:2px 8px;border-radius:6px;}
.la-ds-cond--norm{color:#047857;background:rgba(16,185,129,.12);}  /* Normal → tissue, green */
.la-ds-sp{font:500 11px var(--la-font);color:var(--la-muted);font-style:italic;}
.la-ds-cnt{font:600 10.5px var(--la-mono);color:var(--la-primary-d);background:var(--la-bg-tint);
  padding:2px 8px;border-radius:6px;}

/* ============================================================
 * fix: 类名冲突 —— lncact-home.css 把 .la-tool 定义成首页"工具卡片"
 * (overflow:hidden / padding / border / hover 上移)，而工具页
 * <body class="la-tool"> 复用了同名类，导致卡片样式泄漏到 body，
 * 其中 overflow:hidden 锁死了整页滚动。这里只在工具页 body 上还原。
 * ============================================================ */
body.la-tool{
  overflow:visible;   /* ← 恢复整页纵向滚动（核心修复） */
  display:block;
  padding:0;
  border:0;
  border-radius:0;
  transition:none;
}
body.la-tool:hover{ transform:none; box-shadow:none; }  /* 干掉 hover 时全页上移 5px */
body.la-tool::after{ display:none; }                     /* 干掉卡片左侧 accent 竖条 */
/* dual-pick：防止长文本/输入把 grid 轨道撑宽（grid 子项默认 min-width:auto），
   并让选中项单行省略、光标不换行。Network 与 Expression 同时生效。 */
.la-dualpick > *{min-width:0;}
.la-dualpick .ts-control{flex-wrap:nowrap;overflow:hidden;}
.la-dualpick .ts-control > .item{ min-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ==========================================================================
   增强 la-dualpick 下拉框的点击与交互暗示（Network & Expression 同步生效）
   ========================================================================== */

.la-dualpick .ts-wrapper.single {
  position: relative;
}

/* 1. 强制注入清晰的高对比度下拉箭头（替换或修正 TomSelect 原生暗淡/易被裁切的箭头） */
.la-dualpick .ts-wrapper.single::after {
  content: "" !important;
  visibility: visible !important;
  display: block !important;
  position: absolute;
  top: 50%;
  right: 12px;
  width: 6px;
  height: 6px;
  border-left: 2px solid var(--la-muted, #94a3b8) !important;
  border-bottom: 2px solid var(--la-muted, #94a3b8) !important;
  border-right: none !important;
  border-top: none !important;
  background: none !important;
  transform: translateY(-65%) rotate(-45deg) !important;
  transition: transform 0.2s ease, border-color 0.2s ease;
  z-index: 3;
  pointer-events: none;
}

/* 2. 当下拉面板激活展开时，箭头平滑向上翻转，并亮起主色 */
.la-dualpick .ts-wrapper.single.dropdown-active::after {
  transform: translateY(-35%) rotate(135deg) !important;
  border-color: var(--la-primary) !important;
}

/* 3. 增强输入框区域的微互动反馈 */
.la-dualpick .ts-control {
  cursor: pointer !important;
  padding-right: 28px !important; /* 强留安全距离，防止长文本和右侧箭头重叠 */
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

/* 4. 鼠标悬停时背景泛出淡淡的主色调，给用户极强的“可点击”心理暗示 */
.la-dualpick .ts-control:hover {
  background-color: var(--la-bg-tint, rgba(67, 56, 202, 0.04)) !important;
  border-color: rgba(67, 56, 202, 0.4) !important;
}

.la-dualpick .ts-wrapper.single:hover::after {
  border-color: var(--la-primary) !important;
}