/* e8c.css -- commitgraaf: één achtergrond-SVG voor het venster (lanes/knopen), DOM-rijen
 * erbovenop (tekst, hover, selectie). contain:strict op elke rij -- zelfde meting als de
 * editor (.ln in e1a.css): zonder dit herstroomt een rij zijn buren en kost een layout
 * meerdere ms per rij in plaats van een fractie. */

.cg-panel {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
  font: var(--ui-fs) var(--font-ui); color: var(--text);
}

.cg-graph-wrap {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: auto;
}

.cg-svg {
  position: absolute; top: 0; left: 0; pointer-events: none;
}

.cg-list {
  list-style: none; margin: 0; padding: 0; position: relative;
}

.cg-row {
  height: var(--row-h, 22px); display: flex; align-items: center; gap: 10px;
  padding-right: 8px; cursor: pointer; white-space: nowrap;
  contain: strict;
}
.cg-row:hover { background: var(--hover); }
.cg-row.sel { background: var(--selection); color: var(--text-strong); }
.cg-row:focus-visible { outline: 1px solid var(--focus); outline-offset: -1px; }

.cg-msg {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.cg-hash {
  flex: 0 0 auto; color: var(--text-dim); font-family: var(--font-code); font-size: calc(var(--ui-fs) * 12 / 13);
}
.cg-author {
  flex: 0 0 auto; width: 120px; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-muted);
}
.cg-date {
  flex: 0 0 auto; width: 92px; text-align: right; color: var(--text-muted); font-size: calc(var(--ui-fs) * 12 / 13);
}

.cg-empty {
  padding: 16px 12px; color: var(--text-muted); white-space: normal;
}

.cg-more {
  flex: 0 0 auto; margin: 6px 8px; padding: 4px 10px;
  background: var(--surface2); color: var(--text); border: 1px solid var(--rule);
  border-radius: 3px; cursor: pointer; font: var(--ui-fs) var(--font-ui);
}
.cg-more:hover { background: var(--rule); }
.cg-more[hidden] { display: none; }

.cg-detail {
  flex: 0 0 auto; border-top: 1px solid var(--rule); padding: 10px 12px;
  max-height: 40%; overflow: auto;
}
.cg-detail[hidden] { display: none; }
.cg-d-subject { font-weight: 600; color: var(--text-strong); margin-bottom: 6px; }
.cg-d-row { display: flex; gap: 8px; padding: 2px 0; }
.cg-d-k { flex: 0 0 60px; color: var(--text-muted); }
.cg-d-v { flex: 1 1 auto; word-break: break-word; }
.cg-d-v.mono { font-family: var(--font-code); font-size: calc(var(--ui-fs) * 12 / 13); }