/* ShredMentor SpeedCurve — SM-110 shared component styles.
   Mounted on /app/me/ (templates/me/dashboard.html) and the UI Library
   (templates/admin_tools/ui_library.html). Keep this the ONLY stylesheet the
   component ships with -- host pages must not fork per-page overrides of its
   internal structure (project_central_shared_systems). */

.scv-root {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Toggles ─────────────────────────────────────────────────────────────── */
.scv-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scv-toggle {
  --scv-cat-color: #666;
  background: transparent;
  border: 1px solid var(--card-border, #2a2a2a);
  color: var(--text-dim, #888);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.scv-toggle:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.scv-toggle[aria-pressed="true"]:not(:disabled) {
  border-color: var(--scv-cat-color);
  color: var(--scv-cat-color);
  background: rgba(255, 255, 255, .04);
}

/* ── Graph ───────────────────────────────────────────────────────────────── */
.scv-graph-wrap {
  position: relative;
  height: 320px;
  background: #0e0e0e;
  border: 1px solid var(--card-border, #2a2a2a);
  border-radius: 8px;
  padding: 12px;
}

.scv-canvas {
  width: 100% !important;
  height: 100% !important;
}

.scv-locked .scv-canvas {
  pointer-events: none;
}

/* ── Lock overlay (grey/incomplete state) ───────────────────────────────── */
.scv-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  background: rgba(10, 10, 10, .72);
  border-radius: 8px;
}

.scv-lock-msg {
  color: var(--text-dim, #999);
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
  max-width: 340px;
}

.scv-lock-link {
  color: var(--accent, #00b140);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.scv-lock-link:hover { text-decoration: underline; }

/* ── Legend (2+ active categories only) ─────────────────────────────────── */
.scv-legend {
  display: none;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-dim, #999);
  font-family: 'Open Sans', sans-serif;
}

.scv-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.scv-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* ── Save flash ──────────────────────────────────────────────────────────── */
.scv-save-status {
  align-self: flex-end;
  font-size: 11px;
  color: #00b140;
  opacity: 0;
  transition: opacity .3s;
}

.scv-save-status.visible { opacity: 1; }

/* ── Compact / row-sparkline mode (SM-120) ──────────────────────────────────
   A compact mount is just a canvas -- no toggles/legend/lock-overlay/save-status
   exist in its DOM (see buildDom()'s compact branch), so this only needs to make
   the single .scv-graph-wrap fill whatever box the host page sizes the mount
   element to (e.g. dashboard.css's .sa-sparkline) instead of the big graph's
   fixed 320px card. */
.scv-compact { height: 100%; gap: 0; }
.scv-compact .scv-graph-wrap {
  height: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}