// ─────────────────────────────────────────────────────────────────────────────
// Page: Clones  (.cl-* layout)
// File: src/scss/pages/_clones.scss
//
// STRUCTURAL LAYOUT ONLY — zero colors, zero typography here.
// Visual rules live in components/_clones.scss.
// ─────────────────────────────────────────────────────────────────────────────

.cl-wrap { padding: 0; }

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

.cl-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;

  @media (max-width: 540px) { flex-wrap: wrap; }
}

.cl-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.75rem 1.25rem;
  flex: 1;
}

.cl-stat__val { display: block; }
.cl-stat__lbl { display: block; }

// ── File hotspots ─────────────────────────────────────────────────────────────

.cl-hotspots { margin-bottom: 1.5rem; }

.cl-hotspot-section-title {
  margin-bottom: 0.5rem;
  padding: 0 1rem;
}

.cl-hotspot-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 1fr 3.5em;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 1rem;
}

.cl-hotspot-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-hotspot-track { height: 3px; border-radius: 2px; overflow: hidden; }
.cl-hotspot-fill  { height: 100%; }
.cl-hotspot-val   { text-align: right; }

// ── Cluster list ──────────────────────────────────────────────────────────────

.cl-list { margin-bottom: 1.5rem; }

.cl-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(110px, 180px) 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  text-decoration: none;

  @media (max-width: 800px) {
    grid-template-columns: 4.5rem minmax(100px, 150px) 1fr auto;
    .cl-row__meta { display: none; }
  }

  @media (max-width: 480px) {
    grid-template-columns: 4.5rem 1fr auto;
    .cl-row__bar-wrap { display: none; }
  }
}

.cl-row__hash {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-row__bar-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cl-row__bar-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
}

.cl-row__bar-fill { height: 100%; border-radius: 2px; }
.cl-row__count    { width: 3em; text-align: right; }

.cl-row__meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

// ── Cross-file badge ──────────────────────────────────────────────────────────

.cl-cross-file {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
}

// ── Detail header ─────────────────────────────────────────────────────────────

.cl-detail-hd { margin-bottom: 1rem; }
.cl-detail-hash { }
.cl-detail-meta { }

// ── Detail chips ──────────────────────────────────────────────────────────────

.cl-detail-chips {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.cl-detail-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.7rem 1.1rem;
}

.cl-detail-chip__val { display: block; }
.cl-detail-chip__lbl { display: block; }

// ── Member list ───────────────────────────────────────────────────────────────

.cl-section-title {
  margin-bottom: 0.5rem;
  padding: 0 1rem;
}

.cl-member-list   { margin-bottom: 1.5rem; }

.cl-member-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;

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

.cl-member-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

// ── File breakdown ────────────────────────────────────────────────────────────

.cl-file-breakdown { margin-bottom: 1.5rem; }

.cl-file-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 120px 4em;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 1rem;
}

.cl-file-name  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-file-track { height: 3px; border-radius: 2px; overflow: hidden; }
.cl-file-fill  { height: 100%; }
.cl-file-count { text-align: right; }

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

.cl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 1rem;
  text-align: center;
}