:root {
  --ink: #142033;
  --blue: #1f6feb;
  --blue-deep: #0c3f86;
  --blue-soft: #e7f0ff;
  --paper: #f3f6fb;
  --card: #ffffff;
  --line: #d5e0ee;
  --muted: #5c6b80;
  --bad: #9f2d2d;
  --ok: #146c43;
  --shadow: 0 4px 16px rgba(20, 32, 51, 0.12);
  --font: "Segoe UI", "Avenir Next", "Noto Sans", Ubuntu, Cantarell, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --fs: 14px;
  --fs-sm: 12px;
  --fs-h: 20px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --radius: 4px;
  --radius-lg: 8px;
  --control-h: 32px;
  --sidebar: 240px;
  --content: 1180px;
  --top-h: 48px;
  --graph-w: 400px;
  --graph-narrow-w: 226px;
  --graph-gap: 16px;
  --graph-ref-w: 78px;
  --graph-row: 28px;
  --graph-lane: 28px;
  --graph-msg-w: 180px;
  --graph-node: 18px;
  --graph-0: #0e7490;
  --graph-1: #6f42c1;
  --graph-2: #1f6b3a;
  --graph-3: #9d174d;
  --graph-4: #b45309;
  --graph-5: #0f766e;
  --graph-6: #7c3aed;
  --graph-7: #9a3412;
  font-family: var(--font);
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--fs); line-height: 1.5; }
a { color: var(--blue-deep); }
h1 { font-size: var(--fs-h); font-weight: 600; line-height: 1.3; margin: 0 0 var(--sp-3); }
h2 { font-size: 16px; font-weight: 600; }
.top {
  display: flex; justify-content: space-between; align-items: center;
  height: var(--top-h); padding: 0 var(--sp-4); background: var(--ink); color: white;
  position: sticky; top: 0; z-index: 40; max-width: 100%;
}
.top a { color: white; text-decoration: none; }
.brand { display: flex; gap: var(--sp-2); align-items: center; font-weight: 600; letter-spacing: 0.01em; font-size: 16px; }
.brand img { width: 28px; height: 28px; }
.top nav { display: flex; gap: var(--sp-4); align-items: center; }
.top button, .btn, button {
  background: var(--blue); color: white; border: 0; border-radius: var(--radius);
  min-height: var(--control-h); padding: 0 var(--sp-3); cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
}
.btn.ghost, button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.top button { background: transparent; border: 1px solid rgba(255,255,255,.35); color: white; }
.frame { display: flex; align-items: flex-start; min-height: calc(100vh - var(--top-h)); }
.frame.with-side .content { flex: 1; min-width: 0; }
.content { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: flex-start; container-type: inline-size; container-name: maincol; }
/* Grafiek rechts van de kolom: de kolom schuift naar links, de grafiek
   vult de ruimte tot aan de rand. Op mobiel (grafiek verborgen) blijft
   de kolom gecentreerd. */
@media (min-width: 721px) {
  .content:has(.commitgraph-slot) { justify-content: flex-start; }
}
main, main.wide {
  width: min(100%, var(--content));
  max-width: var(--content);
  min-width: 0;
  margin: 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
  container-type: inline-size;
  container-name: overview;
}
.sidenav {
  width: var(--sidebar); flex: none; position: sticky; top: var(--top-h);
  height: calc(100vh - var(--top-h)); overflow: auto;
  background: var(--card); border-right: 1px solid var(--line);
}
.sidecontext {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 56px; padding: var(--sp-3);
  border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.sidename { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidenav-links { display: flex; flex-direction: column; padding: var(--sp-2) 0; }
.sidenav-links a {
  display: flex; align-items: center; min-height: var(--control-h);
  margin: 1px var(--sp-2); padding: 0 var(--sp-3);
  border-radius: var(--radius); text-decoration: none; color: var(--ink);
  font-weight: 400; box-shadow: inset 3px 0 0 transparent;
}
.sidenav-links a.on {
  background: var(--blue-soft); color: var(--blue-deep); font-weight: 400;
  box-shadow: inset 3px 0 0 var(--blue);
}
.pagehead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); min-height: 40px; margin: 0 0 var(--sp-4);
}
.pagehead h1 {
  margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pageacts { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.pageacts .menu-panel { text-align: left; }
.hero { display: grid; grid-template-columns: 120px 1fr; gap: 1.2rem; align-items: center; }
.hero img { width: 120px; }
.card, .panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-4); margin: var(--sp-3) 0;
}
.flash { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); background: #e5f6ec; color: var(--ok); }
.flash.bad { background: #fde8e8; color: var(--bad); }
.tabs, .sub {
  display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-end;
  margin: 0 0 var(--sp-4); min-height: 40px; border-bottom: 1px solid var(--line);
}
.sub a {
  text-decoration: none; color: var(--muted); font-weight: 400;
  padding: var(--sp-2) 0; margin-bottom: -1px; border-bottom: 2px solid transparent;
}
.muted { color: var(--muted); }
.preview {
  margin: 0 0 var(--sp-2); color: var(--muted); word-break: break-all;
  min-height: 1.2rem; display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap;
}
.preview:empty { display: none; }
label { display: block; margin: 0.55rem 0; }
input[type="checkbox"], input[type="radio"], input[type="hidden"] { width: auto; min-height: 0; }
input, textarea, select {
  width: 100%; min-height: var(--control-h); padding: 4px var(--sp-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: var(--fs); background: white;
}
textarea { min-height: 7rem; }
.row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.row > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.row > select { width: auto; flex: 1 1 8rem; min-width: 0; }
.row > button, .row > .btn, .formline > button { width: auto; flex: none; }
.formline { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.formline > input { flex: 1 1 12rem; width: auto; min-width: 0; }
.formline > select { width: auto; flex: 0 1 16rem; max-width: 100%; }
button.danger { background: var(--bad); color: #fff; font-size: var(--fs-sm); min-height: 24px; padding: 0 var(--sp-2); }
table.acct { margin-top: var(--sp-3); border-collapse: separate; border-spacing: 0; }
table.acct td { overflow-wrap: anywhere; }
table.acct th:last-child,
table.acct td.act {
  position: sticky; right: 0; background: var(--card); z-index: 1;
  box-shadow: -6px 0 6px -6px rgba(20, 32, 51, 0.25);
}
table.acct td.act { width: 1%; white-space: nowrap; text-align: right; vertical-align: middle; overflow-wrap: normal; }
table.acct form { margin: 0; }
table.acct code { font-size: var(--fs-sm); }
code, pre { font-family: var(--mono); }
pre, .code {
  background: #0f1b2d; color: #e7eef8; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-lg); overflow: auto;
}
form.wh .wh-field { display: none; }
form.wh[data-preset="custom"] .for-custom,
form.wh[data-preset="generic"] .for-generic,
form.wh[data-preset="discord"] .for-discord,
form.wh[data-preset="slack"] .for-slack,
form.wh[data-preset="teams"] .for-teams,
form.wh[data-preset="mattermost"] .for-mattermost,
form.wh[data-preset="rocketchat"] .for-rocketchat,
form.wh[data-preset="telegram"] .for-telegram,
form.wh[data-preset="matrix"] .for-matrix,
form.wh[data-preset="googlechat"] .for-googlechat,
form.wh[data-preset="ntfy"] .for-ntfy,
form.wh[data-preset="gotify"] .for-gotify,
form.wh[data-preset="grok"] .for-grok { display: block; }
form.wh .wh-field .muted { display: block; margin-top: 0.25rem; }
ul.clean { list-style: none; padding: 0; }
ul.clean li { padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.pill { font-size: 0.78rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.45rem; }
table { width: 100%; border-collapse: collapse; }
.hscroll { overflow-x: auto; max-width: 100%; }
.heat, .heat-scroll { max-width: 100%; }
td, th { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: top; font-size: var(--fs); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) {
  .hero, .grid-2 { grid-template-columns: 1fr; }
  main, main.wide { padding: var(--sp-3); }
  .brand { font-size: 0; gap: 0; }
  .brand img { width: 28px; height: 28px; }
  .top { padding: 0 var(--sp-2); gap: var(--sp-2); }
  .top nav { gap: var(--sp-2); min-width: 0; overflow-x: auto; }
}
.sub a.on { border-bottom-color: var(--blue); color: var(--blue-deep); background: var(--blue-soft); font-weight: 400; }
.crumbs { color: var(--muted); margin: 0 0 var(--sp-2); min-height: 20px; font-size: var(--fs-sm); }
.crumbs a { color: var(--muted); text-decoration: none; }
.projhead { display: flex; align-items: center; gap: 0.7rem; }
.projhead h1 { margin: 0; font-size: var(--fs-h); }
.tile {
  width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center;
  background: #e56a93; color: white; font-weight: 700; font-size: 1.2rem; flex: none;
}
.tile.hue0, .avatar.hue0 { background: #c0392b; }
.tile.hue1, .avatar.hue1 { background: #d35400; }
.tile.hue2, .avatar.hue2 { background: #1f6b3a; }
.tile.hue3, .avatar.hue3 { background: #1f6feb; }
.tile.hue4, .avatar.hue4 { background: #6f42c1; }
.tile.hue5, .avatar.hue5 { background: #0e7490; }
.tile.hue6, .avatar.hue6 { background: #9a3412; }
.tile.hue7, .avatar.hue7 { background: #9d174d; }
.avatar.hue0, .avatar.hue1, .avatar.hue2, .avatar.hue3,
.avatar.hue4, .avatar.hue5, .avatar.hue6, .avatar.hue7 { color: #fff; }
.vis { width: 18px; height: 18px; color: var(--muted); }
.ficon { width: 16px; height: 16px; vertical-align: -2px; margin-right: 0.25rem; }
.proj { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.2rem; align-items: start; }
/* Als de echte kolom (na zijbalk en smalle grafiek) te smal is,
   valt Project information onder de inhoud, zodat de balk en de
   bestandstabel bruikbaar blijven. Op een brede kolom (1920) blijft
   de twee-koloms lay-out. */
@container overview (max-width: 900px) {
  .proj { grid-template-columns: minmax(0, 1fr); }
}
.toolbar { display: flex; justify-content: space-between; gap: 0.8rem; align-items: center; margin: 0.9rem 0; flex-wrap: wrap; }
.toolbar .left, .toolbar .right { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; }
.proj .toolbar { flex-wrap: nowrap; min-width: 0; }
.proj .toolbar .left { flex: 1; min-width: 0; flex-wrap: nowrap; }
.proj .toolbar .right { flex: none; flex-wrap: nowrap; }
.proj .toolbar .pathnow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj .clogpick { min-width: 0; max-width: 100%; }
.proj .clogpick select { min-width: 0; max-width: 100%; }
.branch select { width: auto; border-radius: 8px; padding: 0.35rem 0.5rem; background: #f6f8fa; }
.pathnow { color: var(--ink); }
.pathnow a { color: inherit; text-decoration: none; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu > summary::after {
  content: "";
  width: 0.4rem; height: 0.4rem; margin-left: 0.2rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.menu-panel {
  position: absolute; right: 0; top: 2.3rem; z-index: 4; width: min(420px, 80vw);
  background: white; border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem;
  box-shadow: var(--shadow);
}
.menu-panel[popover]:popover-open,
.showid form[popover]:popover-open,
.stage-pop:popover-open,
.float-tip:popover-open {
  position: fixed;
  inset: auto;
  margin: 0;
  width: max-content;
  max-width: min(420px, calc(100vw - 16px));
  height: auto;
}
.menu-panel[popover]:popover-open {
  width: min(32rem, calc(100vw - 16px));
  max-width: min(32rem, calc(100vw - 16px));
}
.copyline { display: flex; gap: 0.4rem; }
.copyline input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 0.85rem; }
.commitbar {
  display: flex; flex-wrap: wrap; gap: 0.45rem 0.7rem; align-items: center; background: #f6f8fa;
  border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.75rem; margin: 0.4rem 0 0.8rem;
}
.commitbar .grow { flex: 1 1 12rem; min-width: 0; }
.commitbar .subject { display: block; font-weight: 650; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.commitbar .grow .muted,
.commitbar .grow .commitwho {
  /* Mag over twee regels, zodat 'minutes ago' op 1920 zichtbaar
     blijft; de balk wrapt als geheel als de kolom te smal is, dus
     het geplette één-woord-per-regel gedrag komt niet terug. */
  overflow: hidden;
}
.commitbar-actions {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0.45rem 0.7rem;
  flex: 0 1 auto; min-width: 0; justify-content: flex-end; margin-left: auto;
}
.commitbar-actions .headpipe,
.commitbar-actions .sha,
.commitbar-actions .iconbtn,
.commitbar-actions .btn { flex: none; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: #d5e0ee; color: var(--ink);
  display: grid; place-items: center; font-size: 0.85rem; font-weight: 700; flex: none;
}
img.avatar, svg.avatar.ident { object-fit: cover; display: block; }
.clogref { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.35rem; }
.clogpick {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--line); border-radius: 8px; background: white;
  padding: 0 0.45rem 0 0.55rem; min-height: 32px;
}
.clogpick select {
  border: 0; background: transparent; min-height: 30px; width: auto;
  padding: 0 1.1rem 0 0; font: inherit;
}
.clogrepo { font-weight: 650; color: var(--ink); text-decoration: none; }
.clog h1 { margin: 0.15rem 0 0.75rem; font-size: 1.7rem; }
.clogsearch {
  display: flex; align-items: center; gap: 0.4rem; margin: 0 0 1rem;
  border: 1px solid var(--line); border-radius: 8px; background: white;
  min-height: 36px; padding: 0 0.55rem;
}
.clogsearch input { border: 0; flex: 1; min-height: 0; padding: 0; background: transparent; width: auto; }
.clogsearch input:focus { outline: none; }
.clogsearch:focus-within { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.clogsearch button { background: transparent; color: var(--muted); border: 0; min-height: 0; width: 28px; padding: 0; }
.cday { position: relative; margin: 0 0 0.35rem; padding-left: 1.35rem; }
.cday::before {
  content: ""; position: absolute; left: 0.22rem; top: 0.7rem; bottom: 0.2rem;
  width: 2px; background: #d8dee6;
}
.cday h2 { position: relative; margin: 0.35rem 0 0.55rem; font-size: 0.95rem; }
.cday h2::before {
  content: ""; position: absolute; left: -1.28rem; top: 0.28rem;
  width: 10px; height: 10px; border-radius: 50%; background: white;
  box-shadow: inset 0 0 0 2px #8b95a1;
}
.ccard {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem;
  background: white; border: 1px solid var(--line); border-radius: 10px;
  padding: 0.65rem 0.8rem; margin: 0 0 0.55rem;
}
.cmain { flex: 1; min-width: 0; }
.csubject { display: block; font-weight: 700; color: var(--ink); text-decoration: none; }
.csubject:hover { color: var(--blue-deep); }
.cby { margin: 0.12rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.cby a { color: inherit; }
.cacts { display: flex; align-items: center; gap: 0.3rem; flex: none; }
.cacts code { font-family: var(--mono); color: var(--muted); font-size: 0.85rem; }
a.status.markonly { padding: 0; background: transparent; min-height: 0; }
.cchev::before {
  content: ""; width: 0.38rem; height: 0.38rem;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
}
.cchev.open::before { transform: translateY(1px) rotate(225deg); }
.cmsg {
  flex-basis: 100%; margin: 0.15rem 0 0; padding-top: 0.45rem;
  border-top: 1px solid var(--line); white-space: pre-wrap;
}
.cmsg[hidden] { display: none !important; }
.clogmore { display: flex; gap: 0.6rem; margin: 0.4rem 0 0.6rem; }
.clogmore a {
  display: inline-flex; align-items: center; min-height: var(--control-h);
  padding: 0 0.8rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: white; color: var(--ink); text-decoration: none;
}
@media (max-width: 800px) {
  .cacts { width: 100%; justify-content: flex-end; }
}
.avatar.lg { width: 64px; height: 64px; font-size: 1.35rem; }
.avatar.xl { width: 96px; height: 96px; font-size: 2rem; }
a.avatarlink { display: inline-grid; color: inherit; text-decoration: none; line-height: 0; }
a.avatarlink:hover { text-decoration: none; }
.userchip, a.userchip-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  vertical-align: middle;
  line-height: 1.2;
  color: inherit;
  text-decoration: none;
  font-weight: 650;
}
a.userchip-link:hover { text-decoration: none; }
.userchip-name { line-height: 1.2; font-weight: 650; }
.userchip .avatar.sm { flex: none; }
.usercard {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.1rem; align-items: start; margin: 0.4rem 0 1.1rem;
}
.usercard h1, .usercard h2 { margin: 0; }
.usercard .handle { margin: 0.15rem 0 0.35rem; color: var(--muted); }
.usercard .bio { margin: 0.15rem 0 0.4rem; white-space: pre-wrap; }
.usercounts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.15rem; list-style: none; padding: 0; margin: 0.55rem 0 0; }
.usercounts li { display: flex; flex-direction: column; min-width: 5.5rem; }
.usercounts strong { font-size: 1.15rem; line-height: 1.2; }
.usercard-actions { display: flex; flex-direction: column; gap: 0.45rem; align-items: stretch; }
.commitwho a { color: var(--ink); font-weight: 650; text-decoration: none; }
.commitwho a:hover { text-decoration: underline; }
ul.clean li.commitline { display: flex; gap: 0.65rem; align-items: center; }
.sha { background: white; border: 1px solid var(--line); border-radius: 6px; padding: 0.15rem 0.4rem; }
table.files {
  width: 100%; table-layout: fixed; border-collapse: collapse;
  background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
table.files th { color: var(--muted); font-weight: 600; font-size: 0.92rem; }
table.files th, table.files td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.files th:nth-child(1), table.files td:nth-child(1) { width: 28%; }
table.files th:nth-child(3), table.files td:nth-child(3) { width: 8.5rem; }
table.files td:first-child a { overflow: hidden; text-overflow: ellipsis; }
table.files td.msg { max-width: none; }
table.files td.msg a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
table.tags { width: 100%; background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); border-collapse: collapse; }
table.tags th, table.tags td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: top; }
table.tags th { color: var(--muted); font-weight: 600; font-size: 0.92rem; }
table.tags td.acts { white-space: nowrap; }
table.tags td.acts a { margin-right: 0.55rem; }
.tagmsg { white-space: pre-wrap; }
.readme, .codebox, .side {
  background: white; border: 1px solid var(--line); border-radius: 12px; margin-top: 1rem;
}
.readme header, .codebox header { padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); font-weight: 600; }
.mdbody { padding: 0.2rem 1.1rem 1rem; }
.mdbody h1, .mdbody h2, .mdbody h3 { margin: 1rem 0 0.4rem; }
table.md { margin: 0.6rem 0 1rem; }
table.md th, table.md td { border: 1px solid var(--line); padding: 0.4rem 0.6rem; }
.side { margin-top: 0.2rem; padding: 0.9rem 1rem; }
.side h2 { margin: 0 0 0.5rem; font-size: 1rem; }
.counts { list-style: none; padding: 0; margin: 0.6rem 0; }
.counts li { padding: 0.28rem 0; }
.counts a { text-decoration: none; }
.fileview {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1rem; align-items: stretch;
  min-width: 0; min-height: 0;
}
body:has(main.fill) { height: 100vh; overflow: hidden; }
.frame.with-side:has(main.fill) {
  height: calc(100vh - var(--top-h));
  overflow: hidden;
  align-items: stretch;
}
.content:has(main.fill) {
  flex: 1 1 auto; align-self: stretch; min-width: 0; min-height: 0;
  overflow: hidden; align-items: stretch; justify-content: stretch;
}
main.fill {
  flex: 1 1 auto; width: 100%; max-width: none; height: 100%;
  min-width: 0; min-height: 0; box-sizing: border-box;
  display: flex; flex-direction: column; overflow: hidden;
  padding-bottom: var(--sp-3);
}
main.fill > .crumbs,
main.fill > .pagehead,
main.fill > .flash { flex: none; }
main.fill > .fileview { flex: 1 1 auto; min-height: 0; }
.treebox { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.treebox h2 { margin: 0 0 0.5rem; font-size: 1.15rem; flex: none; }
.treebox > input { flex: none; }
.treelist {
  list-style: none; padding: 0; margin: 0.5rem 0 0; position: relative;
  flex: 1 1 auto; min-height: 0; overflow: auto;
}
.treelist li { display: flex; align-items: center; gap: 0.15rem; padding: 0.18rem 0.3rem; border-radius: 6px; white-space: nowrap; }
.treelist li[hidden] { display: none !important; }
.treelist li a { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.treelist li.active { background: #ddf4ff; }
.treelist .ficon { flex: none; }
.treelist button.twist, .treelist .twistpad {
  width: 1rem; height: 1rem; flex: none;
}
.treelist button.twist {
  background: transparent; color: var(--muted); border: 0; box-shadow: none;
  min-height: 0; padding: 0; border-radius: 3px;
}
.treelist button.twist:hover { background: var(--blue-soft); color: var(--ink); }
.treelist button.twist:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.treelist .chevron { width: 0.7rem; height: 0.7rem; display: block; transition: transform 120ms ease; }
.treelist li.open > button.twist .chevron { transform: rotate(90deg); }
.treelist li.depth-1 { padding-left: 0.9rem; }
.treelist li.depth-2 { padding-left: 1.6rem; }
.treelist li.depth-3 { padding-left: 2.3rem; }
.treelist li.depth-4 { padding-left: 3rem; }
.treelist li.depth-5 { padding-left: 3.7rem; }
.treelist li.depth-6, .treelist li.depth-7, .treelist li.depth-8 { padding-left: 4.4rem; }
.filecol { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.filecol > .toolbar { flex: none; margin-top: 0; }
.filepane { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; }
.filepane:has(.codebox) { display: flex; flex-direction: column; overflow: hidden; }
.filepane:has(.codebox) > .filename,
.filepane:has(.codebox) > .commitbar { flex: none; }
.filename { display: flex; align-items: center; gap: 0.35rem; margin: 0.2rem 0 0.6rem; }
.codebox { margin-top: 0.8rem; overflow: auto; }
.fileview .codebox {
  overflow: auto; flex: 1 1 auto; min-height: 0; min-width: 0; margin-top: 0;
}
table.code { border-collapse: collapse; width: 100%; }
.fileview table.code { width: max-content; min-width: 100%; }
table.code td { border: 0; padding: 0 0.7rem; vertical-align: top; font-family: ui-monospace, monospace; font-size: 0.86rem; line-height: 1.45; }
table.code td.ln { color: #8c959f; text-align: right; width: 1%; user-select: none; background: #f6f8fa; }
.fileview table.code td.ln { position: sticky; left: 0; z-index: 1; }
table.code td.src { white-space: pre; }
.hl-k { color: #8250df; }
.hl-s { color: #cf222e; }
.hl-c { color: #6e7781; }
.hl-n { color: #0550ae; }
.heat {
  background: white; border: 1px solid var(--line); border-radius: 16px;
  padding: 1rem 1.1rem 0.8rem; box-shadow: var(--shadow); margin: 0.4rem 0 1.1rem;
}
.heat h2 { margin: 0 0 0.55rem; font-size: 1.05rem; }
.heat-scroll { overflow-x: auto; padding: 1.7rem 0.2rem 0.15rem; }
.heat-months, .heat-cols {
  display: grid; grid-auto-flow: column; grid-auto-columns: 11px; column-gap: 3px;
}
.heat-months { margin: 0 0 0.25rem 20px; height: 1rem; font-size: 0.68rem; color: var(--muted); }
.heat-months span { white-space: nowrap; line-height: 1rem; }
.heat-body { display: flex; gap: 4px; }
.heat-dow {
  display: grid; grid-template-rows: repeat(7, 11px); row-gap: 3px;
  width: 16px; font-size: 0.65rem; color: var(--muted); line-height: 11px;
}
.heat-col { display: grid; grid-auto-rows: 11px; row-gap: 3px; }
.sq { width: 11px; height: 11px; border-radius: 2px; display: block; position: relative; }
.sq.off { background: transparent; }
.sq.lv0 { background: #e6edf5; }
.sq.lv1 { background: #b9d4f6; }
.sq.lv2 { background: #6eacf0; }
.sq.lv3 { background: #1f6feb; }
.sq.lv4 { background: #0c3f86; }
.heat-foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  margin-top: 0.7rem; color: var(--muted); font-size: 0.85rem;
}
.heat-total, .heat-legend, .heat-foot .muted { margin: 0; }
.heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.heat-foot .muted { text-align: right; margin-top: 0.2rem; }
.chooser { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.2rem 0 0.4rem; transition: opacity .28s ease, transform .28s ease; }
.chooser.away { opacity: 0; transform: translateY(-10px) scale(.97); pointer-events: none; }
.pick { min-width: 11rem; padding: 1rem 1.3rem; font-size: 1.05rem; }
.sheet { transform-origin: top center; }
.sheet.open { animation: unfold .32s ease; }
.sheet.closing { animation: fold .28s ease forwards; }
@keyframes unfold {
  from { opacity: 0; transform: scaleY(.55); }
  to { opacity: 1; transform: scaleY(1); }
}
@keyframes fold {
  from { opacity: 1; transform: scaleY(1); }
  to { opacity: 0; transform: scaleY(.45); }
}
.flag.ok { color: var(--ok); font-weight: 600; }
.flag.bad { color: var(--bad); font-weight: 600; }
.form-err:empty { display: none; }
.form-err { color: var(--bad); margin: 0.2rem 0; }
.bar { display: flex; gap: .6rem; align-items: center; margin: .4rem 0 .2rem; }
.bar input[type="search"] { flex: 1; }
.sortlabel { color: var(--muted); }
.iconbtn, .copyline button {
  text-decoration: none; background: white; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  min-height: var(--control-h); padding: 0 var(--sp-2); cursor: pointer; font: inherit;
}
.repolist { list-style: none; padding: 0; margin: .4rem 0 1rem; }
.repolist > li { display: flex; align-items: center; gap: .7rem; padding: .75rem .2rem; border-bottom: 1px solid var(--line); }
.repolist .tile, .repolist .avatar { width: 32px; height: 32px; font-size: .9rem; }
.repolist form { margin: 0; }
.picklist { border: 1px solid var(--line); border-radius: 10px; margin: .35rem 0 .8rem; padding: .35rem; }
.picklist legend { padding: 0 .25rem; color: var(--muted); font-size: var(--fs-sm); }
.picklist label, label.pickrow { display: flex; align-items: center; gap: .55rem; padding: .35rem .45rem; border-radius: 8px; cursor: pointer; }
.picklist label:has(input:checked) { background: #eef4ff; }
.picklist input, label.pickrow input { margin: 0; }
.picklist .tile, .picklist .avatar, label.pickrow .avatar { width: 24px; height: 24px; font-size: .75rem; }
.reponame { font-weight: 600; text-decoration: none; }
.stars { color: #9a6700; white-space: nowrap; }
.grown { flex: 1; }
.rowmenu { position: relative; }
.rowmenu > summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; padding: .15rem .55rem; background: white; }
.rowmenu > summary::-webkit-details-marker { display: none; }
.rowmenu .menu-panel { position: absolute; right: 0; z-index: 3; min-width: 9rem; }
.rowmenu .menu-panel button, .rowmenu .menu-panel form { width: 100%; }
.rowmenu .menu-panel button { text-align: left; border-radius: 8px; }
details.piperetry { display: inline-block; vertical-align: middle; flex: none; }
.stagecell { display: flex; align-items: center; gap: .45rem; }
.pipehead { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.menu-panel.piperetry { min-width: 14rem; padding: .3rem; }
.menu-panel.piperetry[popover]:popover-open {
  width: max-content;
  min-width: 14rem;
  max-width: min(18rem, calc(100vw - 16px));
  padding: .3rem;
}
.menu-panel.piperetry form { margin: 0; }
.menu-panel.piperetry form[hidden] { display: none !important; }
.menu-panel.piperetry button {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  border-radius: 8px; padding: .45rem .6rem; cursor: pointer; font: inherit; color: inherit;
  white-space: nowrap;
}
.menu-panel.piperetry button:hover { background: #f3f6fb; }
img.tile { object-fit: cover; background: #fff; }
@font-face {
  font-family: "Noto Sans Cuneiform";
  src: url("/assets/NotoSansCuneiform-Regular.ttf") format("truetype");
  font-display: swap;
}
html.cunei, html.cunei body, html.cunei button, html.cunei input, html.cunei select, html.cunei textarea {
  font-family: "Noto Sans Cuneiform", "Segoe UI", sans-serif;
}
.applybar {
  position: sticky; top: 0; z-index: 6; display: flex; justify-content: flex-end;
  padding: 0.45rem 0; background: rgba(243, 246, 251, 0.94);
}
.applybar[hidden] { display: none; }
.sugmodal {
  border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem;
  width: min(32rem, 92vw); box-shadow: var(--shadow);
}
.sugmodal::backdrop { background: rgba(20, 32, 51, 0.45); }
.sugmodal h2 { margin: 0 0 0.4rem; }
.diff {
  background: white; border: 1px solid var(--line); border-radius: 12px;
  overflow: auto; user-select: none; margin: 0.4rem 0 1rem;
}
.difffile + .difffile { border-top: 1px solid var(--line); }
.difffile header {
  padding: 0.5rem 0.75rem; background: #f6f8fa; border-bottom: 1px solid var(--line); font-weight: 650;
}
.diffline {
  position: relative; display: grid; grid-template-columns: 16px 3.2rem minmax(0, 1fr);
  font-family: ui-monospace, monospace; font-size: 0.84rem; line-height: 1.5;
}
.diffline code { white-space: pre; padding: 0 0.7rem 0 0.35rem; }
.diffline .ln { color: #8c959f; text-align: right; padding-right: 0.45rem; }
.gutter { background: #eef2f7; cursor: ns-resize; }
.gutter.off { background: transparent; cursor: default; }
.kind-add { background: #e6ffec; }
.kind-del { background: #ffebe9; }
.kind-hunk { color: #8c959f; background: #f6f8fa; }
.diffline.picked { box-shadow: inset 3px 0 0 var(--blue); }
.diffline.picked .gutter { background: #bfdbfe; }
.linenote, .lineform {
  margin: 0.35rem 0.6rem 0.55rem 2.6rem; background: #f6f8fa;
  border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.7rem;
}
.linenote pre.note, ul.clean pre.note {
  background: white; color: var(--ink); border: 1px solid var(--line); margin: 0.35rem 0;
}
label.sugcheck { display: flex; align-items: center; gap: 0.45rem; }
label.sugcheck input { width: auto; }
.bubble {
  position: absolute; left: 18px; top: 0.15rem; z-index: 3;
  width: 28px; height: 28px; padding: 0; border-radius: 8px;
  background: white; border: 1px solid var(--line); box-shadow: var(--shadow);
}
.bubble-icon {
  width: 14px; height: 10px; border: 2px solid var(--blue); border-radius: 7px;
  display: inline-block; position: relative; background: white;
}
.bubble-icon::after {
  content: ""; position: absolute; left: 2px; bottom: -6px;
  border-width: 6px 5px 0 0; border-style: solid;
  border-color: var(--blue) transparent transparent transparent;
}
.pipebar { display: flex; justify-content: space-between; gap: 0.8rem; align-items: center; margin: 0.4rem 0 1rem; }
.pipe-filter {
  display: flex; align-items: stretch; flex: 1; max-width: 42rem;
  border: 1px solid var(--line); border-radius: 8px; background: white; overflow: hidden;
}
.pipe-filter input { border: 0; border-radius: 0; width: 100%; }
.pipe-filter button.iconbtn {
  width: 2.6rem; border: 0; border-left: 1px solid var(--line); border-radius: 0;
  background: white; color: var(--ink); padding: 0;
}
.showid { position: relative; }
.showid summary {
  list-style: none; cursor: pointer; background: white; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.45rem 0.75rem;
}
.showid summary::-webkit-details-marker { display: none; }
.showid summary::after { content: "▾"; margin-left: 0.45rem; color: var(--muted); }
.showid form {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 6;
  display: flex; gap: 0.4rem; width: 18rem; padding: 0.6rem;
  background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.showid form[popover]:not(:popover-open) { display: none; }
.showid form[popover]:popover-open { display: flex; width: min(18rem, calc(100vw - 16px)); }
.showid form input { width: auto; flex: 1; }
table.pipes td { padding: var(--sp-2) var(--sp-3); }
table.pipes .pipeid { font-weight: 700; }
.ellip { display: block; max-width: 28rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chips { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; margin-top: 0.28rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.15rem;
  background: #eef2f7; color: var(--ink); text-decoration: none;
  border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.78rem;
}
.when { display: flex; align-items: center; gap: 0.3rem; color: var(--muted); font-size: 0.82rem; margin-top: 0.18rem; }
svg.ico { width: 14px; height: 14px; flex: none; }
.avatar.sm { width: 20px; height: 20px; font-size: 0.68rem; }
.status {
  display: inline-flex; align-items: center; gap: 0.32rem;
  border-radius: 999px; padding: 0.12rem 0.55rem 0.12rem 0.28rem;
  font-weight: 650; font-size: 0.84rem; background: #eef2f7; color: var(--ink);
}
.status.passed { background: #e5f6ec; color: #146c43; }
.status.failed { background: #fde8e8; color: #9f2d2d; }
.status.warning { background: #fff4e0; color: #8a5a00; }
.status.running { background: #e7f0ff; color: #1f6feb; }
.status.canceled { background: #f3f0f0; color: #57606a; }
.status.obsolete { background: #f4f5f7; color: #8c959f; font-weight: 600; }
.status.blocked { background: #eef2f7; color: #57606a; }
.hooktable.inherited tr.overridden td { color: #8c959f; }
.mark { position: relative; width: 16px; height: 16px; border-radius: 50%; display: inline-block; flex: none; background: #8c959f; }
.status.passed .mark, .stage-dot.passed .mark { background: #1aaa55; }
.status.failed .mark, .stage-dot.failed .mark { background: #dd2b0e; }
.status.warning .mark, .stage-dot.warning .mark { background: #c17d10; }
.status.running .mark, .stage-dot.running .mark { background: #1f75cb; }
.status.canceled .mark, .stage-dot.canceled .mark { background: #8c959f; }
.status.blocked .mark, .stage-dot.blocked .mark { background: #57606a; }
.blocked .mark::before, .blocked .mark::after {
  content: ""; position: absolute; top: 4px; width: 2px; height: 8px; background: #fff;
}
.blocked .mark::before { left: 5px; }
.blocked .mark::after { left: 9px; }
.status.obsolete .mark, .stage-dot.obsolete .mark { background: transparent; box-shadow: inset 0 0 0 2px #afb8c1; }
.obsolete .mark::after {
  content: ""; position: absolute; left: 3px; top: 7px; width: 10px; height: 2px; background: #afb8c1; transform: rotate(-45deg);
}
.passed .mark::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.failed .mark::before, .failed .mark::after {
  content: ""; position: absolute; left: 3px; top: 7px; width: 10px; height: 2px; background: #fff;
}
.failed .mark::before { transform: rotate(45deg); }
.failed .mark::after { transform: rotate(-45deg); }
.warning .mark::before {
  content: ""; position: absolute; left: 7px; top: 3px; width: 2px; height: 6px; background: #fff;
}
.warning .mark::after {
  content: ""; position: absolute; left: 7px; top: 11px; width: 2px; height: 2px; background: #fff;
}
.skipped .mark::after, .canceled .mark::after {
  content: ""; position: absolute; left: 4px; top: 7px; width: 8px; height: 2px; background: #fff;
}
.status.pending .mark, .status.created .mark, .status.waiting_for_update .mark, .status.waiting_for_job .mark,
.stage-dot.pending .mark, .stage-dot.created .mark {
  background: transparent;
  box-shadow: inset 0 0 0 2px #8c959f;
}
.running .mark::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 10px; height: 10px;
  border: 2px solid #fff; border-radius: 50%; border-right-color: transparent; box-sizing: border-box;
  animation: spin 0.8s linear infinite;
}
.stage-dot.sm.running .mark::after { left: 2px; top: 2px; width: 8px; height: 8px; }
@keyframes spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .running .mark::after { animation: none; }
}
.commitbar a.status { flex: none; text-decoration: none; }
.headpipe { display: flex; align-items: center; gap: 0.45rem; flex: none; }
.headpipe [data-pipe-duration] { font-variant-numeric: tabular-nums; }
.stages { display: flex; align-items: center; }
.mrpipe { display: flex; align-items: center; gap: 0.8rem; margin: 0.2rem 0 1rem; }
.danger-modal {
  border: 6px solid #a31212;
  background: #fde8e8;
  color: #6d1212;
  width: min(92vw, 52rem);
  padding: 2.2rem 2rem;
  border-radius: 16px;
}
.danger-modal::backdrop { background: rgba(80, 8, 8, 0.55); }
.danger-modal p { font-size: 1.7rem; line-height: 1.45; margin: 0 0 1.2rem; }
.danger-modal [data-transfer-submit], .danger-modal [data-tag-submit] { background: #a31212; color: #fff; }
.danger-modal [data-transfer-submit]:disabled { opacity: 0.45; }
.stage { position: relative; display: flex; align-items: center; }
.stage + .stage::before { content: ""; width: 14px; height: 2px; background: #c5d0dc; margin: 0 2px; }
button.stage-dot {
  width: 26px; height: 26px; min-height: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; display: grid; place-items: center; position: relative;
}
.stage.open button.stage-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1f75cb; }
.float-tip {
  border: 0; padding: 0.28rem 0.5rem; border-radius: 6px;
  background: #24292f; color: white; font-size: 0.75rem; font-weight: 600;
  line-height: 1.2; white-space: nowrap; pointer-events: none;
}
.float-tip.heat { background: #142033; font-size: 0.78rem; font-weight: 400; }
.stage-pop {
  min-width: min(220px, calc(100vw - 16px));
  background: white; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); padding: 0.7rem 0.85rem;
}
.stage-pop ul { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.stage-pop a, .related a { display: flex; align-items: center; gap: 0.4rem; text-decoration: none; padding: 0.22rem 0; color: var(--ink); }
.queue { color: var(--muted); font-weight: 500; }
.stage-dot.sm { width: 16px; height: 16px; display: inline-grid; place-items: center; }
.stage-dot.sm .mark { width: 14px; height: 14px; }
.stage-dot.sm.passed .mark::after { left: 4px; top: 2px; width: 3px; height: 6px; }
.jobhead { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.joblayout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1rem; align-items: start; }
.console-wrap { border: 1px solid #2a2a2a; border-radius: 8px; overflow: hidden; background: #1e1e1e; }
.conbar {
  display: flex; justify-content: space-between; gap: 0.6rem; align-items: center; flex-wrap: wrap;
  background: #f6f8fa; padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--line);
}
.conbar .pipe-filter { max-width: none; flex: 1; min-width: 12rem; }
.contools { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
.contools .ghost, .contools a.ghost { padding: 0.3rem 0.55rem; background: white; }
.console {
  color: #e6edf3; font-family: ui-monospace, monospace; font-size: 0.82rem;
  max-height: 68vh; overflow-x: hidden; overflow-y: auto; padding: 0.35rem 0 0.8rem;
}
.console.nowrap { overflow-x: auto; }
.console code { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.console.nowrap code { white-space: pre; overflow-wrap: normal; }
.ansi-bold { font-weight: 700; }
.ansi-dim { opacity: 0.65; }
.ansi-italic { font-style: italic; }
.ansi-underline { text-decoration: underline; }
.ansi-fg-black { color: #6e7681; }
.ansi-fg-red { color: #ff7b72; }
.ansi-fg-green { color: #3fb950; }
.ansi-fg-yellow { color: #d29922; }
.ansi-fg-blue { color: #79c0ff; }
.ansi-fg-magenta { color: #d2a8ff; }
.ansi-fg-cyan { color: #56d4dd; }
.ansi-fg-white { color: #f0f6fc; }
.ansi-fg-bright-black { color: #8b949e; }
.ansi-fg-bright-red { color: #ffa198; }
.ansi-fg-bright-green { color: #56d364; }
.ansi-fg-bright-yellow { color: #e3b341; }
.ansi-fg-bright-blue { color: #a5d6ff; }
.ansi-fg-bright-magenta { color: #e2c5ff; }
.ansi-fg-bright-cyan { color: #7ee7ef; }
.ansi-fg-bright-white { color: #ffffff; }
.ansi-bg-black { background: #1c2128; }
.ansi-bg-red { background: #6e2b29; }
.ansi-bg-green { background: #1f4d32; }
.ansi-bg-yellow { background: #5c4a1f; }
.ansi-bg-blue { background: #1f3b5c; }
.ansi-bg-magenta { background: #4a2d5c; }
.ansi-bg-cyan { background: #1c4a4e; }
.ansi-bg-white { background: #d0d7de; color: #1c2128; }
.ansi-bg-bright-black { background: #2d333b; }
.ansi-bg-bright-red { background: #8a3834; }
.ansi-bg-bright-green { background: #2a6b3c; }
.ansi-bg-bright-yellow { background: #7a641f; }
.ansi-bg-bright-blue { background: #2a5580; }
.ansi-bg-bright-magenta { background: #684080; }
.ansi-bg-bright-cyan { background: #2a666c; }
.ansi-bg-bright-white { background: #f0f6fc; color: #1c2128; }
.lognote { margin: 0.2rem 0.8rem 0.45rem; color: #8b949e; font-family: inherit; }
.logline, .logsec ol li {
  display: grid; grid-template-columns: 3rem 5.4rem minmax(0, 1fr);
  gap: 0.45rem; padding: 0 0.7rem; line-height: 1.45; min-width: 0;
}
.logsec ol { list-style: none; margin: 0; padding: 0; display: none; }
.logsec.open ol { display: block; }
.ln, .ts { color: #8b949e; }
.ln { text-align: right; }
.logline.hit, .logsec li.hit { background: #3d3416; }
.logline.hit.on, .logsec li.hit.on { background: #6b5710; }
button.section-toggle {
  position: sticky; left: 0; z-index: 2; box-sizing: border-box;
  width: 100%; max-width: 100%;
  min-height: 0; background: #1e1e1e; color: #9ecbff; border: 0; border-radius: 0;
  display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.7rem; text-align: left; font-weight: 650;
}
.section-toggle .sectitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-toggle .pill { flex: none; margin-left: auto; background: #2d333b; color: #d0d7de; border-color: #444c56; }
.contools .ghost[aria-pressed="true"] { background: var(--blue-soft); color: var(--blue-deep); border-color: var(--blue); }
.chev {
  width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 6px solid currentColor; display: inline-block;
}
.logsec.open .chev { transform: rotate(90deg); }
.console-wrap:fullscreen { display: flex; flex-direction: column; background: #111; border-radius: 0; }
.console-wrap:fullscreen .console { max-height: none; flex: 1; }
.console-wrap.full { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; border-radius: 0; }
.console-wrap.full .console { max-height: none; flex: 1; }
.jobside {
  background: white; border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 1rem;
}
.jobside dt { color: var(--muted); font-size: 0.78rem; margin-top: 0.7rem; }
.jobside dd { margin: 0.12rem 0 0; }
.jobside h2 { font-size: 0.95rem; margin: 0.9rem 0 0.3rem; }
.related { list-style: none; margin: 0; padding: 0; }
.related li { display: flex; align-items: center; gap: 0.3rem; }
.related li[hidden] { display: none !important; }
.related .arrow { width: 1rem; color: var(--muted); }
.editorhead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.7rem; }
.editorhead h2 { margin: 0; font-size: 1.15rem; }
.editorhead .status { margin: 0; }
.ciedit {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: white;
}
.ci-gutter {
  overflow: hidden; background: #f6f8fa; color: #8c959f; text-align: right;
  font-family: ui-monospace, monospace; font-size: 0.86rem; line-height: 1.45;
  padding: 0.55rem 0.45rem; user-select: none;
}
.ci-gutter span { display: block; }
.ci-gutter span.bad { background: #fde8e8; color: var(--bad); font-weight: 700; }
.ci-stage { position: relative; display: grid; align-items: stretch; }
.ci-back, .ciedit textarea {
  grid-area: 1 / 1;
  font-family: ui-monospace, monospace; font-size: 0.86rem; line-height: 1.45;
  padding: 0.55rem 0.7rem; margin: 0; white-space: pre; tab-size: 2;
}
.ci-back { position: relative; overflow: hidden; color: var(--ink); pointer-events: none; }
.codeline { min-height: 1.45em; }
.codeline.bad { background: #fff5f5; }
.ciedit textarea {
  position: relative; width: 100%; height: auto; align-self: stretch; border: 0; border-radius: 0;
  background: transparent; color: transparent; caret-color: var(--ink); resize: none; overflow: auto;
}
.ciedit textarea::selection { background: rgba(31, 111, 235, 0.25); }
.ci-issues { list-style: none; padding: 0; margin: 0.7rem 0 0; }
.ci-issues li.bad { color: var(--bad); }
.ci-issues li.warn { color: #8a5a00; }
.hero h1 { font-size: 32px; }
.mdbody h1 { font-size: 24px; }
.sidecontext .tile { width: 32px; height: 32px; font-size: 1rem; }
.filename { font-size: 16px; font-weight: 600; }
@media (max-width: 960px) {
  .frame.with-side { flex-direction: column; align-items: stretch; }
  .sidenav, .content { width: 100%; max-width: 100%; min-width: 0; }
  .sidenav {
    position: sticky; top: var(--top-h); height: auto;
    border-right: 0; border-bottom: 1px solid var(--line); z-index: 20;
  }
  .sidenav-links {
    flex-direction: row; overflow-x: auto; min-width: 0; padding: 0 var(--sp-2);
    scrollbar-width: none;
  }
  .sidenav-links::-webkit-scrollbar { display: none; }
  .sidenav-links a {
    flex: none; white-space: nowrap; margin: 0; border-radius: 0;
    box-shadow: inset 0 -2px 0 transparent; padding: var(--sp-2) var(--sp-3);
  }
  .sidenav-links a.on { background: transparent; font-weight: 400; box-shadow: inset 0 -2px 0 var(--blue); }
}
.spec h2 { scroll-margin-top: calc(var(--top-h) + 12px); margin: 1.6rem 0 0.6rem; }
.spec .lead { margin-top: 0; }
.spec-example {
  background: #142033; color: #e7f0ff; border-radius: var(--radius-lg);
  padding: 0.85rem 1rem; overflow: auto; font-family: var(--mono); font-size: 0.88rem;
  line-height: 1.45;
}
.spec-table { width: 100%; border-collapse: collapse; background: var(--card); }
.spec-table th, .spec-table td {
  border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
  padding: 0.45rem 0.7rem;
}
.spec-table th { font-size: var(--fs-sm); color: var(--muted); font-weight: 650; }
.spec-table code { font-family: var(--mono); font-size: 0.92em; }
.spec-list { margin: 0.2rem 0 0; padding-left: 1.2rem; }
.spec-list li { margin: 0.35rem 0; }
main.wide:has(.commitpage) { width: min(100%, 1440px); max-width: 1440px; }
.commithead h1 { white-space: normal; overflow-wrap: anywhere; }
pre.commitmsg {
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 var(--sp-3);
}
.commitmeta { margin-top: 0; }
.commitfacts { display: grid; gap: 0.55rem; margin: 0.9rem 0 0; }
.commitfacts div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.7rem; align-items: center; }
.commitfacts dt, .commitfacts dd { margin: 0; }
.commitfacts dt { color: var(--muted); }
.commitfacts code.sha { word-break: break-all; }
.commitfacts .parents { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.commitfacts a.status { text-decoration: none; width: fit-content; }
.diffbar { margin-top: 0; }
.diffswitch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; flex: none; }
.diffswitch button { background: white; color: var(--ink); border: 0; border-radius: 0; min-width: 7.5rem; }
.diffswitch button + button { border-left: 1px solid var(--line); }
.commitdiff[data-mode="inline"] [data-diff-mode="inline"],
.commitdiff[data-mode="side"] [data-diff-mode="side"] { background: var(--blue-soft); color: var(--blue-deep); }
.commitlayout { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.commitfiles {
  position: sticky; top: calc(var(--top-h) + 8px); max-height: calc(100vh - var(--top-h) - 16px);
  overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 0.7rem 0.75rem;
}
.commitfiles h2 { margin: 0 0 0.4rem; font-size: var(--fs-sm); color: var(--muted); }
.commitfiles ul { list-style: none; margin: 0; padding: 0; }
.commitfiles li {
  display: flex; align-items: center; gap: 0.35rem; min-height: 1.7rem;
  font-variant-numeric: tabular-nums;
}
.commitfiles li.d1 { padding-left: 0.9rem; }
.commitfiles li.d2 { padding-left: 1.8rem; }
.commitfiles li.d3 { padding-left: 2.7rem; }
.commitfiles li.d4 { padding-left: 3.6rem; }
.commitfiles li.d5 { padding-left: 4.5rem; }
.commitfiles li.d6 { padding-left: 5.4rem; }
.commitfiles li.d7 { padding-left: 6.3rem; }
.commitfiles li.d8 { padding-left: 7.2rem; }
.commitfiles a { display: inline-flex; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.commitfiles .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addstat { color: var(--ok); font-variant-numeric: tabular-nums; }
.delstat { color: var(--bad); font-variant-numeric: tabular-nums; }
.commitdiffs { min-width: 0; }
.commitfile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  margin: 0 0 0.8rem; scroll-margin-top: calc(var(--top-h) + 12px); min-width: 0;
}
.commitfile > header {
  display: flex; align-items: center; gap: 0.5rem; min-height: 44px;
  padding: 0.35rem 0.7rem; background: #f6f8fa; border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; position: sticky; top: var(--top-h); z-index: 2;
}
.commitfile > header .path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commitfile > header .oldpath { color: var(--muted); text-decoration: line-through; }
.commitfile > header .counts { flex: none; }
.commitfile > header button[data-toggle-diff] { flex: none; min-width: 7.5rem; }
.commitfile[data-collapsed="1"] > header { border-bottom: 0; border-radius: var(--radius-lg); }
.commitfile[data-collapsed="1"] .diffbody { display: none; }
.commitdiff[data-mode="inline"] .split { display: none; }
.commitdiff[data-mode="side"] .unified { display: none; }
.commitline, .half {
  display: grid; grid-template-columns: 3.2rem 3.2rem minmax(0, 1fr);
  font-family: var(--mono); font-size: 0.84rem; line-height: 1.45; min-width: 0;
}
.half { grid-template-columns: 3.2rem minmax(0, 1fr); }
.commitline code, .half code {
  display: block; white-space: pre; overflow-x: auto; min-width: 0;
  padding: 0 0.7rem; font-family: inherit;
}
.commitline .ln, .half .ln { color: #8c959f; text-align: right; padding: 0 0.45rem; user-select: none; }
.commitline.kind-add, .half.kind-add { background: #e6ffec; }
.commitline.kind-del, .half.kind-del { background: #ffebe9; }
.commitline.kind-hunk { grid-template-columns: minmax(0, 1fr); color: #8c959f; background: #f6f8fa; }
.half.kind-empty { background: #f6f8fa; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pair .half + .half { border-left: 1px solid var(--line); }
.binaryhint { margin: 0; padding: 0.8rem 0.9rem; }
a.btn { text-decoration: none; }
.branchsearch { display: block; margin: 0 0 0.8rem; }
.branchsearch input { width: min(100%, 24rem); }
.branchtable { width: 100%; border-collapse: collapse; background: var(--card); }
.branchtable th, .branchtable td {
  border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle;
  padding: 0.45rem 0.7rem; height: 3rem;
}
.branchtable th { font-size: var(--fs-sm); color: var(--muted); font-weight: 650; }
.branchtable .nums, .branchtable .addstat, .branchtable .delstat { font-variant-numeric: tabular-nums; white-space: nowrap; }
.branchacts { white-space: nowrap; width: 1%; }
.branchline { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 0.3rem; }
.branchline .tiny, .tiny-menu > summary {
  min-height: 1.7rem; padding: 0 0.45rem; font-size: var(--fs-sm);
  background: white; color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; line-height: 1.2;
}
.tiny-menu > summary { display: inline-flex; align-items: center; }
.mrlinks { white-space: nowrap; }
.mrlinks a + a { margin-left: 0.35rem; }
.branchtable .subject {
  display: inline-block; max-width: 16rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.when-short { white-space: nowrap; }
.refhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-3);
}
.refhead h1 { margin: 0; }
.refhead > button { margin-left: auto; }
.reftabs { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-end; min-width: 0; border-bottom: 1px solid var(--line); }
.reftabs a {
  text-decoration: none; color: var(--muted); font-weight: 500;
  padding: 0.45rem 0; margin-bottom: -1px; border-bottom: 2px solid transparent;
}
.reftabs a.on { color: var(--ink); border-bottom-color: var(--ink); }
.refsearch {
  display: flex; align-items: center; gap: 0.4rem; margin: 0 0 var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius); background: white;
  min-height: var(--control-h); padding: 0 0.55rem;
}
.refsearch input { border: 0; min-height: 0; padding: 0; background: transparent; flex: 1; width: auto; }
.refsearch input:focus { outline: none; }
.refsearch:focus-within { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.refsearch button.refgo {
  background: transparent; color: var(--muted); border: 0; min-height: 0; width: 28px; padding: 0;
}
.refgroup {
  background: #f4f1f8; border: 1px solid #e4dfeb; border-radius: var(--radius-lg);
  padding: 0.35rem 0.85rem 0.7rem; margin: 0 0 var(--sp-4);
}
.refgroup h2 { margin: 0.55rem 0.2rem; font-size: 0.95rem; }
.refrow {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  background: white; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 0.7rem 0.85rem; margin: 0.45rem 0;
}
.refrow[hidden], .refgroup[hidden] { display: none !important; }
.refmain { min-width: 0; }
.refname { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.refname a { color: var(--ink); text-decoration: none; font-weight: 650; }
.refname code, .refname a code { font-family: var(--mono); font-size: 0.95rem; }
.refcopy { min-height: 24px; width: 24px; padding: 0; }
.refbadge { text-transform: lowercase; background: #eef1f4; color: #57606a; border-color: transparent; }
.refbadge.def { background: var(--blue-soft); color: var(--blue-deep); }
.refmeta {
  margin: 0.28rem 0 0; color: var(--muted); font-size: var(--fs-sm);
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.55rem; align-items: center;
}
.refmeta a { color: inherit; }
.refdot { color: var(--muted); }
.refsubject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36rem; }
.refnote { margin: 0.35rem 0 0; white-space: pre-wrap; }
.refacts { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.refacts .tiny {
  min-height: 1.7rem; padding: 0 0.45rem; font-size: var(--fs-sm);
  background: white; color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; line-height: 1.2;
}
.refacts .rowmenu > summary { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; }
.refdlbtn::after {
  content: ""; width: 0.32rem; height: 0.32rem; margin-left: 0.2rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
}
.menu-panel.refdl a { display: block; padding: 0.4rem 0.15rem; text-decoration: none; color: var(--ink); white-space: nowrap; }
.menu-panel.refdl[popover]:popover-open { width: max-content; min-width: 8.5rem; max-width: 14rem; padding: 0.35rem 0.9rem; }
.rowmenu .menu-panel a { display: block; padding: 0.35rem 0.2rem; text-decoration: none; color: var(--ink); }
.refempty { margin: 0.4rem 0.2rem 0.6rem; }
@media (max-width: 800px) {
  .refrow { flex-direction: column; }
  .refacts { flex-wrap: wrap; }
  .refsubject { max-width: 100%; }
}
.mergewhy {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.7rem 0.9rem; margin: 0.6rem 0; background: #fff8f0;
}
.mergewhy p { margin: 0; font-weight: 650; }
.mergewhy ul { margin: 0.35rem 0 0; }
.force-merge { margin: 0.4rem 0 1rem; }
.force-merge .check { display: flex; gap: 0.4rem; align-items: center; margin: 0.4rem 0; }
.branch-dialog {
  border: 0; border-radius: var(--radius-lg); padding: 1.2rem 1.3rem;
  max-width: 32rem; width: calc(100% - 2rem);
}
.branch-dialog::backdrop { background: rgba(8, 16, 32, 0.45); }
.branch-dialog p { min-height: 1.5rem; }
.mdbox { margin: 0 0 0.8rem; }
.mdtabs { display: flex; min-height: 2.4rem; }
.mdtabs button { background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 0; }
.mdtabs button + button { border-left: 0; }
.mdtabs button[aria-selected="true"] { background: var(--blue-soft); color: var(--blue-deep); }
.mdbox [data-md-write] textarea,
.mdbox [data-md-preview] {
  display: block; width: 100%; height: 9rem; min-height: 9rem; max-height: 9rem;
  overflow: auto; box-sizing: border-box; margin: 0;
}
.fieldlabel { margin: 0.6rem 0 0.3rem; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li {
  border-left: 2px solid var(--line); margin: 0 0 0 0.4rem; padding: 0.35rem 0 0.8rem 0.9rem;
  min-height: 2.4rem;
}
.timeline .pushlist, .reply {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.45rem 0.7rem; margin: 0.35rem 0;
}
.commitline.with-gutter { grid-template-columns: 16px 3.2rem 3.2rem minmax(0, 1fr); }
.commitline.with-gutter.kind-hunk { grid-template-columns: minmax(0, 1fr); }
.commitline.picked { box-shadow: inset 3px 0 0 var(--blue); }
tr[hidden] { display: none; }
@media (max-width: 900px) {
  .commitlayout { grid-template-columns: minmax(0, 1fr); }
  .commitfiles { position: static; max-height: 16rem; }
}
form.wh .secret-custom { display: none; }
form.wh.secret-ready .secret-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
form.wh.secret-ready .secret-custom { display: block; }
.secret-pick { position: relative; }
.secret-toggle {
  width: 100%; justify-content: flex-start;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
}
.secret-menu {
  margin: 0; padding: var(--sp-2); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow);
  max-height: 16rem; overflow: auto;
}
.secret-menu ul { list-style: none; margin: 0; padding: 0; }
.secret-menu li[hidden] { display: none; }
.secret-menu li button {
  width: 100%; justify-content: space-between;
  background: transparent; color: var(--ink); border: 0;
}
.secret-menu li button:hover { background: var(--blue-soft); }
.secret-menu input { width: 100%; margin-bottom: var(--sp-2); }
button.tiny, a.tiny, summary.tiny {
  min-height: 1.75rem; padding: 0 0.55rem; font-size: 0.82rem; width: auto;
}
button.fit, a.fit { width: auto; }
summary.ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center;
  font: inherit; cursor: pointer; list-style: none;
}
summary.ghost::-webkit-details-marker { display: none; }
.acts { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.acts > * { flex: none; }
.evgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.2rem 0.8rem; margin: 0.35rem 0 0.6rem;
}
.evgrid label { margin: 0; }
form.wh textarea, form.secret textarea, .hooktable textarea { min-height: 4.5rem; }
form.wh .grid-2 label { margin-top: 0; }
.urlclip {
  display: inline-block; max-width: 16rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.hooktable { background: var(--card); }
.hooktable .pill { display: inline-block; margin: 0 0.25rem 0.25rem 0; }
.hooktable details[open] > form { display: block; margin-top: 0.45rem; min-width: 16rem; white-space: normal; }
.secretvalue { display: block; margin-top: 0.35rem; white-space: pre-wrap; word-break: break-all; font-family: var(--mono); }

@media (max-width: 800px) {
  .proj, .fileview, .joblayout { grid-template-columns: minmax(0, 1fr); }
  .proj > *, .fileview > *, .toolbar, .commitbar, .hscroll { min-width: 0; max-width: 100%; }
  body:has(main.fill) { height: auto; overflow: auto; }
  .frame.with-side:has(main.fill),
  .content:has(main.fill) { height: auto; overflow: visible; }
  main.fill { display: block; height: auto; overflow: visible; }
  .fileview { height: auto; min-height: 0; }
  .fileview .treelist { max-height: none; overflow: visible; flex: none; }
  .fileview .filepane,
  .filepane:has(.codebox) { overflow: visible; display: block; }
  .fileview .codebox { overflow: auto; flex: none; max-height: none; }
  .heat-foot { flex-direction: column; align-items: flex-start; }
  .heat-legend, .heat-foot .muted { justify-content: flex-start; text-align: left; }
  .repolist > li { flex-wrap: wrap; }
  .usercard { grid-template-columns: auto minmax(0, 1fr); }
  .usercard-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .pagehead { align-items: flex-start; }
  .pageacts { flex-wrap: wrap; justify-content: flex-end; }
  .mrwidget .rowline { align-items: flex-start; }
  .sub { flex-wrap: nowrap; overflow-x: auto; }
}
.issuelist { list-style: none; margin: 0; padding: 0; }
.issuelist > li { border-bottom: 1px solid var(--line); padding: 0.6rem 0; min-height: 2.4rem; }
.flowhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-3);
}
.flowtabs { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; min-width: 0; }
.flowtabs a {
  display: inline-flex; align-items: center; gap: 0.35rem;
  text-decoration: none; color: var(--ink); font-weight: 500;
  padding: 0.35rem 0.65rem; border: 1px solid transparent; border-radius: var(--radius);
}
.flowtabs a.on { background: #f4f7fb; border-color: var(--line); }
.flowcount {
  display: inline-block; min-width: 1.15rem; padding: 0 0.35rem; text-align: center;
  background: #eef2f6; color: var(--muted); border-radius: 999px; font-size: 0.78rem; font-weight: 650;
}
.flowtabs a.on .flowcount { background: var(--blue-soft); color: var(--blue-deep); }
.flowbar { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: 0 0 var(--sp-2); }
.flowsearch {
  position: relative;
  flex: 1 1 16rem; display: flex; align-items: center; gap: 0.4rem; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: white;
  min-height: var(--control-h); padding: 0 0.35rem 0 0.55rem; color: var(--muted);
}
.flowsearch input { border: 0; min-height: 0; padding: 0; background: transparent; flex: 1; width: auto; color: var(--ink); }
.flowsearch input:focus { outline: none; }
.flowsearch:focus-within { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.flowsearch button.flowgo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0; background: transparent; color: transparent;
}
.flowbar > select { width: auto; flex: 0 1 12rem; }
a.flowdir { width: var(--control-h); min-width: var(--control-h); padding: 0; }
.flowlist { list-style: none; margin: 0; padding: 0; }
.flowrow {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4);
  padding: 0.85rem 0.15rem; border-bottom: 1px solid var(--line);
}
.flowrow:first-child { border-top: 1px solid var(--line); }
.flowmain { min-width: 0; }
.flowtitle { color: inherit; text-decoration: none; font-size: 1rem; line-height: 1.35; }
.flowtitle strong { font-weight: 650; }
.flowtitle:hover strong { text-decoration: underline; }
.flowdraft { color: var(--muted); font-weight: 500; }
.flowmeta {
  margin: 0.28rem 0 0; color: var(--muted); font-size: var(--fs-sm);
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; align-items: center;
}
.flowmeta a { color: inherit; }
.flowdot { color: var(--line); }
.flowtarget {
  border: 1px solid var(--line); border-radius: 999px; padding: 0 0.4rem;
  background: white; color: var(--ink);
}
.flowcomments { display: inline-flex; align-items: center; gap: 0.2rem; }
a.flowpipe { padding: 0; background: transparent; min-height: 0; line-height: 0; }
a.flowpipe .mark { width: 14px; height: 14px; }
a.flowpipe.passed .mark::after { left: 4px; top: 2px; width: 3px; height: 6px; }
.flowside { display: flex; flex-direction: column; align-items: flex-end; gap: 0.28rem; flex: none; text-align: right; }
.flowbadge {
  display: inline-block; border-radius: 999px; padding: 0.08rem 0.55rem;
  font-size: 0.78rem; font-weight: 650; background: #e5f6ec; color: #146c43;
}
.flowbadge.merged { background: var(--blue-soft); color: var(--blue-deep); }
.flowbadge.closed { background: #fde8e8; color: var(--bad); }
.flowupdated { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.flowempty { padding: 0.8rem 0; }
@media (max-width: 800px) {
  .flowrow { flex-direction: column; gap: 0.4rem; }
  .flowside { flex-direction: row; align-items: center; }
  .flowbar > select { flex: 1 1 8rem; }
}
.lab { display: inline-block; color: #fff; border-radius: 999px; padding: 0.05rem 0.45rem; font-size: 0.78rem; margin: 0 0.2rem; }
.issue-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0.4rem 0; }
.checks label { display: block; margin: 0.2rem 0; }
.mrhead { margin: 0 0 var(--sp-4); }
.mrhead h1 { margin: 0.35rem 0 0.15rem; overflow-wrap: anywhere; }
.mrbadges { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0; }
.mrstate {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 0.18rem 0.7rem; font-weight: 650; font-size: 0.84rem;
}
.mrstate.open { background: #e5f6ec; color: #146c43; }
.mrstate.merged { background: var(--blue-soft); color: var(--blue-deep); }
.mrstate.closed { background: #fde8e8; color: var(--bad); }
.mrmeta { color: var(--muted); margin: 0.15rem 0 0.45rem; }
.mrwant { margin: 0.2rem 0; line-height: 1.9; }
.mrwant span:empty { display: none; }
.mrwant a.who {
  display: inline-flex; align-items: center; gap: 0.35rem; vertical-align: middle;
  margin-right: 0.15rem; font-weight: 650; color: var(--ink); text-decoration: none;
}
.mrwant a.who:hover { text-decoration: underline; }
.branchchip {
  display: inline-flex; align-items: center; gap: 0.1rem; max-width: 100%;
  background: #f6f8fa; border: 1px solid var(--line); border-radius: 6px;
  padding: 0 0.1rem 0 0.4rem; vertical-align: middle;
}
.branchchip code { font-size: 0.85rem; overflow-wrap: anywhere; }
.branchchip button.copy {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 0.78rem; min-height: 1.6rem; padding: 0 0.4rem;
}
.mrchips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.35rem 0 0; }
.mrwidget {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  margin: var(--sp-3) 0 var(--sp-4);
}
.mrwidget .rowline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--line);
}
.mrwidget .rowline:last-child { border-bottom: 0; }
.mrwidget h2 { margin: 0; font-size: 0.95rem; flex: none; }
.mrwidget .mrpipe { margin: 0; min-width: 0; }
.mrwidget .checks { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; }
.mrwidget .checks label { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; }
.mrwidget .checks label:last-child { flex: 1 1 100%; display: block; }
.mrwidget textarea { min-height: 4.5rem; }
.mrwidget form { margin: 0; }
.revblock { flex: 1 1 16rem; min-width: 0; }
.mrreviews { list-style: none; padding: 0; margin: 0 0 0.35rem; }
.mrreviews li { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; padding: 0.15rem 0; }
.mrreviews form { margin: 0; }
.mergeacts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.diskuse { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.diskuse p { margin: 0; }
.diskbar { display: flex; align-items: center; gap: var(--sp-2); }
.diskbar-svg { flex: 1; width: 100%; height: 16px; display: block; border-radius: 999px; }
.diskbar-svg .track { fill: var(--line); }
.diskbar-svg .fill { fill: var(--blue); }
.diskbar span { min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums; }
.mergedby { margin: 0; }
.mergedby .branchchip { margin-left: 0.45rem; vertical-align: middle; }
.sub .count {
  display: inline-block; margin-left: 0.3rem; background: #eef2f7; color: var(--muted);
  border-radius: 999px; padding: 0 0.4rem; font-size: 0.75rem; font-weight: 650;
}
.sub a.on .count { background: #fff; color: var(--blue-deep); }
.taskcount { margin: 0.7rem 0 0.2rem; font-size: 0.9rem; }
ul.tasks { list-style: none; padding-left: 0.1rem; }
ul.tasks > li { display: flex; align-items: flex-start; gap: 0.35rem; margin: 0.25rem 0; }
.taskform { display: inline-flex; margin: 0; }
button.taskbox {
  min-height: 1.1rem; width: 1.1rem; height: 1.1rem; padding: 0;
  background: var(--card); color: var(--ink); border: 1px solid var(--ink); border-radius: 3px;
  font-size: 0.75rem;
}
button.taskbox.on { background: var(--blue); color: #fff; border-color: var(--blue); }
input.tasktick { margin: 0.15rem 0.35rem 0 0; }

/* Smalle schermen: niets mag de pagina breder maken dan het scherm. */
html, body { overflow-x: clip; }
table.md { display: block; max-width: 100%; overflow-x: auto; }
.mdbody { min-width: 0; overflow-wrap: anywhere; }
.mdbody pre { max-width: 100%; overflow-x: auto; }
.mdbody pre code { overflow-wrap: normal; }
@media (max-width: 720px) {
  .commitwho { overflow-wrap: anywhere; }
  .commitbar { flex-wrap: wrap; row-gap: 0.45rem; }
  .commitbar .grow { flex: 1 1 calc(100% - 3rem); }
  .commitbar .grow .muted { white-space: normal; word-break: normal; }
  .headpipe { flex: 1 1 100%; flex-wrap: wrap; row-gap: 0.35rem; min-width: 0; }
  .headpipe .stages { flex-wrap: wrap; min-width: 0; }
  .commitbar .btn.ghost { margin-left: auto; }
}

/* Help (/help) */
.helpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.helpcard { overflow-wrap: anywhere; display: flex; flex-direction: column; gap: var(--sp-1); text-decoration: none; color: var(--ink); min-width: 0; }
.helpcard:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.helpcard .pill { align-self: flex-start; }
.helpdoc { margin-top: 0; }
.helpdoc .mdbody { overflow-wrap: anywhere; }
.helpdoc pre { max-width: 100%; overflow-x: auto; }
.helpdoc table.md { display: block; overflow-x: auto; max-width: 100%; }
.helplink { font-size: var(--fs-sm); }

/* Runnerbeheer (bluegit-runner UI en /admin/runner) */
.rui { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.rui > .panel, .rui-cards > .panel { margin: 0; }
.rui-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
.rui-head h1 { margin-bottom: var(--sp-1); overflow-wrap: anywhere; }
.rui-head p { margin: 0; max-width: 70ch; }
.rui-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-weight: 600; font-size: var(--fs-sm); border: 1px solid var(--line); background: var(--card); }
.rui-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rui-badge.ok { color: var(--ok); background: #e5f6ec; border-color: #b7e3c8; }
.rui-badge.warn { color: #8a5a00; background: #fff4dc; border-color: #f1d79c; }
.rui-badge.bad { color: var(--bad); background: #fde8e8; border-color: #f2c2c2; }
.rui-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.rui-card h2, .rui .panel h2 { margin-top: 0; }
.rui-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; }
.rui-dl dt { color: var(--muted); }
.rui-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.rui-big { font-size: 28px; font-weight: 650; margin: 0; line-height: 1.2; }
.rui-big .muted { font-size: var(--fs); font-weight: 400; }
.rui-safe { font-weight: 600; margin: var(--sp-2) 0; }
.rui-safe.ok { color: var(--ok); }
.rui-safe.warn { color: #8a5a00; }
.rui-small { font-size: var(--fs-sm); margin-bottom: 0; }
.rui-upgrade form { margin: var(--sp-2) 0 0; }
.rui-sechead { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rui-sechead form { margin: 0; }
.rui-form fieldset { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-3); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--sp-4); min-width: 0; }
.rui-form legend { font-weight: 600; padding: 0 var(--sp-1); color: var(--blue-deep); }
.rui-form label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rui-form label small { font-size: var(--fs-sm); line-height: 1.35; }
.rui-form label.rui-check { flex-direction: row; align-items: center; gap: var(--sp-2); }
.rui-form label.rui-wide { grid-column: 1 / -1; }
.rui-form textarea { font-family: var(--mono); font-size: var(--fs-sm); }
.rui-rec { color: var(--blue-deep); }
.rui-rec::before { content: "★ "; }
.rui-actions { display: flex; justify-content: flex-end; }
.rui-table { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--card); }
.rui-table td.act { width: 1%; white-space: nowrap; text-align: right; }
.rui-table form { margin: 0; }
.rui-table td code { white-space: nowrap; }
.rui-table th { text-align: left; font-size: var(--fs-sm); color: var(--muted); }
.rui-table td, .rui-table th { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rui-st { font-size: var(--fs-sm); font-weight: 600; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--line); }
.rui-st.success { color: var(--ok); background: #e5f6ec; }
.rui-st.failed { color: var(--bad); background: #fde8e8; }
.rui-st.canceled { color: var(--muted); }
.pill.rui-own { background: var(--blue-soft); border-color: #bcd3fb; color: var(--blue-deep); }
.rui-add { margin-top: var(--sp-3); }
.rui-add summary { cursor: pointer; font-weight: 600; color: var(--blue-deep); margin-bottom: var(--sp-2); }
.rui-foot p { margin: 0; overflow-wrap: anywhere; }
.rui-foot code { font-size: var(--fs-sm); }
.rui-doc h2 { margin-top: var(--sp-5); }
.rui-doc pre { max-width: 100%; overflow-x: auto; }
.rui-login { max-width: 420px; margin: var(--sp-6) auto; }
.rui-login input { width: 100%; }
.rui-langs { display: flex; gap: var(--sp-2); }
.rui-langs a { opacity: .75; font-size: var(--fs-sm); }
.rui-langs a.on { opacity: 1; font-weight: 600; text-decoration: underline; }
@media (max-width: 720px) {
  .rui-head { flex-direction: column; }
  .rui-form fieldset { grid-template-columns: 1fr; padding: var(--sp-2) var(--sp-3); }
  .rui-big { font-size: 22px; }
  .top:has(.rui-nav) { height: auto; min-height: var(--top-h); flex-wrap: wrap; row-gap: 4px; padding-top: 6px; padding-bottom: 6px; }
  .top nav.rui-nav { gap: var(--sp-2); font-size: var(--fs-sm); flex-wrap: wrap; }
  .top .brand { font-size: 14px; white-space: nowrap; }
  .rui-sechead form, .rui-sechead button { width: 100%; }
}

/* Eigen modal (confirm.js) — nooit browser-popups */
html.bgmodal-open { overflow: hidden; }
.bgmodal { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0; width: min(28rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-shadow: 0 16px 48px rgba(20, 32, 51, .28); color: var(--ink); background: var(--card); }
.bgmodal::backdrop { background: rgba(20, 32, 51, .45); }
.bgmodal-box { padding: var(--sp-5); margin: 0; }
.bgmodal h2 { margin: 0 0 var(--sp-2); font-size: 17px; }
.bgmodal p { margin: 0 0 var(--sp-5); overflow-wrap: anywhere; color: var(--muted); }
.bgmodal-acts { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
.bgmodal-acts button { min-width: 96px; }
.bgmodal-acts button.danger { font-size: var(--fs); min-height: var(--control-h); padding: 0 var(--sp-3); }
.bgmodal[open] { animation: bgmodal-in .12s ease-out; }
@keyframes bgmodal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .bgmodal-acts button { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .bgmodal[open] { animation: none; } }

/* Info-tooltips (i) */
.tiphost { position: relative; }
.tip { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.tip-i { all: unset; display: inline-block; box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--blue); color: var(--blue-deep); background: var(--blue-soft); font: italic 700 11px/16px Georgia, serif; text-align: center; cursor: help; flex: none; }
.tip-i:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tip-b { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-width: 26rem; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); background: var(--ink); color: #fff; font-size: var(--fs-sm); font-weight: 400; font-style: normal; line-height: 1.45; box-shadow: var(--shadow); white-space: normal; text-align: left; overflow-wrap: anywhere; }
.tip-b::before { content: ""; position: absolute; top: -5px; left: 14px; border: 5px solid transparent; border-top: 0; border-bottom-color: var(--ink); }
.tip:hover .tip-b, .tip-i:focus + .tip-b, .tip.open .tip-b, .tiphost:focus-within .tip-b { display: block; }
.tiphost:has(.tip.open), .tiphost:focus-within, .tiphost:hover { z-index: 31; }

/* Taalkiezer (langpick.js) */
.langpick { position: relative; display: inline-flex; }
.top .langpick-btn, .langpick-btn { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; min-height: 30px; padding: 0 6px; gap: 4px; border-radius: var(--radius); }
.langpick-btn:focus-visible, .langpick-menu button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.flag { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.langpick-caret { font-size: 10px; opacity: .8; }
.langpick-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; margin: 0; padding: 4px; min-width: 150px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.langpick-menu[hidden] { display: none; }
.langpick-menu button, .top .langpick-menu button { background: transparent; color: var(--ink); border: 0; justify-content: flex-start; gap: 8px; min-height: 34px; padding: 0 8px; width: 100%; white-space: nowrap; }
.langpick-menu button:hover { background: var(--blue-soft); }
.rui-lbl { display: inline-flex; align-items: center; gap: 2px; }

/* Beheer-subtabs */
.admintabs { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4); border-bottom: 1px solid var(--line); min-width: 0; }
.admintabs-title { font-weight: 650; color: var(--muted); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; flex: none; }
.admintabs-list { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.admintabs-list::-webkit-scrollbar { display: none; }
.admintabs-list a { padding: var(--sp-2) var(--sp-3); text-decoration: none; color: var(--ink); border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.admintabs-list a:hover { color: var(--blue-deep); }
.admintabs-list a.on { border-bottom-color: var(--blue); color: var(--blue-deep); font-weight: 600; }
.adminusers td { vertical-align: middle; }
.adminusers .why { font-size: var(--fs-sm); color: var(--muted); max-width: 16rem; margin-left: auto; white-space: normal; }
@media (max-width: 720px) { .admintabs-title { display: none; } }
table.kv { width: 100%; max-width: 100%; }
table.kv td, table.kv th { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 720px) { table.kv, table.kv tbody, table.kv tr, table.kv td, table.kv th { display: block; } table.kv th { padding-bottom: 0; } }
@media (max-width: 720px) {
  .hscroll:has(> .adminusers) { overflow-x: visible; }
  table.adminusers { min-width: 0; }
  table.adminusers thead { display: none; }
  table.adminusers, table.adminusers tbody, table.adminusers tr, table.adminusers td { display: block; width: auto; }
  table.adminusers tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
  table.adminusers td { border: 0; padding: 2px 0; }
  table.adminusers td.act { padding-top: var(--sp-2); text-align: left; width: auto; white-space: normal; }
  .adminusers .why { margin-left: 0; max-width: none; width: 100%; min-width: 14rem; }
  table.adminusers td.act, table.adminusers td.act form { display: block; width: 100%; }
}
.piperetry[hidden], details.piperetry[hidden] { display: none !important; }

/* Bestandskaart: acties en SVG-voorbeeld */
.codebox header.codehead { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.codehead .fileacts { display: inline-flex; gap: 0.4rem; font-weight: 400; }
.codebox { position: relative; }
.svgpreview { position: absolute; top: 3.4rem; right: 1rem; z-index: 2; margin: 0; width: 12rem; height: 12rem; background: #fff; border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: 0.5rem; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.svgpreview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.svgpreview figcaption { color: #555; font-size: 0.85rem; text-align: center; }
@media (max-width: 760px) {
  .svgpreview { position: static; margin: 0.6rem 1rem; width: auto; height: 10rem; }
}
.codehead .fileacts button:disabled { opacity: 0.45; cursor: not-allowed; }

/* Release-assets: naam + grootte links, acties rechts op dezelfde regel. */
li.rel-asset { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; }
li.rel-asset .rel-asset-name { min-width: 0; overflow-wrap: anywhere; }
li.rel-asset form.rel-asset-actions { display: inline-flex; align-items: center; gap: .35rem; margin: 0; margin-left: auto; }

/* Afbeeldingsvoorbeeld in de bestandsweergave; schaakbord toont transparantie. */
.imgpreview { margin: 0; padding: 1rem; display: flex; justify-content: center; }
.imgpreview img { max-width: 100%; height: auto; background-color: #fff; background-image: linear-gradient(45deg, #e6e9ef 25%, transparent 25%), linear-gradient(-45deg, #e6e9ef 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e6e9ef 75%), linear-gradient(-45deg, transparent 75%, #e6e9ef 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; border: 1px solid var(--line); border-radius: 4px; }
.imgpreview img.pixel { image-rendering: pixelated; }

/* doNotInterrupt */
.pill.dni { background: #fff4e0; color: #8a5a00; border: 1px solid #f0d9a8; font-size: 0.74rem; padding: 0 0.45rem; cursor: help; }
.pipewait { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; background: #fff8ec; border: 1px solid #f0d9a8; border-radius: 8px; padding: 0.5rem 0.75rem; }
.status.waiting_for_job { background: #fff4e0; color: #8a5a00; }
form.cancelform { display: inline; }

/* Commitgrafiek links van de centrale kolom. Avatars zitten in de
   SVG op de lane-x. Breedtes komen uit .lanes-N in dit stylesheet,
   niet uit inline style-attributen (CSP style-src 'self'). Op brede
   schermen staat de tekstkolom rechts van de lanes; op middelbrede
   schermen (tot ~1400px met sidebar) een smalle modus zonder
   committekst, met tooltip bij hover. Alleen op mobiel blijft hij
   verborgen. */
/* Paneelmaten per lanettal. Geen inline styles: CSP style-src is
   'self' zonder unsafe-inline, dus custom properties komen uit deze
   klassen (niet uit style="--graph-w: …"). --graph-w is de brede modus
   (inclusief tekstkolom); --graph-narrow-w is zonder tekstkolom. */
.commitgraph-slot.lanes-1 { --lanes: 1; --graph-svg-w: 28px; --graph-lanes-w: 36px; --graph-w: 294px; --graph-narrow-w: 114px; }
.commitgraph-slot.lanes-2 { --lanes: 2; --graph-svg-w: 56px; --graph-lanes-w: 64px; --graph-w: 322px; --graph-narrow-w: 142px; }
.commitgraph-slot.lanes-3 { --lanes: 3; --graph-svg-w: 84px; --graph-lanes-w: 92px; --graph-w: 350px; --graph-narrow-w: 170px; }
.commitgraph-slot.lanes-4 { --lanes: 4; --graph-svg-w: 112px; --graph-lanes-w: 120px; --graph-w: 378px; --graph-narrow-w: 198px; }
.commitgraph-slot.lanes-5 { --lanes: 5; --graph-svg-w: 140px; --graph-lanes-w: 148px; --graph-w: 406px; --graph-narrow-w: 226px; }
.commitgraph-slot.lanes-6 { --lanes: 6; --graph-svg-w: 168px; --graph-lanes-w: 176px; --graph-w: 434px; --graph-narrow-w: 254px; }
.commitgraph-slot.lanes-7 { --lanes: 7; --graph-svg-w: 196px; --graph-lanes-w: 204px; --graph-w: 462px; --graph-narrow-w: 282px; }
.commitgraph-slot.lanes-8 { --lanes: 8; --graph-svg-w: 224px; --graph-lanes-w: 232px; --graph-w: 490px; --graph-narrow-w: 310px; }
.commitgraph-slot.lanes-9 { --lanes: 9; --graph-svg-w: 252px; --graph-lanes-w: 260px; --graph-w: 518px; --graph-narrow-w: 338px; }
.commitgraph-slot.lanes-10 { --lanes: 10; --graph-svg-w: 280px; --graph-lanes-w: 288px; --graph-w: 546px; --graph-narrow-w: 366px; }
.commitgraph-slot.lanes-11 { --lanes: 11; --graph-svg-w: 308px; --graph-lanes-w: 316px; --graph-w: 574px; --graph-narrow-w: 394px; }
.commitgraph-slot.lanes-12 { --lanes: 12; --graph-svg-w: 336px; --graph-lanes-w: 344px; --graph-w: 602px; --graph-narrow-w: 422px; }
.commitgraph-slot.lanes-13 { --lanes: 13; --graph-svg-w: 364px; --graph-lanes-w: 372px; --graph-w: 630px; --graph-narrow-w: 450px; }
.commitgraph-slot.lanes-14 { --lanes: 14; --graph-svg-w: 392px; --graph-lanes-w: 400px; --graph-w: 658px; --graph-narrow-w: 478px; }
.commitgraph-slot.lanes-15 { --lanes: 15; --graph-svg-w: 420px; --graph-lanes-w: 428px; --graph-w: 686px; --graph-narrow-w: 506px; }
.commitgraph-slot.lanes-16 { --lanes: 16; --graph-svg-w: 448px; --graph-lanes-w: 456px; --graph-w: 714px; --graph-narrow-w: 534px; }
.commitgraph-slot.lanes-17 { --lanes: 17; --graph-svg-w: 476px; --graph-lanes-w: 484px; --graph-w: 742px; --graph-narrow-w: 562px; }
.commitgraph-slot.lanes-18 { --lanes: 18; --graph-svg-w: 504px; --graph-lanes-w: 512px; --graph-w: 770px; --graph-narrow-w: 590px; }
.commitgraph-slot.lanes-19 { --lanes: 19; --graph-svg-w: 532px; --graph-lanes-w: 540px; --graph-w: 798px; --graph-narrow-w: 618px; }
.commitgraph-slot.lanes-20 { --lanes: 20; --graph-svg-w: 560px; --graph-lanes-w: 568px; --graph-w: 826px; --graph-narrow-w: 646px; }
.commitgraph-slot.lanes-21 { --lanes: 21; --graph-svg-w: 588px; --graph-lanes-w: 596px; --graph-w: 854px; --graph-narrow-w: 674px; }
.commitgraph-slot.lanes-22 { --lanes: 22; --graph-svg-w: 616px; --graph-lanes-w: 624px; --graph-w: 882px; --graph-narrow-w: 702px; }
.commitgraph-slot.lanes-23 { --lanes: 23; --graph-svg-w: 644px; --graph-lanes-w: 652px; --graph-w: 910px; --graph-narrow-w: 730px; }
.commitgraph-slot.lanes-24 { --lanes: 24; --graph-svg-w: 672px; --graph-lanes-w: 680px; --graph-w: 938px; --graph-narrow-w: 758px; }
.commitgraph-slot.lanes-25 { --lanes: 25; --graph-svg-w: 700px; --graph-lanes-w: 708px; --graph-w: 966px; --graph-narrow-w: 786px; }
.commitgraph-slot.lanes-26 { --lanes: 26; --graph-svg-w: 728px; --graph-lanes-w: 736px; --graph-w: 994px; --graph-narrow-w: 814px; }
.commitgraph-slot.lanes-27 { --lanes: 27; --graph-svg-w: 756px; --graph-lanes-w: 764px; --graph-w: 1022px; --graph-narrow-w: 842px; }
.commitgraph-slot.lanes-28 { --lanes: 28; --graph-svg-w: 784px; --graph-lanes-w: 792px; --graph-w: 1050px; --graph-narrow-w: 870px; }
.commitgraph-slot.lanes-29 { --lanes: 29; --graph-svg-w: 812px; --graph-lanes-w: 820px; --graph-w: 1078px; --graph-narrow-w: 898px; }
.commitgraph-slot.lanes-30 { --lanes: 30; --graph-svg-w: 840px; --graph-lanes-w: 848px; --graph-w: 1106px; --graph-narrow-w: 926px; }
.commitgraph-slot.lanes-31 { --lanes: 31; --graph-svg-w: 868px; --graph-lanes-w: 876px; --graph-w: 1134px; --graph-narrow-w: 954px; }
.commitgraph-slot.lanes-32 { --lanes: 32; --graph-svg-w: 896px; --graph-lanes-w: 904px; --graph-w: 1162px; --graph-narrow-w: 982px; }
.commitgraph-slot.lanes-33 { --lanes: 33; --graph-svg-w: 924px; --graph-lanes-w: 932px; --graph-w: 1190px; --graph-narrow-w: 1010px; }
.commitgraph-slot.lanes-34 { --lanes: 34; --graph-svg-w: 952px; --graph-lanes-w: 960px; --graph-w: 1218px; --graph-narrow-w: 1038px; }
.commitgraph-slot.lanes-35 { --lanes: 35; --graph-svg-w: 980px; --graph-lanes-w: 988px; --graph-w: 1246px; --graph-narrow-w: 1066px; }
.commitgraph-slot.lanes-36 { --lanes: 36; --graph-svg-w: 1008px; --graph-lanes-w: 1016px; --graph-w: 1274px; --graph-narrow-w: 1094px; }
.commitgraph-slot.lanes-37 { --lanes: 37; --graph-svg-w: 1036px; --graph-lanes-w: 1044px; --graph-w: 1302px; --graph-narrow-w: 1122px; }
.commitgraph-slot.lanes-38 { --lanes: 38; --graph-svg-w: 1064px; --graph-lanes-w: 1072px; --graph-w: 1330px; --graph-narrow-w: 1150px; }
.commitgraph-slot.lanes-39 { --lanes: 39; --graph-svg-w: 1092px; --graph-lanes-w: 1100px; --graph-w: 1358px; --graph-narrow-w: 1178px; }
.commitgraph-slot.lanes-40 { --lanes: 40; --graph-svg-w: 1120px; --graph-lanes-w: 1128px; --graph-w: 1386px; --graph-narrow-w: 1206px; }
.commitgraph-slot {
  display: none;
  position: sticky;
  top: calc(var(--top-h) + var(--sp-4));
  width: 0;
  min-width: 0;
  flex: none;
  align-self: flex-start;
  z-index: 5;
}
.commitgraph {
  position: relative;
  width: var(--graph-w);
  min-width: var(--graph-w);
  max-width: var(--graph-w);
  overflow: visible;
  font-size: var(--fs-sm);
  color: var(--ink);
  zoom: 1;
  transform: none;
}
.commitgraph-list { list-style: none; margin: 0; padding: 0; position: relative; width: var(--graph-w); min-width: var(--graph-w); }
.commitgraph-svg {
  position: absolute;
  top: 0;
  left: var(--graph-ref-w);
  max-width: none;
  max-height: none;
  pointer-events: none;
  z-index: 1;
  flex-shrink: 0;
  overflow: visible;
}
.commitgraph-svg a.commitgraph-node { pointer-events: auto; cursor: pointer; }
.commitgraph-svg a.commitgraph-node:focus { outline: none; }
.commitgraph-svg a.commitgraph-node:focus-visible circle { stroke: var(--c, var(--blue)); stroke-width: 2; }
.commitgraph-row {
  display: grid;
  grid-template-columns: var(--graph-ref-w) var(--graph-lanes-w, calc(var(--lanes, 1) * var(--graph-lane) + 8px)) minmax(0, 1fr);
  align-items: center;
  height: var(--graph-row);
  position: relative;
  min-width: var(--graph-w);
}
.commitgraph-refs {
  display: flex; gap: 2px; justify-content: flex-end; align-items: center;
  width: var(--graph-ref-w); min-width: var(--graph-ref-w);
  overflow: hidden; padding-right: 4px;
}
.commitgraph-lanes {
  width: var(--graph-lanes-w, calc(var(--lanes, 1) * var(--graph-lane) + 8px));
  min-width: var(--graph-lanes-w, calc(var(--lanes, 1) * var(--graph-lane) + 8px));
  flex: none;
}
.commitgraph-ref {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: 10px; font-weight: 600; line-height: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid currentColor; border-radius: 999px;
  padding: 0 5px; background: var(--card);
}
.commitgraph-ref-short { display: none; }
.commitgraph-ref.is-tag, .commitgraph-ref.tag { border-style: dashed; font-weight: 500; color: var(--muted); }
.commitgraph-ref.is-default { background: var(--blue-soft); }
.commitgraph-node.is-main, .commitgraph-ref.is-main, .commitgraph-svg .is-main { --c: var(--blue); color: var(--blue); }
.commitgraph-node.c0, .commitgraph-ref.c0, .commitgraph-svg .c0 { --c: var(--graph-0); color: var(--graph-0); }
.commitgraph-node.c1, .commitgraph-ref.c1, .commitgraph-svg .c1 { --c: var(--graph-1); color: var(--graph-1); }
.commitgraph-node.c2, .commitgraph-ref.c2, .commitgraph-svg .c2 { --c: var(--graph-2); color: var(--graph-2); }
.commitgraph-node.c3, .commitgraph-ref.c3, .commitgraph-svg .c3 { --c: var(--graph-3); color: var(--graph-3); }
.commitgraph-node.c4, .commitgraph-ref.c4, .commitgraph-svg .c4 { --c: var(--graph-4); color: var(--graph-4); }
.commitgraph-node.c5, .commitgraph-ref.c5, .commitgraph-svg .c5 { --c: var(--graph-5); color: var(--graph-5); }
.commitgraph-node.c6, .commitgraph-ref.c6, .commitgraph-svg .c6 { --c: var(--graph-6); color: var(--graph-6); }
.commitgraph-node.c7, .commitgraph-ref.c7, .commitgraph-svg .c7 { --c: var(--graph-7); color: var(--graph-7); }
.commitgraph-svg a.commitgraph-node circle {
  stroke: var(--c, var(--blue));
  stroke-width: 1;
}
.commitgraph-svg a.commitgraph-node.is-glow circle,
.commitgraph-svg a.commitgraph-node.is-glow image {
  filter: drop-shadow(0 0 2px var(--c, var(--blue)));
}
.commitgraph-svg a.commitgraph-node.is-glow circle {
  stroke: var(--c, var(--blue));
  stroke-width: 2.5;
}
.commitgraph-msg {
  display: block;
  min-width: 0;
  width: 100%;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.2rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.2rem), transparent 100%);
}
.commitgraph-msg:hover { color: var(--blue-deep); text-decoration: underline; }
.commitgraph-svg path.is-glow {
  stroke-width: 2.5;
  filter: drop-shadow(0 0 2px var(--c, var(--blue)));
}
.commitgraph-ref.is-glow { box-shadow: 0 0 0 1px var(--c, var(--blue)); }
/* Smalle modus vanaf tablet: zelfde grafiek, zonder tekstkolom, zodat
   de hoofdkolom de ruimte terugkrijgt. Verborgen alleen op mobiel.
   Brede modus (tekstkolom) vanaf ~1400px met sidebar, of ~1160px
   zonder, of als de contentbak de volle breedte (406+16+720) draagt. */
@media (min-width: 721px) {
  .commitgraph-slot {
    display: block;
    width: var(--graph-narrow-w);
    min-width: var(--graph-narrow-w);
    flex: 0 0 var(--graph-narrow-w);
    overflow: hidden;
    max-height: calc(100vh - var(--top-h) - var(--sp-4));
    /* Fade op viewport-bodem: bij een korte grafiek ligt de
       overgang voorbij de elementhoogte, dus verdwijnt hij niet. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100vh - var(--top-h) - var(--sp-4) - 4.5rem), transparent calc(100vh - var(--top-h) - var(--sp-4)));
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100vh - var(--top-h) - var(--sp-4) - 4.5rem), transparent calc(100vh - var(--top-h) - var(--sp-4)));
  }
  .commitgraph {
    width: var(--graph-narrow-w);
    min-width: var(--graph-narrow-w);
    max-width: var(--graph-narrow-w);
    margin-right: 0;
    overflow: visible;
  }
  .commitgraph-list,
  .commitgraph-row {
    width: var(--graph-narrow-w);
    min-width: var(--graph-narrow-w);
    max-width: var(--graph-narrow-w);
  }
  .commitgraph-row {
    grid-template-columns: var(--graph-ref-w) var(--graph-lanes-w);
  }
  .commitgraph-msg { display: none; }
  .commitgraph-ref-full { display: none; }
  .commitgraph-ref-short { display: inline; }
}
@media (max-width: 720px) {
  .commitgraph-slot { display: none !important; }
}

@media (min-width: 1400px) {
  .frame.with-side .commitgraph-slot {
    display: block;
    width: auto;
    min-width: var(--graph-w);
    flex: 1 1 auto;
    max-width: none;
  }
  .frame.with-side .commitgraph,
  .frame.with-side .commitgraph-list,
  .frame.with-side .commitgraph-row {
    width: 100%;
    min-width: var(--graph-w);
    max-width: none;
  }
  .frame.with-side .commitgraph { margin-right: 0; overflow: visible; }
  .frame.with-side .commitgraph-row {
    grid-template-columns: var(--graph-ref-w) var(--graph-lanes-w, calc(var(--lanes, 1) * var(--graph-lane) + 8px)) minmax(0, 1fr);
  }
  .frame.with-side .commitgraph-msg { display: block; }
  .frame.with-side .commitgraph-ref-full { display: inline; }
  .frame.with-side .commitgraph-ref-short { display: none; }
}
@media (min-width: 1160px) {
  .frame:not(.with-side) .commitgraph-slot {
    display: block;
    width: auto;
    min-width: var(--graph-w);
    flex: 1 1 auto;
    max-width: none;
  }
  .frame:not(.with-side) .commitgraph,
  .frame:not(.with-side) .commitgraph-list,
  .frame:not(.with-side) .commitgraph-row {
    width: 100%;
    min-width: var(--graph-w);
    max-width: none;
  }
  .frame:not(.with-side) .commitgraph { margin-right: 0; overflow: visible; }
  .frame:not(.with-side) .commitgraph-row {
    grid-template-columns: var(--graph-ref-w) var(--graph-lanes-w, calc(var(--lanes, 1) * var(--graph-lane) + 8px)) minmax(0, 1fr);
  }
  .frame:not(.with-side) .commitgraph-msg { display: block; }
  .frame:not(.with-side) .commitgraph-ref-full { display: inline; }
  .frame:not(.with-side) .commitgraph-ref-short { display: none; }
}
@container maincol (min-width: 1142px) {
  .commitgraph-slot {
    display: block;
    width: auto;
    min-width: var(--graph-w);
    flex: 1 1 auto;
    max-width: none;
  }
  .commitgraph,
  .commitgraph-list,
  .commitgraph-row {
    width: 100%;
    min-width: var(--graph-w);
    max-width: none;
  }
  .commitgraph { margin-right: 0; overflow: visible; }
  .commitgraph-row {
    grid-template-columns: var(--graph-ref-w) var(--graph-lanes-w, calc(var(--lanes, 1) * var(--graph-lane) + 8px)) minmax(0, 1fr);
  }
  .commitgraph-msg { display: block; }
  .commitgraph-ref-full { display: inline; }
  .commitgraph-ref-short { display: none; }
}
.commitgraph-slot.is-hidden { display: none !important; }

.repoacts { display: inline-flex; align-items: center; gap: 0.35rem; flex: none; }
.repoacts .starform, .pageacts .starform { margin: 0; display: inline-flex; }
.repoacts .iconbtn, .pageacts .starbtn.iconbtn {
  min-height: 24px; min-width: 24px; width: auto; padding: 0 0.35rem;
  background: var(--card); color: var(--ink);
}
.pageacts .starbtn.btn { min-width: auto; }
.starbtn.starred { color: #9a6700; }
.starbtn .ico-star-on { display: none; }
.starbtn.starred .ico-star-off { display: none; }
.starbtn.starred .ico-star-on { display: block; }
.iconbtn .ico-check { display: none; }
.iconbtn.copied .ico-copy { display: none; }
.iconbtn.copied .ico-check { display: block; }
.starcount { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
span.starbtn {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  color: var(--muted); min-height: 24px; padding: 0 0.35rem;
}
span.starbtn.btn { border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
span.starbtn.starred { color: #9a6700; }