/*
 * Styles for the view components (OrbitView, EdgeView, Plot and friends).
 * Component styles only: no page layout, no fonts loaded from the network.
 *
 * Every colour is a CSS custom property so the app shell can restyle the views.
 * The canvases cannot read CSS, so the same tokens are mirrored in colors.js
 * (THEME) and copied from these properties by `applyThemeFromElement()`, which
 * each component calls on its container at construction time. Restyle by
 * redefining these properties on :root (or on a wrapper) *before* constructing
 * the components, or call `setTheme()` / `applyThemeFromElement()` afterwards.
 */

:root {
  --ssv-bg: #0b0e14;
  --ssv-panel: #121722;
  --ssv-grid: #1d2533;
  --ssv-grid-strong: #2b3648;
  --ssv-axis: #6b7789;
  --ssv-fg: #e6e9ef;
  --ssv-dim: #9aa4b2;
  --ssv-faint: #5c6675;
  --ssv-accent: #7cc5ff;
  --ssv-select: #ffffff;
  --ssv-warn: #f5b942;
  --ssv-sun: #ffd27f;
  --ssv-trail: #7f8ca0;
  --ssv-orbit: #3f4a5e;
  --ssv-orbit-selected: #cfe4ff;
  --ssv-font: 12px system-ui, -apple-system, "Segoe UI", sans-serif;
  --ssv-font-small: 10px system-ui, -apple-system, "Segoe UI", sans-serif;
  --ssv-font-bold: bold 12px system-ui, -apple-system, "Segoe UI", sans-serif;

  --ssv-radius: 4px;
  --ssv-tooltip-bg: rgba(12, 16, 24, 0.94);
  --ssv-tooltip-border: #2b3648;
}

/* ---- containers ------------------------------------------------- */

.ssv-view {
  position: relative;
  overflow: hidden;
  background: var(--ssv-bg);
  color: var(--ssv-fg);
  font: var(--ssv-font);
  min-width: 80px;
  min-height: 60px;
  contain: layout paint;
}

.ssv-canvas {
  display: block;
  touch-action: none;           /* wheel/drag handled by the component */
  user-select: none;
  -webkit-user-select: none;
}

.ssv-orbit-canvas,
.ssv-edge-canvas { cursor: crosshair; }

.ssv-plot-canvas { cursor: crosshair; }

.ssv-canvas:focus-visible { outline: 1px solid var(--ssv-accent); outline-offset: -1px; }

/* ---- tooltip ---------------------------------------------------- */

.ssv-tooltip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  white-space: pre;
  padding: 4px 6px;
  border: 1px solid var(--ssv-tooltip-border);
  border-radius: var(--ssv-radius);
  background: var(--ssv-tooltip-bg);
  color: var(--ssv-fg);
  font: var(--ssv-font-small);
  line-height: 1.45;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* ---- DOM legends (built by colors.js) --------------------------- */

.ssv-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  border: 1px solid var(--ssv-grid-strong);
  border-radius: var(--ssv-radius);
  background: var(--ssv-panel);
  color: var(--ssv-dim);
  font: var(--ssv-font-small);
}

.ssv-legend-title {
  color: var(--ssv-fg);
  font: var(--ssv-font);
  font-size: 11px;
  margin-bottom: 2px;
}

.ssv-legend-bar {
  height: 9px;
  width: 100%;
  min-width: 120px;
  border: 1px solid var(--ssv-grid-strong);
  border-radius: 2px;
}

.ssv-legend-ticks {
  display: flex;
  justify-content: space-between;
  color: var(--ssv-faint);
}

.ssv-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}

.ssv-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.ssv-legend-size .ssv-legend-item { min-height: 14px; }

.ssv-dot {
  display: inline-block;
  border-radius: 50%;
  background: var(--ssv-dim);
  flex: none;
}

/* ---- on-canvas overlay notes (optional, used by the shell) ------ */

.ssv-note {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 2px 6px;
  border-radius: var(--ssv-radius);
  background: rgba(12, 16, 24, 0.8);
  color: var(--ssv-warn);
  font: var(--ssv-font-small);
  pointer-events: none;
}

/* ---- reduced motion -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ssv-tooltip { transition: none; }
}