/*
 * continuum-v3.css — Dedicated styles for the v3 visualisation page.
 *
 * Built on top of the project-wide neumorphism tokens (`neu.css`). The design
 * uses the existing colour palette and stays close to the rest of Logopoïos.
 */

/* ─── Layout shell ───────────────────────────────────────────────────── */

.cv3-toolbar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  margin: 8px 0 18px;
  background: var(--bg-color, #FFFFF8);
  border-radius: var(--r);
  box-shadow: none;
}

.cv3-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.cv3-toolbar-row--filters {
  justify-content: space-between;
}

.cv3-toolbar-section {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cv3-toolbar-section--filters { flex: 1 1 60%; min-width: 0; }
.cv3-toolbar-section--search  { flex: 0 0 auto; min-width: 260px; }

/* Mode bar -------------------------------------------------------------- */
.cv3-mode-bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r);
  box-shadow: none; border: var(--card-border);
}

.cv3-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.cv3-mode-btn:hover { background: rgba(0,0,0,0.04); }
body.dark .cv3-mode-btn:hover { background: rgba(255,255,255,0.06); }

.cv3-mode-btn.is-active {
  background: var(--bg-color, #FFFFF8);
  box-shadow: none;
  font-weight: 600;
}

.cv3-mode-icon { font-size: 16px; }
.cv3-mode-label { white-space: nowrap; }

/* Tool buttons ---------------------------------------------------------- */
.cv3-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--bg-color, #FFFFF8);
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  box-shadow: none;
  transition: box-shadow 0.15s ease;
}

.cv3-tool-btn:hover { box-shadow: none; }
.cv3-tool-btn:active { box-shadow: none; }
.cv3-tool-btn--ghost { box-shadow: none; }
.cv3-tool-btn--ghost:hover { box-shadow: none; }

/* Forces popover -------------------------------------------------------- */
.cv3-forces-wrap { position: relative; }
.cv3-forces-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 280px;
  padding: 14px;
  background: var(--bg-color, #FFFFF8);
  border-radius: var(--r);
  border-color: var(--accent); box-shadow: var(--card-shadow-hover, none);
}
.cv3-forces-body { display: flex; flex-direction: column; gap: 10px; }
.cv3-force-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 50px;
  gap: 8px;
  align-items: center;
}
.cv3-force-label { font-size: 13px; color: var(--muted-color, #475569); }
.cv3-force-value { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.cv3-forces-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

/* Filters --------------------------------------------------------------- */
.cv3-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.cv3-filter-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-color, #475569);
  margin-right: 6px;
}
.cv3-pill {
  padding: 4px 10px;
  border: none;
  border-radius: 999px;
  background: var(--bg-color, #FFFFF8);
  cursor: pointer;
  font-size: 13px;
  color: inherit;
  box-shadow: none; border: var(--card-border);
}
.cv3-pill.is-active { box-shadow: none; font-weight: 600; }

.cv3-type-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(0,0,0,0.02);
  font-size: 13px;
}
body.dark .cv3-type-toggle { background: rgba(255,255,255,0.04); }
.cv3-type-toggle input { accent-color: #6366f1; }

/* Search ---------------------------------------------------------------- */
.cv3-search-wrap { position: relative; flex: 1 1 100%; }
#cv3-search-input {
  width: 100%;
  min-width: 240px;
  padding: 8px 12px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--bg-color, #FFFFF8);
  box-shadow: none; border: var(--card-border);
  font-size: 14px;
  color: inherit;
}
#cv3-search-input:focus { outline: 2px solid #6366f1; outline-offset: 2px; }
.cv3-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--bg-color, #FFFFF8);
  border-radius: var(--r-sm);
  border-color: var(--accent); box-shadow: var(--card-shadow-hover, none);
  max-height: 320px;
  overflow-y: auto;
}
.cv3-search-hit {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  color: inherit;
}
.cv3-search-hit:hover, .cv3-search-hit.is-active { background: rgba(99,102,241,0.08); }
.cv3-search-hit-type { font-size: 12px; color: var(--muted-color, #64748b); }
.cv3-search-empty { padding: 12px; font-size: 13px; color: var(--muted-color, #64748b); }

/* ─── Visualisation shell ─────────────────────────────────────────────── */

.cv3-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  margin-bottom: 32px;
}
.cv3-viz {
  position: relative;
  min-height: 640px;
  background: var(--bg-color, #FFFFF8);
  border-radius: var(--r);
  box-shadow: none;
  overflow: hidden;
}
.cv3-viz svg {
  width: 100%;
  height: 100%;
  min-height: 640px;
  display: block;
}
.cv3-webgl {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
}
.cv3-status {
  position: absolute;
  bottom: 8px;
  left: 12px;
  margin: 0;
  font-size: 12px;
  color: var(--muted-color, #64748b);
  background: rgba(255,255,248,0.85);
  padding: 2px 8px;
  border-radius: 6px;
  pointer-events: none;
}
body.dark .cv3-status { background: rgba(15,23,42,0.85); color: #cbd5e1; }

.cv3-3d-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--muted-color, #64748b);
}

/* ─── Side panel ──────────────────────────────────────────────────────── */

.cv3-panel {
  position: sticky;
  top: 16px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: fit-content;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  background: var(--bg-color, #FFFFF8);
  border-radius: var(--r);
  box-shadow: none;
}
.cv3-panel-header {
  display: grid;
  grid-template-columns: 40px 1fr 32px;
  gap: 10px;
  align-items: start;
  padding: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  border-top: 4px solid var(--cv3-accent, #6366f1);
}
body.dark .cv3-panel-header { border-bottom-color: rgba(255,255,255,0.08); }
.cv3-panel-icon { font-size: 26px; line-height: 1; }
.cv3-panel-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-color, #64748b);
  font-weight: 600;
}
.cv3-panel-title { margin: 4px 0 6px; font-size: 18px; font-weight: 700; }
.cv3-panel-path { margin: 0; font-size: 12px; color: var(--muted-color, #64748b); }
.cv3-panel-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  color: inherit;
  align-self: start;
}
.cv3-panel-close:hover { background: rgba(0,0,0,0.06); }
body.dark .cv3-panel-close:hover { background: rgba(255,255,255,0.08); }

.cv3-panel-body {
  padding: 14px;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cv3-panel-section h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cv3-panel-desc { margin: 0; font-size: 14px; line-height: 1.5; }
.cv3-panel-kw { display: flex; flex-wrap: wrap; gap: 4px; }
.cv3-panel-kw-pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(99,102,241,0.10);
  color: var(--text-color, #1e293b);
  font-size: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cv3-panel-kw-pill:hover {
  background: rgba(99,102,241,0.22);
  border-color: rgba(99,102,241,0.4);
}
body.dark .cv3-panel-kw-pill { background: rgba(99,102,241,0.18); color: #e2e8f0; }
body.dark .cv3-panel-kw-pill:hover { background: rgba(99,102,241,0.35); }

.cv3-panel-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cv3-panel-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cv3-panel-list-type { font-size: 11px; color: var(--muted-color, #64748b); }
.cv3-panel-link {
  border: none;
  background: transparent;
  color: #4f46e5;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  padding: 0;
}
.cv3-panel-link:hover { text-decoration: underline; }

.cv3-panel-chain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cv3-panel-chain-step {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 8px;
  align-items: center;
}
.cv3-panel-chain-icon { font-size: 14px; }
.cv3-panel-chain-type { font-size: 11px; color: var(--muted-color, #64748b); }

.cv3-panel-footer {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
body.dark .cv3-panel-footer { border-top-color: rgba(255,255,255,0.08); }

.cv3-panel-btn {
  padding: 6px 12px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--bg-color, #FFFFF8);
  cursor: pointer;
  font-size: 13px;
  color: inherit;
  box-shadow: none;
}
.cv3-panel-btn:hover { box-shadow: none; }
.cv3-panel-btn--ghost { box-shadow: none; }
.cv3-panel-btn--ghost:hover { box-shadow: none; }

.cv3-panel-empty {
  padding: 32px 18px;
  text-align: center;
  color: var(--muted-color, #64748b);
}
.cv3-panel-empty-icon { font-size: 36px; margin-bottom: 10px; }
.cv3-panel-empty-hint { font-size: 12px; opacity: 0.85; margin-top: 8px; }

/* ─── SVG node/link defaults ─────────────────────────────────────────── */

.cv3-node circle { transition: r 0.2s ease, stroke-width 0.2s ease; cursor: pointer; }
.cv3-node:focus { outline: none; }
.cv3-node:focus-visible circle { stroke: #4f46e5; stroke-width: 3; }
.cv3-node.is-selected circle { stroke: #f59e0b; stroke-width: 3; }
.cv3-node.is-faded { opacity: 0.25; }

.cv3-link { stroke: #94a3b8; stroke-width: 1.2; pointer-events: none; }
.cv3-link--parent { stroke: #cbd5e1; stroke-dasharray: none; }
.cv3-link--inter { stroke: #6366f1; stroke-dasharray: 3,3; opacity: 0.5; }
.cv3-link--programme { stroke: #15803d; opacity: 0.4; }
.cv3-link--ed { stroke: #b45309; opacity: 0.4; }
.cv3-link.is-faded { opacity: 0.08; }

.cv3-label {
  font-size: 11px;
  fill: var(--text-color, #1e293b);
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--bg-color, #FFFFF8);
  stroke-width: 3;
  stroke-linejoin: round;
}
body.dark .cv3-label { fill: #e2e8f0; stroke: #0f172a; }

.cv3-halo { pointer-events: none; transition: r 0.3s ease; }

.cv3-sunburst-arc { cursor: pointer; transition: opacity 0.2s ease; }
.cv3-sunburst-arc:hover { opacity: 0.85; }
.cv3-sunburst-arc.is-selected { stroke-width: 3; stroke: #f59e0b; }
.cv3-sunburst-label { font-size: 10px; fill: #fff; pointer-events: none; paint-order: stroke; stroke: rgba(0,0,0,0.4); stroke-width: 2; }

.cv3-bundling-link { transition: stroke-opacity 0.2s ease; }
.cv3-bundle-node circle { cursor: pointer; }
.cv3-bundle-node text { font-size: 10px; fill: var(--text-color, #1e293b); pointer-events: none; }
body.dark .cv3-bundle-node text { fill: #e2e8f0; }
.cv3-bundle-node.is-selected circle { stroke: #f59e0b; stroke-width: 3; }

.cv3-phylo-axis {
  font-size: 13px;
  font-weight: 600;
  fill: var(--text-color, #1e293b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.dark .cv3-phylo-axis { fill: #e2e8f0; }
.cv3-phylo-guide { stroke: rgba(100,116,139,0.18); stroke-dasharray: 4,4; stroke-width: 1; }
.cv3-phylo-link { stroke-opacity: 0.4; stroke-width: 1.2; }

/* ─── Responsive ──────────────────────────────────────────────────────── */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  .cv3-shell { grid-template-columns: 1fr; }
  .cv3-panel {
    position: static;
    max-height: none;
    border-radius: var(--r);
    box-shadow: none;
  }
  .cv3-viz { min-height: 500px; }
  .cv3-viz svg { min-height: 500px; }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
  .cv3-toolbar {
    padding: 10px;
    gap: 10px;
    margin: 4px 0 12px;
  }
  .cv3-toolbar-section--search { width: 100%; min-width: 0; }
  .cv3-toolbar-row--filters { flex-direction: column; align-items: stretch; }

  /* Hide mode labels on mobile — show only icons */
  .cv3-mode-btn .cv3-mode-label { display: none; }
  .cv3-mode-btn { padding: 8px 10px; }
  .cv3-mode-bar { gap: 2px; }

  /* Viz takes full viewport height minus toolbar */
  .cv3-viz {
    min-height: calc(100vh - 200px);
    min-height: calc(100dvh - 200px);
    border-radius: 0;
    margin: 0 -16px;
    width: calc(100% + 32px);
  }
  .cv3-viz svg {
    min-height: calc(100vh - 200px);
    min-height: calc(100dvh - 200px);
  }

  /* Panel as bottom sheet on mobile */
  .cv3-shell { gap: 0; }
  .cv3-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 50vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,.15);
    z-index: 100;
    transform: translateY(100%);
    transition: transform .3s ease;
  }
  .cv3-panel:not(:empty) {
    transform: translateY(0);
  }

  /* Minimap smaller on mobile */
  .cv3-minimap {
    width: 120px !important;
    height: 90px !important;
  }

  /* Breadcrumb hidden on mobile */
  .cv3-breadcrumb { display: none !important; }

  /* Filter pills smaller */
  .cv3-pill { padding: 4px 8px; font-size: 12px; }
  .cv3-type-toggle { font-size: 12px; }
  .cv3-type-toggle input { width: 14px; height: 14px; }

  /* Search input full width */
  .cv3-search-wrap input { font-size: 14px; padding: 10px 12px; }
  .cv3-search-dropdown { max-height: 200px; }

  /* Status bar */
  .cv3-status { font-size: 11px; padding: 4px 8px; }
}

/* Small mobile (< 480px) */
@media (max-width: 480px) {
  .cv3-mode-btn { padding: 6px 8px; font-size: 12px; }
  .cv3-mode-icon { font-size: 14px; }
  .cv3-toolbar { padding: 8px; }

  /* Only show first 6 mode buttons, hide the rest */
  .cv3-mode-bar .cv3-mode-btn:nth-child(n+7) { display: none; }

  /* Filter row: horizontal scroll */
  .cv3-filter-row--types {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cv3-filter-row--types::-webkit-scrollbar { display: none; }

  .cv3-viz {
    min-height: calc(100vh - 160px);
    min-height: calc(100dvh - 160px);
  }
  .cv3-viz svg {
    min-height: calc(100vh - 160px);
    min-height: calc(100dvh - 160px);
  }

  .cv3-minimap { display: none !important; }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .cv3-mode-btn { min-height: 44px; min-width: 44px; }
  .cv3-pill { min-height: 36px; padding: 6px 12px; }
  .cv3-tool-btn { min-height: 44px; min-width: 44px; }
  .cv3-panel-link { padding: 8px 0; }
  .cv3-search-hit { min-height: 44px; }
}

/* Visually hidden helper. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.cv3-noscript {
  margin: 24px 0;
  padding: 18px;
  background: var(--bg-color, #FFFFF8);
  border-radius: var(--r);
  box-shadow: none;
}


/* ─── Phase 1: HTML host (ECharts, Leaflet, etc.) ─────────────────────── */

.cv3-html-host {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: var(--bg-color, #FFFFF8);
  border-radius: var(--r);
  overflow: hidden;
}
.cv3-echarts-status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 14px;
  color: var(--muted-color, #64748b);
}

/* ─── Phase 2: LOD helpers ────────────────────────────────────────────── */

.cv3-node.cv3-lod-tiny circle { opacity: 0.55; }
.cv3-node.cv3-lod-tiny:focus-visible circle { opacity: 1; }

/* Halo pulse animation (Galaxie) ------------------------------------- */
.cv3-halo--pulse { animation: cv3-halo-pulse 4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes cv3-halo-pulse {
  0%, 100% { transform: scale(1.0); opacity: 1; }
  50%       { transform: scale(1.06); opacity: 0.85; }
}

/* Mode-switch fade-in ------------------------------------------------ */
.cv3-fade-in { animation: cv3-fade-in 280ms ease-out; }
@keyframes cv3-fade-in {
  from { opacity: 0.4; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Phase 3: Mini-map ───────────────────────────────────────────────── */

.cv3-minimap {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 200px;
  height: 150px;
  background: rgba(255,255,248,0.8);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer;
  z-index: 5;
}
body.dark .cv3-minimap { background: rgba(15,23,42,0.78); border-color: rgba(99,102,241,0.35); }
.cv3-minimap[hidden] { display: none; }

/* ─── Phase 3: Breadcrumb ─────────────────────────────────────────────── */

.cv3-breadcrumb {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 6px 10px;
  background: rgba(255,255,248,0.88);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  font-size: 12px;
}
body.dark .cv3-breadcrumb { background: rgba(15,23,42,0.85); }
.cv3-breadcrumb[hidden] { display: none; }
.cv3-bc-segment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 12px;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.cv3-bc-segment:hover { background: rgba(99,102,241,0.10); }
.cv3-bc-segment.is-current { font-weight: 700; color: #4f46e5; }
.cv3-bc-icon { font-size: 13px; }
.cv3-bc-sep { color: var(--muted-color, #94a3b8); font-size: 12px; }

/* ─── Phase 3: Tooltip ────────────────────────────────────────────────── */

.cv3-tooltip {
  position: fixed;
  z-index: 50;
  max-width: 280px;
  padding: 10px 12px;
  background: rgba(15,23,42,0.94);
  color: #f1f5f9;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  font-size: 12px;
  pointer-events: none;
  line-height: 1.4;
}
.cv3-tooltip[hidden] { display: none; }
.cv3-tt-head { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; }
.cv3-tt-icon { font-size: 18px; }
.cv3-tt-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; }
.cv3-tt-title { font-weight: 600; font-size: 13px; }
.cv3-tt-desc { margin: 6px 0 0; opacity: 0.85; }
.cv3-tt-stats {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.75;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 6px;
}

/* ─── Phase 3: Cheat sheet ────────────────────────────────────────────── */

.cv3-cheatsheet {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: min(420px, calc(100vw - 32px));
  padding: 18px 22px;
  background: var(--bg-color, #FFFFF8);
  border-radius: var(--r);
  border-color: var(--accent); box-shadow: var(--card-shadow-hover, none);
}
.cv3-cheatsheet h3 { margin: 0 0 12px; font-size: 16px; }
.cv3-cheatsheet table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cv3-cheatsheet td { padding: 4px 6px; }
.cv3-cheatsheet td:first-child { width: 40%; }
.cv3-cheatsheet kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--muted-color, #94a3b8);
  border-radius: 4px;
  background: rgba(0,0,0,0.04);
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
body.dark .cv3-cheatsheet kbd { background: rgba(255,255,255,0.06); }
.cv3-cheatsheet-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
}
.cv3-cheatsheet-close:hover { background: rgba(0,0,0,0.06); }

/* ─── Phase 2: 3D tooltip styling ─────────────────────────────────────── */

.cv3-3d-tooltip {
  background: rgba(15,23,42,0.94);
  color: #f1f5f9;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  pointer-events: none;
}

/* ═══════════════════════════════════════════
   ORGANIGRAMME — vue hiérarchique fixe (Sugiyama)
   ═══════════════════════════════════════════ */
.cv3-org-node { cursor: pointer; transition: opacity 0.15s ease; }
.cv3-org-node.is-neighbor circle { stroke: #f59e0b; stroke-width: 2.5; }
.cv3-org-node.is-faded { opacity: 0.18; }
.cv3-org-node.is-selected circle { stroke: #f59e0b; stroke-width: 3.5; }

.cv3-org-link { stroke: #94a3b8; stroke-width: 1; transition: opacity 0.15s ease; }
.cv3-org-link.is-highlight { stroke: #f59e0b; stroke-width: 2; stroke-opacity: 0.8 !important; }
.cv3-org-link.is-faded { opacity: 0.05; }

.cv3-org-label {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  fill: var(--text-color, #111);
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--bg-color, #fffff8);
  stroke-width: 3px;
  stroke-linejoin: round;
}
body.dark .cv3-org-label { fill: #e8e8e0; stroke: #111; }