// ─────────────────────────────────────────────────────────────────────────────
// Page: Commit Detail  (.cd3-* layout, .cd2-* symbol graph)
// File:      src/scss/pages/_commit-detail.scss
//
// STRUCTURAL LAYOUT ONLY — zero colors, zero typography here.
// Visual rules live in components/_commit-detail.scss.
// ─────────────────────────────────────────────────────────────────────────────

// ── Page skeleton ─────────────────────────────────────────────────────────────

.cd3-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--space-4);
  align-items: start;

  @media (max-width: 900px) { grid-template-columns: 1fr; }
}

.cd3-main    { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cd3-sidebar { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

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

.cd3-header { padding: var(--space-4) var(--space-5); }

.cd3-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.cd3-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cd3-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.cd3-subject { margin-bottom: var(--space-2); }
.cd3-body    { margin-bottom: var(--space-3); }

.cd3-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

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

.cd3-dims {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.cd3-dim-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  gap: 4px;
  min-width: 80px;
}

// ── Symbol graph ──────────────────────────────────────────────────────────────

.cd3-section-hd {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 14px;
}

.cd3-section-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.cd2-sym-graph-wrap {
  position: relative;
  height: 320px;
}

.cd2-sym-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cd2-sym-info-panel {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: var(--space-3);
  min-width: 160px;
  max-width: 220px;
}

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

.cd3-file-hd {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
}

.cd3-file-summary { margin-left: auto; }

.cd3-sym-tree {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 14px 8px;
}

.cd3-sym-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
}

.cd3-sym-child { padding-left: 16px; }

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

.cd3-file-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px 12px;
}

.cd3-fl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
}

.cd3-fl-dot {
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.cd3-tally {
  display: flex;
  gap: 5px;
  margin-left: auto;
}

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

.cd3-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
}

.cd3-nav-card,
.cd3-nav-disabled {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
}

.cd3-nav-newer { align-items: flex-end; text-align: right; }
.cd3-nav-all   { text-align: center; }

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

.cd3-side-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
}

.cd3-prov-identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px 8px;
}

.cd3-prov-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 5px 14px;
}

.cd3-prov-label {
  min-width: 60px;
  flex-shrink: 0;
  padding-top: 1px;
}

.cd3-prov-val {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

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

.cd3-discussion { margin-top: var(--space-4); }

.cd3-disc-hd {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.cd3-comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.cd3-comment-form { display: flex; flex-direction: column; }

.cd3-comment-input { padding: var(--space-3); }

.cd3-comment-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2);
}