/* git-viz.css — shared styling for the Git Commands section's commit-graph
   engine (git-viz.js) and its surrounding panels. Loaded by every
   concept-git-*.html page alongside system-design-shared.css (which still
   owns .global-nav/.crumb/.card/.toggle-btn/.ctrl-label — untouched here).
   Scope is intentionally narrow: only the gv- prefixed graph/panel/terminal
   primitives live in this file. */

/* ── Graph canvas ── */
.gv-graph-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  background: radial-gradient(circle at 12% 15%, rgba(240, 136, 62, 0.07) 0%, transparent 55%), #0b0915;
  border: 1px solid rgba(240, 136, 62, 0.18);
  border-radius: 12px;
  padding: 8px 4px;
}
.gv-graph-wrap svg { display: block; }

.gv-edge { stroke-width: 2.2; opacity: 0.85; }
.gv-edge-orphan { opacity: 0.28; stroke-dasharray: 4 3; }

/* Commits no branch/tag/HEAD reaches any more (e.g. pre-rebase originals,
   or history dropped by reset --hard) — still drawn, visibly "cut loose". */
.gv-commit.gv-orphan { opacity: 0.4; }
.gv-commit.gv-orphan .gv-node-circle { stroke-dasharray: 2 2; }

.gv-node-circle { stroke: #05060a; stroke-width: 2; transition: fill 0.25s; }
.gv-node-merge { stroke: #f8fafc; stroke-width: 2.5; }
.gv-head-ring { stroke: #f8fafc; stroke-width: 1.6; stroke-dasharray: 3 3; }
.gv-commit.gv-selected .gv-node-circle { stroke: #facc15; stroke-width: 3.5; }
.gv-commit.gv-selected .gv-hash { fill: #facc15; font-weight: 700; }

.gv-hash { font: 10px ui-monospace, Consolas, monospace; fill: #64748b; }
.gv-msg { font: 10.5px system-ui, sans-serif; fill: #94a3b8; }

.gv-commit.gv-new .gv-node-circle { animation: gvPopIn 0.45s ease; }
.gv-commit.gv-new .gv-hash,
.gv-commit.gv-new .gv-msg { animation: gvFadeIn 0.5s ease; }
@keyframes gvPopIn {
  0% { transform: scale(0.2); opacity: 0; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes gvFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Branch pills / HEAD flag / tags ── */
.gv-pill-rect { fill: #0f0d1c; stroke-width: 1.6; }
.gv-pill-text { font: 700 11px system-ui, sans-serif; fill: #e2e8f0; }
.gv-pill-current .gv-pill-rect { fill: rgba(240, 136, 62, 0.18); }
.gv-pill-head { font: 800 9px system-ui, sans-serif; letter-spacing: 0.08em; fill: #f0883e; }
.gv-pill-rect-detached { fill: rgba(148, 163, 184, 0.15); stroke: #94a3b8; stroke-dasharray: 3 2; }
.gv-pill-detached .gv-pill-text { fill: #cbd5e1; }
.gv-pill-rect-remote { fill: rgba(14, 165, 233, 0.08); stroke: #0ea5e9; stroke-dasharray: 3 2; }
.gv-pill-text-remote { fill: #7dd3fc; font-weight: 600; }

.gv-pill-moved .gv-pill-rect { animation: gvPulseRing 0.7s ease; }
@keyframes gvPulseRing {
  0% { filter: drop-shadow(0 0 0 rgba(240, 136, 62, 0)); }
  40% { filter: drop-shadow(0 0 6px rgba(240, 136, 62, 0.75)); }
  100% { filter: drop-shadow(0 0 0 rgba(240, 136, 62, 0)); }
}

.gv-tag-diamond { fill: #facc15; stroke: #05060a; stroke-width: 1.4; }
.gv-tag-text { font: 700 10px system-ui, sans-serif; fill: #fcd34d; }

/* ── Working Directory / Staging Area / Repository panel ── */
.gv-files-row { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.gv-files-col { flex: 1 1 180px; min-width: 150px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(240, 136, 62, 0.12); border-radius: 10px; padding: 10px; }
.gv-files-head { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #f0883e; margin-bottom: 8px; }
.gv-files-arrow { align-self: center; color: #475569; font-size: 16px; flex: 0 0 auto; }
.gv-file { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; color: #cbd5e1; padding: 4px 6px; border-radius: 6px; margin-bottom: 4px; background: rgba(255, 255, 255, 0.02); border-left: 2px solid transparent; }
.gv-file-modified { border-left-color: rgba(239, 68, 68, 0.4); }
.gv-file-untracked { border-left-color: rgba(250, 204, 21, 0.4); }
.gv-file-staged { border-left-color: rgba(34, 197, 94, 0.4); }
.gv-file span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Consolas, monospace; }
/* A file can carry more than one badge at once (staged AND modified again
   since — same two-section split real `git status` shows), so each badge is
   colored by its own type rather than by the row's single background class. */
.gv-file-tags { display: flex; gap: 4px; flex: 0 0 auto; }
.gv-file-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 10px; flex: 0 0 auto; }
.gv-file-tag-clean { color: #64748b; background: rgba(100, 116, 139, 0.12); }
.gv-file-tag-modified { color: #fca5a5; background: rgba(239, 68, 68, 0.12); }
.gv-file-tag-untracked { color: #fcd34d; background: rgba(250, 204, 21, 0.12); }
.gv-file-tag-staged { color: #6ee7b7; background: rgba(34, 197, 94, 0.14); }
.gv-files-empty { font-size: 12px; color: #475569; font-style: italic; }

/* ── Branch legend ── */
.gv-legend-row { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 4px; border-radius: 6px; }
.gv-legend-row.gv-legend-current { background: rgba(240, 136, 62, 0.08); }
.gv-legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.gv-legend-name { color: #e2e8f0; font-weight: 600; }
.gv-legend-hash { font-family: ui-monospace, Consolas, monospace; color: #64748b; font-size: 11px; }
.gv-legend-head { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; color: #f0883e; border: 1px solid rgba(240, 136, 62, 0.4); border-radius: 8px; padding: 1px 6px; }

/* ── Stash panel ── */
.gv-stash-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.gv-stash-id { font-family: ui-monospace, Consolas, monospace; color: #38bdf8; flex: 0 0 auto; }
.gv-stash-msg { color: #cbd5e1; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-stash-count { color: #64748b; font-size: 11px; flex: 0 0 auto; }

/* ── Terminal transcript ── */
.gv-term { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; max-height: 260px; overflow-y: auto; padding: 4px 2px; }
.gv-term-line { padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; border-left: 3px solid #334155; background: rgba(255, 255, 255, 0.02); animation: gvFadeIn 0.3s ease; }
.gv-term-cmd { color: #f1f5f9; font-weight: 700; }
.gv-term-exp { color: #94a3b8; font-family: system-ui, sans-serif; font-size: 12px; line-height: 1.55; margin-top: 4px; }
.gv-term-line.gv-term-error { border-left-color: #ef4444; }
.gv-term-line.gv-term-error .gv-term-cmd { color: #fca5a5; }
.gv-term-line.gv-term-danger { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.06); }
.gv-term-line.gv-term-merge-ff, .gv-term-line.gv-term-revert { border-left-color: #22c55e; }
.gv-term-line.gv-term-merge-3way, .gv-term-line.gv-term-commit { border-left-color: #f0883e; }
.gv-term-line.gv-term-rebase, .gv-term-line.gv-term-cherry-pick { border-left-color: #a78bfa; }
.gv-term-line.gv-term-checkout, .gv-term-line.gv-term-branch { border-left-color: #38bdf8; }
.gv-term-line.gv-term-stash, .gv-term-line.gv-term-fetch, .gv-term-line.gv-term-pull, .gv-term-line.gv-term-push { border-left-color: #0ea5e9; }
.gv-term-line.gv-term-tag { border-left-color: #facc15; }
.gv-term-line.gv-term-stage { border-left-color: #22c55e; }
.gv-term-line.gv-term-reset { border-left-color: #fb923c; }
.gv-term-line.gv-term-status, .gv-term-line.gv-term-edit { border-left-color: #475569; }
.gv-term::-webkit-scrollbar { width: 5px; }
.gv-term::-webkit-scrollbar-thumb { background: rgba(240, 136, 62, 0.3); border-radius: 3px; }

@media (max-width: 640px) {
  .gv-files-row { flex-direction: column; }
  .gv-files-arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 10px; }
}