/* Graph view (timeline + diplomacy + crimes) */

.graph-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: start;
}

@media (max-width: 980px) {
  .graph-layout {
    grid-template-columns: 1fr;
  }
}

.graph-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
}

.graph-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.graph-controls label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--gray-400);
}

.graph-controls select,
.graph-controls input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px;
}

.graph-canvas {
  height: 72vh;
  min-height: 520px;
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg);
}

.graph-svg {
  display: block;
}

/* =========================
   Graph v12 (integrated section)
   ========================= */

/* 1) Remove the global card-grid behavior for the graph section */
body.graph-mode #articles-container.graph-root {
  display: block;
}

/* 2) In graph view we want the main area to fill the page without sidebars */
body.graph-mode .news-sidebar,
body.graph-mode .questions-sidebar {
  display: none;
}

body.graph-mode .container {
  grid-template-columns: 1fr;
}

/* 3) Controls row */
body.graph-mode #articles-container.graph-root .graph-v12-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin: 4px 0 14px;
}

body.graph-mode #articles-container.graph-root .graph-v12-controls label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

body.graph-mode #articles-container.graph-root .graph-v12-controls select {
  min-width: 220px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}

/* Spacing control (spreads nodes vertically; not a visual zoom) */
body.graph-mode #articles-container.graph-root .graph-v12-controls label.graph-v12-spacing {
  min-width: 260px;
}

body.graph-mode #articles-container.graph-root .graph-v12-controls .graph-v12-spacing input[type="range"] {
  width: 240px;
  padding: 0;
  border: 0;
  background: transparent;
}

body.graph-mode #articles-container.graph-root .graph-v12-controls .graph-v12-spacing-val {
  font-size: 12px;
  color: var(--gray-500);
}

/* Legend inline */
body.graph-mode #articles-container.graph-root .graph-v12-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

body.graph-mode #articles-container.graph-root .graph-v12-legend .sw {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 99px;
  margin-right: 8px;
}

/* Zoom controls */
body.graph-mode #articles-container.graph-root .graph-v12-zoom {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.graph-mode #articles-container.graph-root .graph-v12-zoom .gz-btn {
  border: 1px solid var(--gray-200);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

body.graph-mode #articles-container.graph-root .graph-v12-zoom .gz-btn:hover {
  background: #f9fafb;
}

/* 4) Two-column app layout: canvas + right detail */
body.graph-mode #articles-container.graph-root .graph-v12 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 18px;
  align-items: start;
}

@media (max-width: 1100px) {
  body.graph-mode #articles-container.graph-root .graph-v12 {
    grid-template-columns: 1fr;
  }
}

body.graph-mode #articles-container.graph-root .graph-v12-canvas {
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 220px);
  min-height: 520px;
}

body.graph-mode #articles-container.graph-root .graph-v12-detail {
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: #fff;
  overflow: auto;
  height: calc(100vh - 220px);
  min-height: 520px;
  padding: 14px;
}

body.graph-mode #articles-container.graph-root .graph-v12-empty {
  color: var(--gray-400);
  font-size: 14px;
}

/* Ensure the expanded article card inside the detail panel looks normal */
body.graph-mode #articles-container.graph-root .graph-v12-detail .article-card {
  border-bottom: none;
  padding-bottom: 0;
}

/* =========================
   v12 SVG styling (scoped)
   ========================= */

/* Make SVG responsive to avoid horizontal scrolling */
body.graph-mode #articles-container.graph-root .graph-v12-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Pan cursor */
body.graph-mode #articles-container.graph-root .graph-v12-svg {
  cursor: grab;
}

body.graph-mode #articles-container.graph-root .graph-v12-svg.is-panning {
  cursor: grabbing;
}

/* Edges */
body.graph-mode #articles-container.graph-root .graph-v12-svg .edge {
  fill: none;
  stroke: #6b7280; /* temporal default */
  stroke-width: 1;
  opacity: 0.45;
  vector-effect: non-scaling-stroke;
}

body.graph-mode #articles-container.graph-root .graph-v12-svg .edge-line { stroke: #059669; }
body.graph-mode #articles-container.graph-root .graph-v12-svg .edge-tag { stroke: #2563eb; }
body.graph-mode #articles-container.graph-root .graph-v12-svg .edge-actor { stroke: #7c3aed; }
body.graph-mode #articles-container.graph-root .graph-v12-svg .edge-cause { stroke: #d97706; }
body.graph-mode #articles-container.graph-root .graph-v12-svg .edge-temporal { stroke: #6b7280; }

/* Selection / focus */
body.graph-mode #articles-container.graph-root .graph-v12-svg .edge.edge-active {
  opacity: 1;
  stroke-width: 2.25;
}

body.graph-mode #articles-container.graph-root .graph-v12-svg .edge.dim {
  opacity: 0.08;
}

/* Nodes */
body.graph-mode #articles-container.graph-root .graph-v12-svg .node-circle {
  fill: #111827;
  cursor: pointer;
  opacity: 0.95;
  vector-effect: non-scaling-stroke;
}

body.graph-mode #articles-container.graph-root .graph-v12-svg.is-panning {
  cursor: grabbing;
}

body.graph-mode #articles-container.graph-root .graph-v12-svg .node-circle.dim {
  opacity: 0.18;
}

body.graph-mode #articles-container.graph-root .graph-v12-svg .node-circle.node-active {
  stroke: #111827;
  stroke-width: 2;
}

.graph-lane-label {
  font-size: 12px;
  fill: var(--gray-400);
}

.graph-edge {
  stroke: var(--border-color);
  stroke-width: 1;
  fill: none;
  opacity: 0.7;
}

.graph-edge.active {
  stroke-width: 2;
  opacity: 1;
}

.graph-node {
  cursor: pointer;
  opacity: 0.95;
}

.graph-node.dim {
  opacity: 0.15;
}

.graph-edge.dim {
  opacity: 0.12;
}

.graph-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  max-width: 360px;
  background: rgba(15, 23, 42, 0.95);
  color: #fff;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

.graph-tooltip .tt-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.graph-tooltip .tt-meta {
  opacity: 0.85;
}

.graph-detail {
  height: 72vh;
  min-height: 520px;
  overflow: auto;
}

.graph-detail .placeholder {
  color: var(--gray-400);
  font-size: 13px;
}


/* Full-width graph section: hide both sidebars */
body[data-section="graph"] .news-sidebar,
body[data-section="graph"] .questions-sidebar,
body[data-viewing="graph-item"] .news-sidebar,
body[data-viewing="graph-item"] .questions-sidebar {
  display: none !important;
}

body[data-section="graph"] .container,
body[data-viewing="graph-item"] .container {
  grid-template-columns: 1fr !important;
  max-width: none !important;
  width: 100% !important;
}

.graph-full {
  background: transparent;
}

.graph-hint {
  margin-left: auto;
  font-size: 13px;
  color: var(--gray-400);
  align-self: center;
}

/* SVG helpers for v12 edge coloring */
body.graph-mode #articles-container.graph-root svg.graph-v12-svg *{
  vector-effect: non-scaling-stroke;
}

body.graph-mode #articles-container.graph-root .edge{
  stroke: #6b7280;
  stroke-width: 1;
  opacity: 0.55;
  fill: none;
}
body.graph-mode #articles-container.graph-root .edge.edge-tag{ stroke: #2563eb; }
body.graph-mode #articles-container.graph-root .edge.edge-line{ stroke: #059669; }
body.graph-mode #articles-container.graph-root .edge.edge-cause{ stroke: #d97706; }
body.graph-mode #articles-container.graph-root .edge.edge-actor{ stroke: #7c3aed; }
body.graph-mode #articles-container.graph-root .edge.edge-temporal{ stroke: #6b7280; }

body.graph-mode #articles-container.graph-root .node{ cursor: pointer; }
body.graph-mode #articles-container.graph-root .node circle{ fill: #111827; }
body.graph-mode #articles-container.graph-root .node:hover circle{ fill: #000000; }


/* Graph v12 – search + focus + time scale */
body.graph-mode #articles-container.graph-root .graph-v12-controls label.graph-v12-search {
  min-width: 260px;
}
body.graph-mode #articles-container.graph-root .graph-v12-controls label.graph-v12-search input {
  min-width: 240px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}
body.graph-mode #articles-container.graph-root .graph-v12-controls label.graph-v12-focus {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
body.graph-mode #articles-container.graph-root .graph-v12-controls label.graph-v12-focus input {
  width: 16px;
  height: 16px;
}

/* Hide unrelated edges completely in focus mode */
body.graph-mode #articles-container.graph-root .graph-v12-svg .edge.hidden {
  display: none;
}

/* Search hits */
body.graph-mode #articles-container.graph-root .graph-v12-svg .node-circle.search-hit {
  /* Make matches unmistakable without changing layout */
  stroke: #f59e0b;
  stroke-width: 4;
  fill: #f59e0b;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.55));
}

/* Time axis */
body.graph-mode #articles-container.graph-root .graph-time-axis {
  stroke: var(--gray-200);
  stroke-width: 1;
}
body.graph-mode #articles-container.graph-root .graph-time-tick {
  stroke: var(--gray-300);
  stroke-width: 1;
}
body.graph-mode #articles-container.graph-root .graph-time-label {
  fill: var(--gray-400);
  font-size: 11px;
}