/* ============================================================
   T-118 / T-054 · 概念说明小框（术语标记层 + 弹框）
   消费 css/{light,dark}.css 与 skins/*.css 的变量 ⇒ 自动随皮肤/深浅切换。
   ⛔ 本文件**不含 @media**（断点策略集中在 app.css/shell.css，避免改动既有
      T-080 断点审计面与顺序陷阱）；自适应改用 min()/vw，手机形态由 JS 加
      `.ql-tip-mobile` 类表达（见 web/js/concept-tip.js::placeTip）。
   ⛔ 不得在注释内出现 CSS 块注释的结束符（硬教训 10）。
   ============================================================ */

/* ---------- 术语标记 ---------- */
.ql-term {
  color: var(--ink);
  border-bottom: 1px dotted var(--brand);
  text-decoration: none;
  cursor: help;
  padding: 0 1px;
  transition: background-color .15s ease, color .15s ease;
}
.ql-term:hover,
.ql-term[aria-expanded="true"] {
  background: var(--brand-soft);
  color: var(--brand);
}
.ql-term:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--r-sm);
}

/* ---------- 说明小框 ---------- */
.ql-tip[hidden] { display: none; }

.ql-tip {
  position: fixed;
  z-index: 2200;
  width: min(340px, 88vw);
  max-height: min(60vh, 420px);
  overflow: auto;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.65;
  animation: ql-tip-in .14s ease-out;
}

@keyframes ql-tip-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

.ql-tip-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--line-thin);
  background: var(--surface-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  position: sticky;
  top: 0;
}
.ql-tip-head b {
  font-size: var(--fs-md);
  color: var(--ink);
  letter-spacing: .02em;
}
/* 别称：紧随术语名（原先此处是概念ID —— 260921 按 owner 反馈删除不上屏） */
.ql-tip-alias {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ql-tip-x {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--r-sm);
}
.ql-tip-x:hover { color: var(--brand); background: var(--brand-soft); }

.ql-tip-body { padding: var(--sp-3); }

/* 释义（弹框第一眼；原先此处是「分类/层级/判据」三枚元数据徽标 —— 260921 已删） */
.ql-tip-gloss {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.75;
}

/* ---------- 取象区（本功能的一半内容 · 2026-09-21 接入） ---------- */
.ql-tip-xiang {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);
}
.ql-tip-xiang .xr {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: 6px;
  color: var(--ink-2);
}
.ql-tip-xiang .xr .k {
  flex: 0 0 4.2em;
  color: var(--brand);
  font-size: var(--fs-xs);
  padding-top: 3px;
  letter-spacing: .02em;
}
.ql-tip-xiang .xr .v { flex: 1 1 auto; }
/* 现代延伸项（L3）：象类标签弱化，配合框内「标『现代』者为现代延伸，非原典」说明 */
.ql-tip-xiang .xr-l3 .k { color: var(--ink-3); }
.ql-tip-xiang .xiang-note {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.6;
}
.ql-tip-xiang .xiang-note b { color: var(--ink-2); }

/* 手机形态：小框贴底更易点。
   由 JS 按视口宽（<576）加/去 `.ql-tip-mobile`（见 web/js/concept-tip.js::placeTip），
   故本条是**基线规则**而非 @media ⇒ 不动 T-080 断点审计面，也无「媒体块早于基线」的顺序陷阱。 */
.ql-tip.ql-tip-mobile {
  left: 8px;
  right: 8px;
  width: auto;
  max-height: 46vh;
}