/*!
 * [R10-新增] 验证 · 问答比对（双栏同题对比）样式
 * 体系：console-theme.css 令牌（--console-* / --ink / --line / --accent / --paper），
 *       **不使用 SmartAdmin / Bootstrap**，不新增色值。
 * 作用域：全部选择器前缀 .qa-compare-*，或 #qaCompareRoot，不侵入任何既有页面。
 */

.qa-compare-root { display: grid; gap: 14px; }

/* ─────────────────────────────────────────────────────────────────────────────
 * 公网客户入口的 fail-closed 白名单覆盖（**必须**，否则本页在公网完全不显示）
 * 上游既定规则（styles.css:50，未被本页修改）：
 *   html.public-entry [data-view-panel]:not([data-view-panel="overview"]) { display: none !important; }
 *   html.public-entry.public-demo-entry [data-view-panel]:not([data-view-panel="overview"]):not([data-view-panel="tier-one"]) { display: none !important; }
 * ⇒ 任何新增 [data-view-panel] 在公网一律被隐藏。本页以**更高特异性 + !important + 后加载**
 *   精确放行「本页且 .active」这一种情况；不放行其它任何面板，也不放宽 readonly demo 边界。
 * ──────────────────────────────────────────────────────────────────────────── */
html.public-entry body .view[data-view-panel="qa-compare"][data-view-panel].active,
html.public-entry.public-demo-entry body .view[data-view-panel="qa-compare"][data-view-panel].active { display: block !important; }

/* ── 顶部：问题输入 ── */
.qa-compare-ask {
  padding: 14px 16px;
  border: 1px solid var(--console-line);
  border-radius: var(--console-radius);
  background: var(--console-panel);
  box-shadow: var(--console-shadow);
}
.qa-compare-ask form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin: 0; }
.qa-compare-ask label { display: grid; gap: .35rem; color: var(--console-muted); font-size: .68rem; }
.qa-compare-ask textarea {
  width: 100%;
  min-height: 62px;
  padding: .6rem .7rem;
  border: 1px solid var(--console-line);
  border-radius: 5px;
  background: #fff;
  color: var(--console-text);
  font: inherit;
  font-size: .74rem;
  line-height: 1.5;
  resize: vertical;
}
.qa-compare-ask textarea:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, #fff); outline-offset: 1px; }
.qa-compare-ask-actions { display: flex; gap: 8px; align-items: center; }
.qa-compare-samples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.qa-compare-samples button {
  padding: .3rem .5rem;
  border: 1px dashed var(--console-line);
  border-radius: 999px;
  background: #fafbfc;
  color: var(--console-muted);
  font: inherit;
  font-size: .62rem;
  cursor: pointer;
}
.qa-compare-samples button:hover { border-color: var(--accent); color: var(--console-text); }
.qa-compare-context { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--console-muted); font-size: .62rem; }
.qa-compare-context b { color: var(--console-text); font-weight: 650; }

/* ── 双栏 ── */
.qa-compare-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1180px) { .qa-compare-columns { grid-template-columns: minmax(0, 1fr); } }

.qa-compare-col {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--console-line);
  border-top: 3px solid var(--console-line);
  border-radius: var(--console-radius);
  background: var(--console-panel);
  box-shadow: var(--console-shadow);
}
.qa-compare-col[data-side="tier1"] { border-top-color: #2f6fb8; }
.qa-compare-col[data-side="tier2"] { border-top-color: var(--accent); }

.qa-compare-col > header { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; padding: 12px 14px 10px; border-bottom: 1px solid var(--console-line); }
.qa-compare-col > header h2 { margin: 0; color: var(--console-text); font-size: .82rem; font-weight: 650; letter-spacing: -.01em; }
.qa-compare-col > header .qa-compare-tier { color: var(--console-muted); font-size: .6rem; }
.qa-compare-col > header .qa-compare-tag {
  margin-left: auto;
  padding: .2rem .45rem;
  border-radius: 4px;
  background: #f0f1f4;
  color: var(--console-muted);
  font-size: .58rem;
  font-weight: 650;
  white-space: nowrap;
}
.qa-compare-col[data-side="tier1"] .qa-compare-tag { background: color-mix(in srgb, #2f6fb8 10%, #fff); color: #245a95; }
.qa-compare-col[data-side="tier2"] .qa-compare-tag { background: color-mix(in srgb, var(--accent) 11%, #fff); color: color-mix(in srgb, var(--accent) 78%, #000); }

.qa-compare-body { padding: 0 14px 14px; }
.qa-compare-note {
  margin: 10px 0 0;
  padding: .55rem .65rem;
  border-left: 3px solid var(--console-line);
  border-radius: 3px;
  background: #fafbfc;
  color: var(--console-muted);
  font-size: .61rem;
  line-height: 1.55;
}

/* ── 通道自检（每栏一个） ── */
.qa-compare-probe { display: grid; gap: 5px; margin-top: 10px; padding: .6rem .68rem; border: 1px solid var(--console-line); border-radius: 5px; background: #fafbfc; }
.qa-compare-probe-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; font-size: .6rem; line-height: 1.5; }
.qa-compare-probe-row > span:first-child { color: var(--console-muted); }
.qa-compare-probe-row > span:last-child { min-width: 0; color: var(--console-text); word-break: break-all; }
.qa-compare-probe-row code { font-size: .58rem; color: #55586a; }

.qa-compare-verdict { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .42rem; border-radius: 4px; font-size: .58rem; font-weight: 650; }
.qa-compare-verdict.ok { background: color-mix(in srgb, var(--console-success) 13%, #fff); color: #12805e; }
.qa-compare-verdict.warn { background: color-mix(in srgb, var(--console-warning) 15%, #fff); color: #96631a; }
.qa-compare-verdict.fail { background: color-mix(in srgb, var(--console-danger) 12%, #fff); color: #b83a47; }

/* ── 结果 ── */
.qa-compare-metrics { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; margin-top: 10px; color: var(--console-muted); font-size: .62rem; }
.qa-compare-metrics b { color: var(--console-text); font-weight: 650; }
.qa-compare-metrics code { color: var(--accent); font-size: .6rem; }

.qa-compare-answer { margin-top: 10px; }
.qa-compare-answer h3 { margin: 0 0 .4rem; color: var(--console-text); font-size: .74rem; }
.qa-compare-answer p { margin: 0; color: var(--console-text); font-size: .72rem; line-height: 1.65; white-space: pre-wrap; }

.qa-compare-list { display: grid; gap: 7px; margin-top: 10px; }
.qa-compare-item { padding: .55rem .65rem; border: 1px solid var(--console-line); border-radius: 5px; background: #fff; }
.qa-compare-item strong { display: block; color: var(--console-text); font-size: .68rem; font-weight: 650; line-height: 1.4; }
.qa-compare-item small { display: block; margin-top: .18rem; color: var(--console-muted); font-size: .58rem; word-break: break-all; }
.qa-compare-item p { margin: .3rem 0 0; color: #55586a; font-size: .63rem; line-height: 1.55; }
.qa-compare-item .qa-compare-rel { display: inline-block; margin: 0 .3rem; padding: .08rem .3rem; border-radius: 3px; background: color-mix(in srgb, var(--accent) 10%, #fff); color: color-mix(in srgb, var(--accent) 78%, #000); font-size: .56rem; font-weight: 650; letter-spacing: .01em; }

.qa-compare-paths { display: grid; gap: 4px; margin-top: 10px; }
.qa-compare-paths span { display: block; padding: .38rem .5rem; border: 1px dashed var(--console-line); border-radius: 4px; background: #fafbfc; color: var(--console-text); font-size: .62rem; line-height: 1.5; word-break: break-all; }

.qa-compare-empty { margin-top: 10px; padding: .7rem .75rem; border: 1px dashed var(--console-line); border-radius: 5px; background: #fafbfc; color: var(--console-muted); font-size: .63rem; line-height: 1.6; }
.qa-compare-empty strong { display: block; margin-bottom: .22rem; color: var(--console-text); font-size: .68rem; }

.qa-compare-raw { margin-top: 10px; }
.qa-compare-raw summary { cursor: pointer; color: var(--console-muted); font-size: .61rem; }
.qa-compare-raw pre { margin: .5rem 0 0; max-height: 260px; overflow: auto; padding: .6rem .7rem; border: 1px solid var(--console-line); border-radius: 5px; background: #fafbfc; color: #41434f; font-size: .57rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }

.qa-compare-footnote { margin: 0; padding: .6rem .75rem; border: 1px solid var(--console-line); border-radius: var(--console-radius); background: #fafbfc; color: var(--console-muted); font-size: .61rem; line-height: 1.6; }

/* 侧栏菜单项高亮（与既有 .tier-subnav a 的 active 观感一致） */
.tier-subnav a[data-qa-compare-route].active { background: color-mix(in srgb, var(--accent) 12%, #fff); color: color-mix(in srgb, var(--accent) 78%, #000); font-weight: 650; }