/* 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-card { font: var(--ui-fs) var(--font-ui); color: var(--text); }
.cg-head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.cg-h { margin: 0; flex: 1; font-size: calc(var(--ui-fs) * 18 / 13); font-weight: 600; color: var(--text-strong); }
.cg-x { background: none; border: 0; color: var(--text-dim); font-size: 22px; line-height: 1; padding: 2px 6px; border-radius: var(--radius-sm); cursor: pointer; }
.cg-x:hover { background: var(--hover); color: var(--text); }
.cg-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; }
.cg-hide { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.cg-count { color: var(--text-muted); font-size: calc(var(--ui-fs) * 12 / 13); }
.cg-ticket { color: var(--accent-hi); text-decoration: underline; text-decoration-color: var(--rule); cursor: pointer; }
.cg-ticket:hover { text-decoration-color: currentColor; }
@media (max-width: 760px) { .cg-author { display: none; } .cg-date { width: 78px; } }
body.mob .cg-author { display: none; }

.cg-graph-wrap {
  position: relative; overflow-x: auto; overflow-y: hidden;
}

.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 {
  position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--rule); padding: 10px 12px;
  max-height: 40vh; 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); }