/* GitHub live (github.js): Commits, Releases und Beitragsraster im Terminal-Stil. Farben nur über die Variablen des jeweiligen Stils. */

.gh {
  --gh-cell: 12px; --gh-gap: 3px;
  margin: 1.2rem 0; padding: 0.85rem 1.1rem 0.75rem;
  background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font); font-size: 0.88rem; line-height: 1.55;
  overflow: hidden; overflow-wrap: anywhere;
}
/* Mehrere Repositorys nebeneinander: <div class="gh-list"> … </div> */
.gh-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 0.9rem; margin: 1.2rem 0; }
.gh-list > .gh { margin: 0; }
html[data-font]:not([data-font="mono"]) .gh { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.gh a { text-decoration: none; }
.gh a:hover, .gh a:focus-visible { text-decoration: underline; }

/* Kopfzeile: owner/repo  ★ 12  C++ */
.gh-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem; padding-bottom: 0.45rem; margin-bottom: 0.35rem; border-bottom: 1px dashed var(--line); }
.gh-name { font-weight: 700; }
.gh-stars { color: var(--warn, var(--muted)); white-space: nowrap; }
.gh-lang { color: var(--muted); }
.gh-lang::before { content: '● '; color: var(--accent); }

/* Befehlszeilen mit dem Prompt des Stils (%, $, PS>) */
.gh-cmd { margin-top: 0.55rem; color: var(--fg); white-space: pre-wrap; }
.gh-prompt::before { content: var(--prompt, '$'); color: var(--prompt-color, var(--accent)); font-weight: 700; margin-right: 0.6ch; }
.gh-cmd-text { font-weight: 600; }

.gh-note { color: var(--muted); padding-left: 2ch; }
.gh-err { color: var(--err, var(--muted)); }
.gh-loading::after { content: '▍'; margin-left: 0.3ch; animation: gh-blink 1s steps(1) infinite; }
@keyframes gh-blink { 50% { opacity: 0; } }
.gh-foot { padding-left: 0; margin-top: 0.7rem; font-size: 0.78rem; opacity: 0.85; }

/* git log --oneline */
.gh-log, .gh-rels { list-style: none; margin: 0.15rem 0 0; padding: 0 0 0 2ch; }
.gh-commit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 1ch; align-items: baseline; }
.gh-sha { color: var(--warn, var(--accent)); font-variant-numeric: tabular-nums; }
.gh-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-date { color: var(--muted); font-size: 0.85em; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* gh release list */
.gh-rel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1ch; }
.gh-rel-name { font-weight: 600; }
.gh-tag { color: var(--muted); }
.gh-tag::before { content: 'tag:'; opacity: 0.7; margin-right: 0.3ch; }
.gh-badge { font-size: 0.72em; line-height: 1; padding: 0.15em 0.5em; border: 1px solid currentColor; border-radius: 999px; color: var(--muted); white-space: nowrap; }
.gh-latest { color: var(--ok, var(--accent)); }
.gh-pre { color: var(--warn, var(--muted)); }

/* Beitragsraster: Spalten = Wochen (Mo oben), Zeilen = Wochentage */
.gh-graph { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: start; gap: 2px 6px; margin: 0.6rem 0 0 2ch; font-size: 0.72rem; color: var(--muted); }
.gh-months, .gh-grid { display: grid; grid-auto-flow: column; grid-auto-columns: var(--gh-cell); column-gap: var(--gh-gap); }
.gh-months span { white-space: nowrap; overflow: visible; line-height: 1.3; }
.gh-wd, .gh-grid { display: grid; grid-template-rows: repeat(7, var(--gh-cell)); row-gap: var(--gh-gap); }
.gh-wd span { line-height: var(--gh-cell); font-size: 0.9em; }
.gh-cell { display: inline-block; width: var(--gh-cell); height: var(--gh-cell); border-radius: 2px; box-sizing: border-box; }
.gh-grid .gh-cell { transition: transform 0.12s ease; }
.gh-grid .gh-cell:hover { transform: scale(1.35); outline: 1px solid var(--fg); outline-offset: 0; }

/* 5 Stufen: leer (Linienfarbe) bis volle Akzentfarbe */
.gh-l0 { background: var(--line); }
.gh-l1 { background: color-mix(in srgb, var(--accent) 30%, var(--soft)); }
.gh-l2 { background: color-mix(in srgb, var(--accent) 55%, var(--soft)); }
.gh-l3 { background: color-mix(in srgb, var(--accent) 78%, var(--soft)); }
.gh-l4 { background: var(--accent); }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .gh-l1, .gh-l2, .gh-l3 { background: var(--accent); }
  .gh-l1 { opacity: 0.35; } .gh-l2 { opacity: 0.55; } .gh-l3 { opacity: 0.78; }
}

.gh-legend { display: flex; align-items: center; gap: var(--gh-gap); margin: 0.5rem 0 0 2ch; font-size: 0.72rem; color: var(--muted); }
.gh-legend span:first-child { margin-right: 0.5ch; }
.gh-legend span:last-child { margin-left: 0.5ch; }
.gh-sum { margin: 0.5rem 0 0 2ch; }
.gh-count { color: var(--accent); font-weight: 700; }

@media (max-width: 560px) {
  .gh { padding: 0.75rem 0.8rem 0.65rem; font-size: 0.82rem; }
  .gh-commit { grid-template-columns: auto minmax(0, 1fr); }
  .gh-commit .gh-date { grid-column: 2; }
  .gh-msg { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .gh-loading::after { animation: none; }
  .gh-grid .gh-cell { transition: none; }
}
@media print {
  .gh { break-inside: avoid; }
  .gh-loading, .gh-foot { display: none; }
}