// ─────────────────────────────────────────────────────────────────────────────
// Component: Commit Detail  (.cd3-* prefix, .cd2-* for symbol graph)
// File:      src/scss/components/_commit-detail.scss
//
// Visual rules only — colors, typography, backgrounds, borders, animations.
// Structural layout lives in pages/_commit-detail.scss.
// ─────────────────────────────────────────────────────────────────────────────

// ── Header ────────────────────────────────────────────────────────────────────

.cd3-header {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;

  &.cd3-breaking-border { border-left: 3px solid var(--color-danger); }
}

.cd3-subject {
  font-size: 20px;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0;
}

.cd3-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;

  p { margin: 0; }
  p + p { margin-top: 8px; }
}

// ── Meta row ─────────────────────────────────────────────────────────────────

.cd3-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: var(--weight-bold);
  flex-shrink: 0;

  &.cd3-av-agent {
    background: color-mix(in srgb, var(--color-accent) 15%, transparent);
    color: var(--color-accent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
  &.cd3-av-human {
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success);
    border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
  }
  &.cd3-av-unk {
    background: var(--bg-overlay);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
  }
}

.cd3-author {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--color-accent-link);
  text-decoration: none;
  &:hover { text-decoration: underline; }
}

.cd3-sep   { color: var(--border-default); font-size: 13px; }
.cd3-time  { font-size: 12px; color: var(--text-secondary); }
.cd3-date  { font-size: 12px; color: var(--text-muted); }
.cd3-muted { color: var(--text-muted); }
.cd3-mono  { font-family: var(--font-mono); }

.cd3-sha {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cd3-copy-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  transition: color var(--transition-fast), background var(--transition-fast);

  &:hover {
    color: var(--text-primary);
    background: var(--bg-overlay);
  }
}

.cd3-parent-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-accent-link);
  text-decoration: none;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  &:hover { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
}

// ── Type / semver / scope badges ──────────────────────────────────────────────

.cd3-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: var(--weight-bold);
  font-family: var(--font-mono);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.cd3-ct-feat     { background: color-mix(in srgb, var(--color-accent)  12%, transparent); color: var(--color-accent);  border: 1px solid color-mix(in srgb, var(--color-accent)  25%, transparent); }
.cd3-ct-fix      { background: color-mix(in srgb, var(--color-danger)  12%, transparent); color: var(--color-danger);  border: 1px solid color-mix(in srgb, var(--color-danger)  25%, transparent); }
.cd3-ct-chore    { background: color-mix(in srgb, var(--text-muted)    10%, transparent); color: var(--text-muted);    border: 1px solid color-mix(in srgb, var(--text-muted)    20%, transparent); }
.cd3-ct-style    { background: color-mix(in srgb, var(--color-purple)  12%, transparent); color: var(--color-purple);  border: 1px solid color-mix(in srgb, var(--color-purple)  25%, transparent); }
.cd3-ct-refactor { background: color-mix(in srgb, var(--color-orange)  12%, transparent); color: var(--color-orange);  border: 1px solid color-mix(in srgb, var(--color-orange)  25%, transparent); }
.cd3-ct-docs     { background: color-mix(in srgb, var(--color-teal)    12%, transparent); color: var(--color-teal);    border: 1px solid color-mix(in srgb, var(--color-teal)    25%, transparent); }
.cd3-ct-test     { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent); }
.cd3-ct-perf     { background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); border: 1px solid color-mix(in srgb, var(--color-warning) 25%, transparent); }
.cd3-ct-build    { background: color-mix(in srgb, var(--color-orange)  12%, transparent); color: var(--color-orange);  border: 1px solid color-mix(in srgb, var(--color-orange)  25%, transparent); }
.cd3-ct-ci       { background: color-mix(in srgb, var(--color-teal)    12%, transparent); color: var(--color-teal);    border: 1px solid color-mix(in srgb, var(--color-teal)    25%, transparent); }

.cd3-sv {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: var(--weight-bold);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cd3-sv-breaking { background: color-mix(in srgb, var(--color-danger)  15%, transparent); color: var(--color-danger);  border: 1px solid color-mix(in srgb, var(--color-danger)  30%, transparent); }
.cd3-sv-major    { background: color-mix(in srgb, var(--color-danger)  10%, transparent); color: var(--color-danger);  border: 1px solid color-mix(in srgb, var(--color-danger)  20%, transparent); }
.cd3-sv-minor    { background: color-mix(in srgb, var(--color-accent)  10%, transparent); color: var(--color-accent);  border: 1px solid color-mix(in srgb, var(--color-accent)  20%, transparent); }
.cd3-sv-patch    { background: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 20%, transparent); }

.cd3-scope {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}

.cd3-branch-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  svg { color: var(--text-muted); }
}

.cd3-pos-pill {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 2px 7px;
}

// ── Dimension strip ───────────────────────────────────────────────────────────

.cd3-dim-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.cd3-dim-num {
  font-size: 22px;
  font-weight: var(--weight-bold);
  font-family: var(--font-mono);
  line-height: 1;
}

.cd3-dim-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--weight-medium);
}

.cd3-dim-add   { border-left: 2px solid var(--color-success); .cd3-dim-num { color: var(--color-success); } }
.cd3-dim-mod   { border-left: 2px solid var(--color-warning); .cd3-dim-num { color: var(--color-warning); } }
.cd3-dim-del   { border-left: 2px solid var(--color-danger);  .cd3-dim-num { color: var(--color-danger);  } }
.cd3-dim-files {                                               .cd3-dim-num { color: var(--text-primary);  } }
.cd3-dim-snap  {                                               .cd3-dim-num { color: var(--text-secondary);} }
.cd3-dim-dead  { border-left: 2px solid var(--color-danger);  .cd3-dim-num { color: var(--color-danger);  } }
.cd3-dim-clean {                                               .cd3-dim-num { color: var(--color-success); } }
.cd3-dim-test  { border-left: 2px solid var(--color-accent);  .cd3-dim-num { color: var(--color-accent);  } }

// ── Symbol graph (cd2-) ───────────────────────────────────────────────────────

.cd2-graph-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cd2-mode-btn {
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);

  &:hover { color: var(--text-secondary); border-color: var(--border-default); }
  &.active {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}

.cd2-sym-graph-wrap { background: color-mix(in srgb, var(--bg-base) 60%, transparent); }

.cd2-sym-info-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.cd2-sym-hint { font-size: 11px; color: var(--text-muted); margin: 0; }

// ── Sections ──────────────────────────────────────────────────────────────────

.cd3-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cd3-section-hd {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.cd3-section-summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  &::-webkit-details-marker { display: none; }
  &:hover { background: var(--bg-overlay); }
}

.cd3-chevron {
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

details.cd3-section--collapsible[open] .cd3-chevron { transform: rotate(180deg); }

.cd3-section-title {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.cd3-section-pill {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 1px 7px;
  font-family: var(--font-mono);

  &.cd3-pill-count {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
}

// ── Op dots ───────────────────────────────────────────────────────────────────

.cd3-op-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  line-height: 1;
}

.cd3-op-add { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.cd3-op-del { background: color-mix(in srgb, var(--color-danger)  15%, transparent); color: var(--color-danger);  }
.cd3-op-mod { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.cd3-op-unk { background: var(--bg-overlay); color: var(--text-muted); }

// ── File cards ────────────────────────────────────────────────────────────────

.cd3-file-card {
  border-bottom: 1px solid var(--border-subtle);
  &:last-child { border-bottom: none; }
}

.cd3-file-hd { background: color-mix(in srgb, var(--bg-overlay) 50%, transparent); }

.cd3-file-insert { border-left: 2px solid var(--color-success); }
.cd3-file-delete { border-left: 2px solid var(--color-danger);  }
.cd3-file-replace,
.cd3-file-patch   { border-left: 2px solid var(--color-warning); }

.cd3-file-path {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-decoration: none;
  &:hover { color: var(--color-accent-link); text-decoration: underline; }
}

.cd3-ext {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  padding: 1px 5px;
}

.cd3-file-summary { font-size: 11px; color: var(--text-muted); }

// ── Symbol tree ───────────────────────────────────────────────────────────────

.cd3-sym-row {
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  &:hover { background: var(--bg-overlay); }
}

.cd3-sym-indent { color: var(--border-default); display: inline-flex; align-items: center; }

.cd3-sym-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.cd3-sym-link {
  text-decoration: none;
  &:hover { color: var(--color-accent-link); text-decoration: underline; }
}

.cd3-sym-child-name { color: var(--text-secondary); }

.cd3-sym-desc { font-size: 11px; color: var(--text-muted); }

.cd3-sym-delete .cd3-sym-name {
  color: var(--text-muted);
  text-decoration: line-through;
}

// ── Kind chips ────────────────────────────────────────────────────────────────

.cd3-kind {
  font-size: 9px;
  font-weight: var(--weight-bold);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
}

.cd3-k-class  { background: color-mix(in srgb, var(--color-accent)  10%, transparent); color: var(--color-accent);  border: 1px solid color-mix(in srgb, var(--color-accent)  20%, transparent); }
.cd3-k-method { background: color-mix(in srgb, var(--color-purple)  10%, transparent); color: var(--color-purple);  border: 1px solid color-mix(in srgb, var(--color-purple)  20%, transparent); }
.cd3-k-func   { background: color-mix(in srgb, var(--color-teal)    10%, transparent); color: var(--color-teal);    border: 1px solid color-mix(in srgb, var(--color-teal)    20%, transparent); }
.cd3-k-var    { background: color-mix(in srgb, var(--color-orange)  10%, transparent); color: var(--color-orange);  border: 1px solid color-mix(in srgb, var(--color-orange)  20%, transparent); }
.cd3-k-import { background: color-mix(in srgb, var(--text-muted)    10%, transparent); color: var(--text-muted);    border: 1px solid color-mix(in srgb, var(--text-muted)    20%, transparent); }

// ── Flat file list ────────────────────────────────────────────────────────────

.cd3-fl-row {
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  &:hover { background: var(--bg-overlay); }
}

.cd3-fl-dot {
  font-size: 13px;
  font-weight: var(--weight-bold);
  font-family: var(--font-mono);
}

.cd3-fl-add .cd3-fl-dot { color: var(--color-success); }
.cd3-fl-mod .cd3-fl-dot { color: var(--color-warning); }
.cd3-fl-del .cd3-fl-dot { color: var(--color-danger);  }

.cd3-fl-path {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  text-decoration: none;
  &:hover { color: var(--color-accent-link); text-decoration: underline; }
}

.cd3-fl-gone { color: var(--text-muted); text-decoration: line-through; }

.cd3-tally-add,
.cd3-tally-mod,
.cd3-tally-del {
  font-size: 11px;
  font-weight: var(--weight-bold);
  font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.cd3-tally-add { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, transparent); }
.cd3-tally-mod { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, transparent); }
.cd3-tally-del { color: var(--color-danger);  background: color-mix(in srgb, var(--color-danger)  10%, transparent); }

// ── Commit navigation ─────────────────────────────────────────────────────────

.cd3-nav-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  &:hover {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 5%, var(--bg-surface));
  }
}

.cd3-nav-disabled {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  opacity: 0.4;
}

.cd3-nav-dir {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cd3-nav-msg {
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cd3-nav-sha {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

.cd3-nav-all {
  font-size: 12px;
  color: var(--color-accent-link);
  text-decoration: none;
  &:hover { text-decoration: underline; }
}

// ── Sidebar ───────────────────────────────────────────────────────────────────

.cd3-side-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cd3-prov-card {
  position: relative;
  &.cd3-prov-agent { border-color: color-mix(in srgb, var(--color-accent) 35%, transparent); }
}

.cd3-prov-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-accent) 8%, transparent) 0%, transparent 65%);
  pointer-events: none;
}

.cd3-side-hd {
  border-bottom: 1px solid var(--border-subtle);
  svg { color: var(--text-muted); flex-shrink: 0; }
}

.cd3-side-title {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cd3-prov-sig-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent);
  border-radius: var(--radius-full);
  padding: 2px 7px;
  margin-left: auto;
}

.cd3-prov-identity {
  border-bottom: 1px solid var(--border-subtle);
}

.cd3-prov-agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  svg { color: var(--color-accent); }
}

.cd3-prov-model-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  align-self: flex-start;
}

.cd3-prov-human-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  svg { color: var(--text-muted); }
}

.cd3-prov-row {
  border-bottom: 1px solid var(--border-subtle);
  &:last-child { border-bottom: none; }
  &.cd3-prov-row--breaking { background: color-mix(in srgb, var(--color-danger) 6%, transparent); }
}

.cd3-prov-label {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  &.cd3-prov-label--danger { color: var(--color-danger); }
}

.cd3-prov-val {
  font-size: 12px;
  color: var(--text-secondary);
}

.cd3-prov-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd3-prov-green {
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cd3-reviewer {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 1px 7px;
}

.cd3-prov-break-item {
  font-size: 11px;
  color: var(--color-danger);
  font-family: var(--font-mono);
}

// ── Discussion ────────────────────────────────────────────────────────────────

.cd3-disc-hd { svg { color: var(--text-muted); } }

.cd3-disc-title {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.cd3-comment-input {
  width: 100%;
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-sans);
  resize: vertical;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;

  &:focus { outline: none; border-color: var(--color-accent); }
  &::placeholder { color: var(--text-muted); }
}