// ─────────────────────────────────────────────────────────────────────────────
// Component: Velocity  (.vel-* prefix)
// File:      src/scss/components/_velocity.scss
//
// Visual rules only — colors, typography, backgrounds, borders.
// Structural layout lives in pages/_velocity.scss.
// Used by: intel_velocity.html, intel_velocity_detail.html
// ─────────────────────────────────────────────────────────────────────────────

// ── Page wrapper ──────────────────────────────────────────────────────────────

.vel-wrap { font-family: var(--font-mono); }

// ── Stat chips ────────────────────────────────────────────────────────────────

.vel-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.vel-stat__val {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-mono);
  background: var(--gradient-spectral);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vel-stat__lbl {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

// ── Module rows ───────────────────────────────────────────────────────────────

.vel-list {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
}

.vel-row {
  border-bottom: 1px solid var(--border-subtle);
  &:last-child { border-bottom: none; }
  &:hover { background: var(--bg-hover); }
}

.vel-module {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent-link);
  text-decoration: none;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  &:hover { text-decoration: underline; }
}

// ── Window bars ───────────────────────────────────────────────────────────────

.vel-bar-track {
  background: var(--bg-overlay);
  border-radius: 2px;
  overflow: hidden;
}

.vel-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
  &--current { background: var(--gradient-spectral); }
  &--prior   { background: color-mix(in srgb, var(--text-muted) 40%, transparent); }
}

// ── Metrics ───────────────────────────────────────────────────────────────────

.vel-metric {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
}

.vel-metric__val {
  font-weight: 600;
  color: var(--text-secondary);
}

// ── Acceleration badge ────────────────────────────────────────────────────────

.vel-accel {
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-mono);
  white-space: nowrap;
  border-radius: 4px;
  padding: 1px 6px;

  &--up {
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent);
  }

  &--down {
    color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-danger) 25%, transparent);
  }

  &--flat {
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-muted) 20%, transparent);
  }
}

// ── Stagnant badge ────────────────────────────────────────────────────────────

.vel-stagnant {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
}

.vel-stagnant--warn {
  color: var(--color-warning);
}

// ── Window legend ─────────────────────────────────────────────────────────────

.vel-legend {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vel-legend__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;

  &--current { background: var(--color-accent); }
  &--prior   { background: color-mix(in srgb, var(--text-muted) 40%, transparent); }
}

// ── Empty state ───────────────────────────────────────────────────────────────

.vel-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  svg { opacity: 0.35; }
}

// ── Detail page ───────────────────────────────────────────────────────────────

.vel-detail-hd {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.vel-detail-module {
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-mono);
  background: var(--gradient-spectral);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vel-detail-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

// detail chips

.vel-detail-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  text-align: center;
}

.vel-detail-chip__val {
  font-size: 1.35rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);

  &--up      { color: var(--color-success); }
  &--down    { color: var(--color-danger); }
  &--neutral { color: var(--text-muted); }
  &--accent  {
    background: var(--gradient-spectral);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

.vel-detail-chip__lbl {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

// window comparison table

.vel-compare-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.vel-compare-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.vel-compare-table {
  width: 100%;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  border-collapse: collapse;

  th {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: right;
    padding: 0.3rem 0.6rem;
    &:first-child { text-align: left; }
  }

  td {
    padding: 0.35rem 0.6rem;
    text-align: right;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-subtle);
    &:first-child { text-align: left; color: var(--text-primary); font-weight: 600; }
  }

  tr.vel-compare--current td { color: var(--color-accent); }
  tr.vel-compare--delta  td { color: var(--text-muted); font-size: 0.68rem; }
}