/* 负责投资学习子站的布局、索引、卡片和图谱样式。 */
* {
  box-sizing: border-box;
}

body.invest-body {
  margin: 0;
  background: #f7f8f5;
  color: #1f2933;
  font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  text-align: left;
}

.invest-site-header {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #d8dee4;
  display: flex;
  gap: 28px;
  justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 72px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.invest-brand {
  color: #174b56;
  font-size: 22px;
  font-weight: 800;
  text-decoration: none;
}

.invest-site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.invest-site-header nav a,
.invest-text-link {
  color: #1f6f8b;
  font-weight: 700;
  text-decoration: none;
}

.invest-container {
  margin: 0 auto;
  max-width: 1180px;
  padding: 42px clamp(18px, 4vw, 56px) 72px;
  width: 100%;
}

.invest-hero {
  background: #ffffff;
  border: 1px solid #d8dee4;
  border-radius: 8px;
  padding: clamp(28px, 4vw, 48px);
}

.invest-kicker {
  color: #2f6f7e;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.invest-hero h1,
.invest-page-heading h1,
.invest-article-header h1 {
  color: #263244;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.15;
  margin: 0 0 16px;
}

.invest-hero p,
.invest-page-heading p {
  color: #465466;
  max-width: 760px;
}

.invest-hero-actions,
.invest-chip-row,
.invest-subnav,
.invest-card-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.invest-button,
.invest-filter-button,
.invest-chip {
  align-items: center;
  border: 1px solid #c8d2dc;
  border-radius: 999px;
  background: #ffffff;
  color: #263244;
  display: inline-flex;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 9px 13px;
  text-decoration: none;
}

.invest-filter-button {
  border-radius: 6px;
  cursor: pointer;
  min-height: 38px;
  padding: 0 14px;
}

.invest-button.primary,
.invest-filter-button.active {
  background: #174b56;
  border-color: #174b56;
  color: #ffffff;
}

.invest-dashboard,
.invest-stage-grid,
.invest-card-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 24px 0 42px;
}

.invest-dashboard > div,
.invest-stage-card,
.invest-list-card,
.invest-card-item,
.invest-context-panel,
.invest-graph-detail,
.invest-graph-sidebar {
  background: #ffffff;
  border: 1px solid #d8dee4;
  border-radius: 8px;
  padding: 18px;
}

.invest-link-list {
  margin: 0;
  padding-left: 22px;
}

.invest-stage-card h3,
.invest-list-card h3,
.invest-card-item h3 {
  margin-top: 0;
}

.invest-subnav {
  margin: 16px 0 28px;
}

.invest-subnav a {
  color: #174b56;
  font-weight: 800;
  text-decoration: none;
}

.invest-chip.status-needs_verification {
  border-color: #b6601b;
  color: #8a3f0b;
}

.invest-chip.status-verified {
  border-color: #2f7d4f;
  color: #20623c;
}

.invest-muted {
  color: #667085;
  margin: 12px 0;
}

.invest-card-controls input,
.invest-card-controls select,
.invest-graph-sidebar input,
.invest-graph-sidebar select {
  border: 1px solid #c8d2dc;
  border-radius: 6px;
  font: inherit;
  padding: 9px 11px;
}

.invest-card-controls input {
  min-width: min(360px, 100%);
}

.invest-card-list {
  display: grid;
  gap: 14px;
}

.invest-card-item[hidden] {
  display: none;
}

.invest-card-item details {
  margin-top: 10px;
}

.invest-card-detail-dl,
.invest-card-nested-dl {
  display: grid;
  gap: 8px 14px;
  grid-template-columns: minmax(88px, 140px) minmax(0, 1fr);
}

.invest-card-detail-dl {
  border-top: 1px solid #edf0f2;
  margin: 12px 0 0;
  padding-top: 12px;
}

.invest-card-detail-dl dt,
.invest-card-nested-dl dt {
  color: #667085;
  font-weight: 800;
}

.invest-card-detail-dl dd,
.invest-card-nested-dl dd {
  margin: 0;
  min-width: 0;
}

.invest-card-detail-dl ul {
  margin: 0;
  padding-left: 20px;
}

.invest-card-detail-dl code {
  white-space: normal;
}

.invest-article-layout {
  align-items: start;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}

.invest-readable {
  background: #ffffff;
  border: 1px solid #d8dee4;
  border-radius: 8px;
  padding: clamp(22px, 4vw, 38px);
}

.invest-readable img,
.invest-readable table {
  max-width: 100%;
}

.invest-readable table {
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

.invest-readable th,
.invest-readable td {
  border: 1px solid #c8d2dc;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.invest-readable th {
  background: #f2f6f7;
  font-weight: 800;
}

.invest-related-list {
  display: grid;
  gap: 10px;
}

.invest-related-card {
  border: 1px solid #d8dee4;
  border-radius: 6px;
  color: #263244;
  display: grid;
  padding: 10px;
  text-decoration: none;
}

.invest-related-card span {
  color: #667085;
  font-size: 14px;
}

.invest-graph-body {
  overflow: hidden;
}

.invest-graph-shell {
  display: grid;
  gap: 16px;
  grid-template-columns: 280px minmax(760px, 1fr) 320px;
  height: calc(100vh - 73px);
  padding: 16px;
}

.invest-graph-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
}

.invest-graph-toolbar {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.invest-graph-toolbar button {
  align-items: center;
  background: #ffffff;
  border: 1px solid #c8d2dc;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  min-height: 34px;
  padding: 0 10px;
}

.invest-graph-sidebar,
.invest-graph-detail {
  overflow: auto;
}

.invest-graph-sidebar h1 {
  font-size: 30px;
  margin: 0 0 8px;
}

.invest-graph-modes {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.invest-graph-modes button {
  border: 1px solid #c8d2dc;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 10px;
  text-align: left;
}

.invest-graph-modes button.active {
  background: #174b56;
  color: #ffffff;
}

#invest-graph-focus {
  margin-top: 12px;
  width: 100%;
}

.invest-graph {
  background: #ffffff;
  border: 1px solid #d8dee4;
  border-radius: 8px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.invest-graph svg {
  cursor: grab;
  display: block;
  height: 100%;
  width: 100%;
}

.invest-graph svg.is-panning {
  cursor: grabbing;
}

.invest-graph-edge {
  stroke: #a8b3bd;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.edge-stage_contains_article {
  stroke: #7a8fa3;
  stroke-width: 2;
}

.edge-article_related_card {
  stroke: #2f6f7e;
}

.edge-card_related_signal {
  stroke: #b6601b;
}

.invest-graph-node {
  cursor: pointer;
}

.invest-graph-node.is-secondary {
  opacity: 0.68;
}

.invest-graph-node-shape {
  fill: #ffffff;
  stroke: #2f6f7e;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.invest-graph-node-stage .invest-graph-node-shape {
  fill: #f0f7f8;
  stroke: #174b56;
}

.invest-graph-node-article .invest-graph-node-shape {
  fill: #ffffff;
  stroke: #3f6f94;
}

.invest-graph-node-card .invest-graph-node-shape {
  fill: #f7fbf8;
  stroke: #2f7d4f;
}

.invest-graph-node-signal .invest-graph-node-shape {
  fill: #fff7ed;
  stroke: #9a4d16;
}

.invest-graph-node-template .invest-graph-node-shape {
  fill: #f8f7ff;
  stroke: #6f5fb3;
}

.invest-graph-template-fold {
  fill: #ebe7ff;
  stroke: #6f5fb3;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.invest-graph-node.is-focus .invest-graph-node-shape {
  filter: drop-shadow(0 8px 18px rgba(31, 41, 51, 0.18));
  stroke-width: 2.8;
}

.invest-graph-node text {
  fill: #1f2933;
  pointer-events: none;
}

.invest-graph-node-type {
  fill: #4d6475;
  font-size: 11px;
  font-weight: 800;
}

.invest-graph-node-title {
  font-size: 13px;
  font-weight: 800;
}

.invest-graph-node.is-focus .invest-graph-node-title {
  font-size: 15px;
}

.invest-graph-status {
  fill: #98a2b3;
  stroke: #ffffff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.invest-graph-status.status-verified {
  fill: #2f7d4f;
}

.invest-graph-status.status-partially_verified {
  fill: #d18b1f;
}

.invest-graph-status.status-needs_verification {
  fill: #b6601b;
}

.invest-relation-list {
  display: grid;
  gap: 8px;
  list-style: none;
  padding-left: 0;
}

.invest-relation-list li {
  border-top: 1px solid #edf0f2;
  padding: 0;
}

.invest-relation-button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  padding: 9px 0;
  text-align: left;
  width: 100%;
}

.invest-relation-button:hover strong,
.invest-relation-button:focus strong {
  color: #1f6f8b;
  text-decoration: underline;
}

.invest-relation-button span {
  color: #667085;
  display: block;
  font-size: 13px;
}

.invest-relation-button strong {
  display: block;
}

.invest-relation-more {
  color: #667085;
  font-size: 14px;
  margin: 10px 0 0;
}

@media (max-width: 980px) {
  .invest-article-layout,
  .invest-graph-shell {
    grid-template-columns: 1fr;
    height: auto;
  }

  .invest-card-detail-dl,
  .invest-card-nested-dl {
    grid-template-columns: 1fr;
  }

  .invest-graph {
    min-height: 520px;
  }
}