/* 疫苗信任 viewer 样式 / Vaccine trust viewer styles */
:root {
  color-scheme: light;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --line: #d7dde5;
  --text: #17202a;
  --muted: #627083;
  --teal: #0f766e;
  --amber: #b7791f;
  --red: #b42318;
  --blue: #2454a6;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  min-height: 36px;
  padding: 0 12px;
}

button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.app-shell {
  min-height: 100vh;
  padding: 20px;
}

.topbar,
.toolbar,
.panel-header,
.report-header,
.status-strip {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.topbar {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.topbar-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.icon-button {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  justify-content: center;
}

.agent-setup-button {
  width: 38px;
  padding: 0;
}

.agent-setup-button:hover,
.agent-setup-button:focus-visible {
  border-color: var(--teal);
  color: var(--teal);
  outline: 0;
}

.eyebrow,
.muted {
  color: var(--muted);
  margin: 0;
}

h1,
h2,
h3 {
  letter-spacing: 0;
  margin: 0;
}

h1 {
  font-size: 28px;
  line-height: 1.2;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 15px;
}

.status-strip {
  min-height: 48px;
}

.dashboard-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
}

.batch-pane,
.panel,
.timeline-panel,
.insight-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.batch-pane,
.detail-pane {
  min-height: 640px;
  padding: 16px;
}

.batch-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.batch-item {
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 72px;
  padding: 10px;
  text-align: left;
  width: 100%;
}

.batch-item.is-active {
  border-color: var(--teal);
  box-shadow: inset 3px 0 0 var(--teal);
}

.detail-pane {
  display: grid;
  gap: 16px;
  padding: 0;
}

.summary-cards,
.variant-intros,
.variant-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.summary-card,
.intro-card,
.variant-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: 14px;
}

.summary-card {
  border-top: 4px solid var(--blue);
}

.intro-card {
  border-left: 4px solid var(--blue);
}

.intro-card:nth-child(2) {
  border-left-color: var(--teal);
}

.intro-card:nth-child(3) {
  border-left-color: var(--amber);
}

.intro-card:nth-child(4) {
  border-left-color: #4d6b3c;
}

.intro-title {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.intro-card-header {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.intro-report-button {
  align-items: center;
  color: var(--blue);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  gap: 6px;
  min-height: 30px;
  padding: 0 9px;
  white-space: nowrap;
}

.intro-report-button .loading-spinner {
  height: 12px;
  width: 12px;
}

.intro-title span {
  background: #edf2f7;
  border-radius: 999px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
}

.summary-card.tone-positive {
  border-top-color: var(--teal);
}

.summary-card.tone-danger {
  border-top-color: var(--red);
}

.summary-card.tone-warning {
  border-top-color: var(--amber);
}

.summary-card span,
.metric-line span {
  color: var(--muted);
  font-size: 12px;
}

.summary-card strong {
  display: block;
  font-size: 24px;
  line-height: 1.15;
  margin-top: 8px;
}

.summary-card p,
.intro-card p,
.variant-card p {
  color: var(--muted);
  line-height: 1.45;
  margin: 8px 0 0;
}

.intro-card small {
  color: var(--text);
  display: block;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 10px;
}

.variant-card {
  cursor: pointer;
}

.variant-card.is-active {
  border-color: var(--teal);
  box-shadow: inset 0 3px 0 var(--teal);
}

.variant-card-top,
.metric-line {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.metric-line {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 10px;
}

.badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  padding: 3px 8px;
  white-space: nowrap;
}

.badge-ok {
  border-color: rgb(15 118 110 / 35%);
  color: var(--teal);
}

.badge-warning {
  border-color: rgb(183 121 31 / 40%);
  color: var(--amber);
}

.chart-row {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
}

.chart-row-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel {
  padding: 14px;
}

.timeline-panel,
.insight-panel {
  padding: 14px;
}

canvas {
  aspect-ratio: 16 / 9;
  display: block;
  max-height: 340px;
  width: 100%;
}

.select-shell {
  position: relative;
}

.select-menu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgb(23 32 42 / 14%);
  min-width: 220px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: 44px;
  z-index: 5;
}

.select-option {
  display: block;
  text-align: left;
  width: 100%;
}

.timeline-list {
  display: grid;
  gap: 14px;
  margin-top: 12px;
  max-height: 360px;
  overflow: auto;
}

.timeline-group {
  display: grid;
  gap: 8px;
}

.timeline-group h4 {
  font-size: 13px;
  margin: 0;
}

.timeline-item {
  border-left: 3px solid var(--blue);
  padding: 8px 10px;
}

.insight-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.insight-item {
  background: #f8fafc;
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  line-height: 1.5;
  padding: 10px 12px;
}

.loading-spinner {
  animation: spin 900ms linear infinite;
  border: 2px solid #c9d4df;
  border-top-color: var(--teal);
  border-radius: 50%;
  display: inline-block;
  height: 16px;
  width: 16px;
}

.skeleton {
  align-items: center;
  color: var(--muted);
  display: flex;
  gap: 10px;
}

.error-text {
  color: var(--red);
}

.report-overlay {
  background: rgb(23 32 42 / 50%);
  inset: 0;
  padding: 28px;
  position: fixed;
  z-index: 20;
}

.report-dialog {
  background: var(--surface);
  border-radius: 8px;
  height: min(86vh, 900px);
  margin: 0 auto;
  max-width: 920px;
  overflow: hidden;
}

.report-header {
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.report-content {
  height: calc(100% - 65px);
  line-height: 1.62;
  overflow: auto;
  padding: 18px;
}

.report-content h1,
.report-content h2,
.report-content h3,
.report-content h4,
.report-content h5,
.report-content h6 {
  margin: 18px 0 8px;
}

.report-content h1 {
  font-size: 26px;
}

.report-content h2 {
  border-bottom: 1px solid var(--line);
  font-size: 20px;
  padding-bottom: 6px;
}

.report-content p,
.report-content ul,
.report-content ol,
.report-content blockquote,
.report-content table,
.report-content pre {
  margin: 0 0 14px;
}

.report-content table {
  border-collapse: collapse;
  display: block;
  overflow: auto;
  width: 100%;
}

.report-content th,
.report-content td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
}

.report-content th {
  background: #f1f5f9;
}

.report-content code {
  background: #edf2f7;
  border-radius: 4px;
  padding: 2px 4px;
}

.report-content pre {
  background: #17202a;
  border-radius: 8px;
  color: #f7f8fa;
  overflow: auto;
  padding: 12px;
}

.report-content pre code {
  background: transparent;
  padding: 0;
}

.report-content blockquote {
  border-left: 4px solid var(--blue);
  color: var(--muted);
  padding-left: 12px;
}

.report-skeleton {
  min-height: 120px;
  justify-content: center;
}

/* Agent setup 浮层：展示 MCP + Skill 接入信息，外部点击不关闭。 / Agent setup modal: MCP + Skill info; backdrop click never closes it. */
.agent-setup-modal {
  display: grid;
  inset: 0;
  padding: clamp(14px, 4vw, 30px);
  place-items: center;
  position: fixed;
  z-index: 30;
}

.agent-setup-overlay {
  background: rgb(23 32 42 / 54%);
  inset: 0;
  position: absolute;
}

.agent-setup-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgb(23 32 42 / 28%);
  max-height: min(760px, calc(100vh - 32px));
  overflow: auto;
  position: relative;
  width: min(820px, calc(100vw - 32px));
  z-index: 1;
}

.agent-setup-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 18px 18px 14px;
}

.agent-setup-kicker {
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 5px;
  text-transform: uppercase;
}

.agent-setup-close {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 20px;
  height: 34px;
  justify-content: center;
  min-height: 34px;
  padding: 0;
  width: 34px;
}

.agent-setup-close:hover,
.agent-setup-close:focus-visible {
  border-color: var(--amber);
  color: var(--amber);
  outline: 0;
}

.agent-setup-body {
  display: grid;
  gap: 12px;
  padding: 14px 18px 18px;
}

.agent-setup-section {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.agent-section-title {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.agent-status-pill {
  border: 1px solid rgb(15 118 110 / 35%);
  border-radius: 999px;
  color: var(--teal);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  white-space: nowrap;
}

.agent-setup-row,
.agent-setup-config-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 64px minmax(0, 1fr);
  min-width: 0;
}

.agent-copy-row,
.agent-setup-config-row {
  grid-template-columns: 64px minmax(0, 1fr) auto;
}

.agent-setup-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.agent-setup-value,
.agent-setup-snippet {
  background: #edf2f7;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 8px 9px;
}

.agent-setup-snippet {
  white-space: pre-wrap;
}

.agent-copy-button {
  align-items: center;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  justify-content: center;
  min-height: 32px;
  min-width: 58px;
  padding: 0 10px;
}

.agent-copy-button .loading-spinner {
  height: 12px;
  width: 12px;
}

.agent-download-link {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--blue);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  text-decoration: none;
  width: max-content;
}

.agent-download-link:hover,
.agent-download-link:focus-visible {
  border-color: var(--teal);
  color: var(--teal);
  outline: 0;
}

.agent-setup-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}

.agent-tool-list,
.agent-dimension-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.agent-tool-list span,
.agent-dimension-list span {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
  line-height: 1.3;
  padding: 5px 8px;
}

.agent-tool-list code {
  color: var(--blue);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px;
}

.agent-skill-summary,
.agent-skill-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agent-skill-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-skill-summary div,
.agent-skill-grid div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: 9px 10px;
}

.agent-skill-summary span,
.agent-skill-grid span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
}

.agent-skill-summary strong,
.agent-skill-grid code {
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* 数据溯源徽章 / Data provenance badges. */
.provenance-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.prov-badge {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  padding: 2px 8px;
  white-space: nowrap;
}

.prov-historical_anchor {
  border-color: rgb(15 118 110 / 40%);
}

.prov-model_estimate {
  border-color: rgb(36 84 166 / 40%);
}

.prov-llm_interpolation {
  border-color: rgb(183 121 31 / 40%);
}

.prov-external_research {
  border-color: rgb(98 112 131 / 45%);
}

/* 图表脚注 / Chart caption note. */
.chart-note {
  color: var(--muted);
  font-size: 12px;
  margin: 6px 0 0;
}

/* 健康产出卡：区间数字等宽对齐 + 降级态中性灰边 / Health-impact cards: tabular range numerals + neutral grey border on degraded state. */
#sec-health .summary-card strong {
  font-variant-numeric: tabular-nums;
}

#sec-health .summary-card.tone-neutral {
  border-top-color: var(--muted);
}

.is-hidden {
  display: none !important;
}

/* 分区锚点导航条 / Section anchor navigation bar */
.section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}

.section-nav a {
  font-size: 13px;
  color: var(--blue);
  text-decoration: none;
}

.section-nav a:hover {
  text-decoration: underline;
}

/* 空锚点：仅用于 scrollIntoView 定位，不占视觉空间 / Empty anchor used only as a scroll target. */
.section-anchor {
  display: block;
  height: 0;
}

/* 锚点滚动留白，避免内容贴顶 / Scroll margin so anchored panels are not flush to the top. */
#sec-overview,
#sec-uptake,
#sec-5c,
#sec-health,
#sec-tribunal,
#sec-network,
#sec-method {
  scroll-margin-top: 16px;
}

/* 方法学面板：纯文本列表，按钮折叠 / Methodology panel: plain text list, button-toggled. */
.method-body {
  font-size: 13px;
  color: var(--text);
}

.method-body ul {
  margin: 0;
  padding-left: 18px;
}

.method-body li {
  margin: 4px 0;
  line-height: 1.55;
}

/* 文字型按钮（方法学展开/收起）/ Text-style button (methodology expand/collapse). */
.link-button {
  background: none;
  border: none;
  color: var(--blue);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}

.link-button:hover {
  text-decoration: underline;
}

/* AEFI 因果分类徽章 + variant 卡徽章行 / AEFI causality badge + variant-card badge row. */
.variant-card-badges {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge-aefi {
  border-color: rgb(36 84 166 / 35%);
  color: var(--blue);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  .dashboard-grid,
  .chart-row,
  .chart-row-three,
  .summary-cards,
  .variant-intros,
  .variant-cards {
    grid-template-columns: 1fr;
  }

  .batch-pane,
  .detail-pane {
    min-height: auto;
  }

  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .agent-section-title,
  .agent-setup-head {
    align-items: flex-start;
  }

  .agent-section-title {
    flex-direction: column;
  }

  .agent-setup-row,
  .agent-copy-row,
  .agent-setup-config-row {
    grid-template-columns: 1fr;
  }

  .agent-copy-button {
    justify-self: start;
  }

  .agent-skill-summary,
  .agent-skill-grid {
    grid-template-columns: 1fr;
  }
}

/* 盲推 vs 事后真实 对照行 / Blind-vs-hindsight compare rows */
.compare-row { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.compare-tag { font-size: 13px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tag-blind { background: #e8eef8; color: var(--blue); }
.tag-actual { background: #f3f0e8; color: var(--amber); }
.compare-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.compare-note { font-size: 12px; color: var(--muted); }

/* panel 标题旁的 variant 标签 / variant tag next to a panel header. */
.panel-tag {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

/* 合议庭专家评分表 / tribunal expert score table. */
.tribunal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 6px;
}
.tribunal-table th,
.tribunal-table td {
  border: 1px solid var(--line);
  padding: 6px 8px;
  text-align: center;
}
.tribunal-table th {
  background: rgb(98 112 131 / 8%);
  color: var(--text);
  font-weight: 600;
}
.tribunal-table td.expert-name {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.tribunal-table tbody tr:nth-child(even) {
  background: rgb(98 112 131 / 4%);
}

/* 产品/场景信息卡 / product/scenario info card. */
.product-card {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.product-card .product-label {
  display: inline-block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.product-card p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text);
}

/* AEFI 信号语境块（卡片内，因果分类相同但信号叙述随 variant 不同）/ AEFI signal-narrative block on cards. */
.aefi-signal {
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  background: rgb(183 121 31 / 8%);
  border-left: 3px solid var(--amber);
  border-radius: 4px;
}
.aefi-signal .aefi-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 2px;
}