/*
 * hanna.lol theme for cgit
 *
 * A complete replacement for cgit's stock cgit.css, built from the same
 * tokens as hanna.lol and the Headspace (GoToSocial) instance theme.
 * Colour is kept for things that carry meaning (diffs, the commit graph);
 * everything else is the site's monochrome palette.
 *
 * Fonts are loaded from ./fonts/ relative to this file.
 */

@font-face {
  font-family: "Inter";
  src: local("Inter Variable"), local("Inter"), url("fonts/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: local("Inter Variable Italic"), local("Inter Italic"), url("fonts/Inter-Italic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: local("Geist Mono"), url("fonts/GeistMono.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ */
/* Tokens (same values as hanna.lol global.css / instance.css)         */
/* ------------------------------------------------------------------ */

:root {
  --bg-primary: #161616;
  --bg-secondary: #1c1c1c;
  --bg-tertiary: #262626;
  --bg-code: #0f0f0f;
  --border: #393939;

  --text-primary: #f2f4f8;
  --text-secondary: #dfdfe0;
  --text-muted: #c6c8cc;
  --text-faint: #9a9a9a;
  --text-fainter: #7a7a7a;

  --accent: #ffffff;

  /* Meaningful colour only: diffs + graph lanes. Pastels to sit quietly
     on the grey, taken from the Headspace theme's green1 / error2. */
  --add: #b9e0b0;
  --add-bg: rgba(185, 224, 176, 0.07);
  --add-bg-strong: rgba(185, 224, 176, 0.16);
  --del: #f0a8a8;
  --del-bg: rgba(240, 168, 168, 0.07);
  --del-bg-strong: rgba(240, 168, 168, 0.16);
  --chg-bg: rgba(224, 216, 168, 0.07);
  --chg-bg-strong: rgba(224, 216, 168, 0.15);
  --error-bg: #5c1111;

  /* carbonfox (nightfox.nvim) - built on the same #161616 / #f2f4f8 base.
     Used for syntax highlighting and commit graph lanes. */
  --cf-red: #ee5396;
  --cf-green: #25be6a;
  --cf-yellow: #08bdba;
  --cf-blue: #78a9ff;
  --cf-blue-bright: #8cb6ff;
  --cf-magenta: #be95ff;
  --cf-magenta-bright: #c8a5ff;
  --cf-cyan: #33b1ff;
  --cf-cyan-bright: #52bdff;
  --cf-orange: #3ddbd9;
  --cf-orange-bright: #5ae0df;
  --cf-pink: #ff7eb6;
  --cf-pink-bright: #ff91c1;
  --cf-yellow-bright: #2dc7c4;
  --cf-white: #dfdfe0;
  --cf-fg1: #f2f4f8;
  --cf-fg2: #b6b8bb;
  --cf-fg3: #7b7c7e;
  --cf-comment: #6e6f70;
  --error-border: #b53636;

  --radius: 4px;
  --radius-sm: 2px;
  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 15px;
  --space-lg: 20px;
  --space-xl: 25px;
  --space-2xl: 30px;

  --navbar-height: 48px;
  --shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  --page-width: 1068px;

  --font-ui: "Inter", "Noto Sans", system-ui, sans-serif;
  --font-mono: "Geist Mono", "Noto Sans Mono", ui-monospace, monospace;
  --font-size: 0.95rem;
  --font-code: 0.8rem;

  color-scheme: dark;
}

@media only screen and (max-width: 800px) {
  :root {
    --font-size: 0.85rem;
    --font-code: 0.75rem;
  }
}

/* ------------------------------------------------------------------ */
/* Page                                                                */
/* ------------------------------------------------------------------ */

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  scrollbar-color: var(--border) var(--bg-primary);
}

::selection {
  background: var(--text-primary);
  color: var(--bg-primary);
}

/* Full-height column so the footer sits at the bottom of short pages */
body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Room for the fixed navbar, only when header.html is included */
body:has(> .site-navbar) {
  padding-top: var(--navbar-height);
}

div#cgit {
  box-sizing: border-box;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: var(--space-lg) 0 0;
  font-family: var(--font-ui);
  font-size: var(--font-size);
  line-height: 1.4;
  color: var(--text-secondary);
  background: var(--bg-primary);
}

div#cgit a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
}

div#cgit a:hover {
  text-decoration-color: currentColor;
}

div#cgit a:focus-visible,
div#cgit input:focus-visible,
div#cgit select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

div#cgit table {
  border-collapse: collapse;
}

div#cgit img {
  border: none;
}

div#cgit pre,
div#cgit code {
  font-family: var(--font-mono);
}

/* Geist Mono ships ligatures (-> => -<); code should show what's typed */
div#cgit pre,
div#cgit code,
div#cgit table.diff,
div#cgit table.ssdiff,
div#cgit table.blob,
div#cgit .oid,
div#cgit div.commit-msg,
div#cgit td.logmsg,
div#cgit td.commitgraph {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

div#cgit .oid {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

div#cgit .left {
  text-align: left;
}

div#cgit .right {
  text-align: right;
}

/* Everything except the footer sits in the centred page column */
div#cgit > :not(.footer) {
  box-sizing: border-box;
  width: min(var(--page-width), calc(100% - 2 * var(--space-md)));
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------------ */
/* Site navbar (header.html)                                           */
/* ------------------------------------------------------------------ */

.site-navbar {
  box-sizing: border-box;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0 var(--space-sm);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-family: var(--font-ui);
}

.site-navbar h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}

.site-navbar h1 a {
  color: var(--text-primary);
  text-decoration: none;
}

.site-navbar ul {
  display: flex;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-navbar ul a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 32px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-decoration: none;
}

.site-navbar ul a:hover,
.site-navbar ul a[aria-current] {
  background: var(--bg-tertiary);
  border-color: var(--accent);
  color: var(--accent);
}

@media only screen and (max-width: 475px) {
  .site-navbar h1 {
    font-size: 17px;
  }

  .site-navbar ul {
    gap: 6px;
  }

  .site-navbar ul a {
    width: 56px;
    height: 28px;
    font-size: 12px;
  }
}

/* ------------------------------------------------------------------ */
/* Title block (table#header) - reads like the blog index heading      */
/* ------------------------------------------------------------------ */

div#cgit table#header {
  margin-bottom: var(--space-lg);
}

div#cgit table#header td {
  padding: 0;
  vertical-align: middle;
}

div#cgit table#header td.logo {
  width: 1px;
  padding-right: var(--space-lg);
  vertical-align: middle;
}

div#cgit table#header td.logo img {
  display: block;
  max-height: 64px;
  max-width: 96px;
  border-radius: var(--radius);
}

div#cgit table#header td.main {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap;
}

/* "index : repo" - the index crumb and separator recede */
div#cgit table#header td.main:has(a) {
  color: var(--text-fainter);
  font-weight: 300;
}

div#cgit table#header td.main a {
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: none;
}

div#cgit table#header td.main a:first-child:not(:last-child) {
  color: var(--text-muted);
  font-weight: 300;
}

div#cgit table#header td.main a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

div#cgit table#header td.sub {
  padding-top: var(--space-xs);
  color: var(--text-muted);
  font-size: 1.05rem;
  font-weight: 300;
}

div#cgit table#header td.sub.right {
  font-size: 0.85rem;
  color: var(--text-faint);
  white-space: nowrap;
}

div#cgit table#header td.form {
  text-align: right;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Form controls                                                       */
/* ------------------------------------------------------------------ */

div#cgit form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
}

div#cgit input,
div#cgit select {
  box-sizing: border-box;
  height: 32px;
  margin: 0;
  padding: 0 8px;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

div#cgit select {
  padding-right: 4px;
  cursor: pointer;
}

div#cgit input:focus,
div#cgit select:focus {
  border-color: var(--accent);
  outline: none;
}

div#cgit input[type="search"],
div#cgit input.txt {
  width: 10rem;
}

div#cgit input[type="submit"],
div#cgit input[type="button"] {
  padding: 0 12px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
}

div#cgit input[type="submit"]:hover,
div#cgit input[type="button"]:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
  color: var(--accent);
}

div#cgit input[type="checkbox"],
div#cgit input[type="radio"] {
  height: auto;
  accent-color: var(--text-primary);
}

/* ------------------------------------------------------------------ */
/* Tabs - same buttons as the site navbar                              */
/* ------------------------------------------------------------------ */

div#cgit table.tabs {
  border-bottom: 1px solid var(--border);
}

/* No rule between the tabs and the path bar; the path bar is its own edge */
div#cgit table.tabs:has(+ div.path) {
  border-bottom: 0;
}

div#cgit table.tabs,
div#cgit table.tabs tbody {
  display: block;
}

div#cgit table.tabs tr {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  padding-bottom: var(--space-md);
}

div#cgit table.tabs td {
  padding: 0;
}

/* Tabs stay on one line and scroll sideways when they don't fit, with
   the scrollbar hidden. The padding/negative margin pair keeps focus
   outlines from being clipped by the scroll area. */
div#cgit table.tabs td:first-child {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: var(--space-sm);
  min-width: 0;
  margin: -3px;
  padding: 3px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

div#cgit table.tabs td:first-child::-webkit-scrollbar {
  display: none;
}

div#cgit table.tabs td:first-child > a {
  flex: 0 0 auto;
  white-space: nowrap;
}

div#cgit table.tabs td a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-decoration: none;
}

div#cgit table.tabs td a:hover,
div#cgit table.tabs td a.active {
  background: var(--bg-tertiary);
  border-color: var(--accent);
  color: var(--accent);
}

/* External link (e.g. homepage): arrow glyph drawn with currentColor */
div#cgit table.tabs a[href^="http://"]::after,
div#cgit table.tabs a[href^="https://"]::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 6px;
  background-color: currentColor;
  opacity: 0.6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1h6v6M9 1 1 9' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1h6v6M9 1 1 9' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

div#cgit table.tabs td.form {
  text-align: right;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Path crumbs + content area                                          */
/* ------------------------------------------------------------------ */

div#cgit div.path {
  margin-top: 0;
  padding: 6px var(--space-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--font-code);
}

div#cgit div.path a {
  color: var(--text-primary);
}

div#cgit div.content {
  min-width: 0;
  margin-bottom: var(--space-lg);
  padding: var(--space-lg) 0 0;
}

div#cgit div.error {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: var(--radius);
  color: var(--del);
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Lists (repo index, log, refs, tree, summary) - bordered cards       */
/* ------------------------------------------------------------------ */

div#cgit table.list {
  width: 100%;
  border: 1px solid var(--border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  background: var(--bg-secondary);
}

div#cgit table.list tr,
div#cgit table.list tr:nth-child(even),
div#cgit table.list tr:nth-child(odd),
div#cgit table.list tr.logheader,
div#cgit table.list tr.nohover,
div#cgit table.list tr.nohover:hover,
div#cgit table.list tr.nohover-highlight:hover:nth-child(even),
div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) {
  background: transparent;
}

/* Every row is the same height: 20px line + 8px padding top and bottom */
div#cgit table.list td,
div#cgit table.list th {
  height: 20px;
  padding: 8px var(--space-sm);
  border-bottom: 1px solid var(--border);
  line-height: 20px;
  vertical-align: middle;
}

div#cgit table.list tr:last-child > td,
div#cgit table.list tr:last-child > th {
  border-bottom: 0;
}

/* Rounded corners on the outermost cells */
div#cgit table.list tr:first-child > :first-child { border-top-left-radius: var(--radius); }
div#cgit table.list tr:first-child > :last-child { border-top-right-radius: var(--radius); }
div#cgit table.list tr:last-child > :first-child { border-bottom-left-radius: var(--radius); }
div#cgit table.list tr:last-child > :last-child { border-bottom-right-radius: var(--radius); }

div#cgit table.list tr:hover > td {
  background: var(--bg-tertiary);
}

div#cgit table.list tr.nohover:hover > td,
div#cgit table.list tr.nohover-highlight:hover > td {
  background: transparent;
}

/* Column headers - like the Headspace column headers */
div#cgit table.list th {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

div#cgit table.list th a {
  color: var(--text-primary);
}

div#cgit table.list th.right {
  text-align: right;
}

/* Blank spacer rows between sections on the summary page: the section
   header rows already separate them */
div#cgit table.list tr.nohover > td[colspan]:not(:has(*)) {
  display: none;
}

/* Clone URLs: drop the separate "Clone" header row and label the URL row
   itself, as a footer row of the card */
div#cgit table.list tr.nohover:has(> th):has(+ tr a[rel="vcs-git"]) {
  display: none;
}

div#cgit table.list td:has(> a[rel="vcs-git"]) {
  background: var(--bg-primary);
}

div#cgit table.list tr:hover > td:has(> a[rel="vcs-git"]) {
  background: var(--bg-primary);
}

div#cgit table.list td:has(> a[rel="vcs-git"])::before {
  content: "Clone";
  display: inline-block;
  min-width: 3.5rem;
  margin-right: var(--space-sm);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
}

div#cgit table.list td a[rel="vcs-git"] {
  font-family: var(--font-mono);
  font-size: var(--font-code);
  user-select: all;
}

div#cgit table.list td a {
  color: var(--text-primary);
}

div#cgit table.list td a:hover {
  color: var(--accent);
}

/* Repo index */
div#cgit table.list td.toplevel-repo a,
div#cgit table.list td.sublevel-repo a {
  font-weight: 600;
}

div#cgit table.list td.sublevel-repo {
  padding-left: var(--space-sm);
}

div#cgit table.list td.reposection {
  background: var(--bg-primary);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  font-style: normal;
}

div#cgit table.list tr.nohover-highlight:hover > td.reposection {
  background: var(--bg-primary);
}

div#cgit table.list td:not(.toplevel-repo):not(.sublevel-repo) {
  color: var(--text-muted);
}

/* Log */
div#cgit table.list td.logsubject {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text-primary);
}

/* Expanded log: no row rules, the message text separates commits */
div#cgit table.list:has(td.logmsg) td {
  border-bottom-color: transparent;
}

div#cgit table.list tr:has(> td.logmsg) > td {
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.5;
  vertical-align: top;
}

div#cgit table.list td.logmsg {
  font-family: var(--font-mono);
  font-size: var(--font-code);
  color: var(--text-muted);
  white-space: pre;
}

div#cgit table.list td.commitgraph {
  font-family: var(--font-mono);
  font-size: var(--font-code);
  white-space: pre;
  color: var(--text-faint);
}

/* Graph lanes use the carbonfox accents, same as syntax highlighting */
div#cgit table.list td.commitgraph .column1 { color: var(--cf-red); }
div#cgit table.list td.commitgraph .column2 { color: var(--cf-green); }
div#cgit table.list td.commitgraph .column3 { color: var(--cf-blue); }
div#cgit table.list td.commitgraph .column4 { color: var(--cf-magenta); }
div#cgit table.list td.commitgraph .column5 { color: var(--cf-yellow); }
div#cgit table.list td.commitgraph .column6 { color: var(--cf-pink); }

/* Tree */
div#cgit a.ls-blob,
div#cgit a.ls-dir,
div#cgit .ls-mod {
  font-family: var(--font-mono);
  font-size: var(--font-code);
}

div#cgit table.list td a.ls-dir {
  color: var(--text-primary);
  font-weight: 700;
}

div#cgit table.list td a.ls-blob {
  color: var(--text-secondary);
}

div#cgit td.ls-mode,
div#cgit td.ls-size {
  width: 10em;
  font-family: var(--font-mono);
  font-size: var(--font-code);
  color: var(--text-faint);
}

div#cgit td.ls-size {
  text-align: right;
}

/* Small secondary actions (tree "log / stats / plain", refs downloads)
   - same pill as the blog's date badge */
div#cgit a.button,
div#cgit table.list td a.button {
  display: inline-block;
  margin: 1px 0;
  padding: 0 var(--space-xs);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 18px;
  text-decoration: none;
}

div#cgit a.button:hover,
div#cgit table.list td a.button:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
  color: var(--accent);
}

div#cgit a.primary {
  font-size: 0.8rem;
}

div#cgit a.secondary {
  font-size: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* Ages, counts, decorations                                           */
/* ------------------------------------------------------------------ */

div#cgit span.age-mins { color: var(--text-primary); font-weight: 700; }
div#cgit span.age-hours { color: var(--text-primary); }
div#cgit span.age-days { color: var(--text-secondary); }
div#cgit span.age-weeks { color: var(--text-muted); }
div#cgit span.age-months { color: var(--text-faint); }
div#cgit span.age-years { color: var(--text-fainter); }

div#cgit span.insertions { color: var(--add); }
div#cgit span.deletions { color: var(--del); }

div#cgit a.branch-deco,
div#cgit a.tag-deco,
div#cgit a.tag-annotated-deco,
div#cgit a.remote-deco,
div#cgit a.deco,
div#cgit table.list td a.branch-deco,
div#cgit table.list td a.tag-deco,
div#cgit table.list td a.tag-annotated-deco,
div#cgit table.list td a.remote-deco,
div#cgit table.list td a.deco {
  display: inline-block;
  margin: 0 0 0 var(--space-xs);
  padding: 0 var(--space-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 16px;
  text-decoration: none;
  vertical-align: middle;
}

/* Branches: filled. Tags: outlined. Remotes: dashed. Other refs: bright. */
div#cgit a.branch-deco,
div#cgit table.list td a.branch-deco {
  background: var(--bg-tertiary);
  border-color: var(--text-faint);
  color: var(--text-primary);
}

div#cgit a.remote-deco,
div#cgit table.list td a.remote-deco {
  border-style: dashed;
}

div#cgit a.deco,
div#cgit table.list td a.deco {
  border-color: var(--accent);
  color: var(--accent);
}

div#cgit a.branch-deco:hover,
div#cgit a.tag-deco:hover,
div#cgit a.tag-annotated-deco:hover,
div#cgit a.remote-deco:hover,
div#cgit a.deco:hover,
div#cgit table.list td a.branch-deco:hover,
div#cgit table.list td a.tag-deco:hover,
div#cgit table.list td a.tag-annotated-deco:hover,
div#cgit table.list td a.remote-deco:hover,
div#cgit table.list td a.deco:hover {
  border-color: var(--accent);
  color: var(--accent);
}

div#cgit div.commit-subject a.branch-deco,
div#cgit div.commit-subject a.tag-deco,
div#cgit div.commit-subject a.tag-annotated-deco,
div#cgit div.commit-subject a.remote-deco,
div#cgit div.commit-subject a.deco {
  margin-left: var(--space-sm);
  font-size: 0.75rem;
  vertical-align: 3px;
}

/* ------------------------------------------------------------------ */
/* Pager                                                               */
/* ------------------------------------------------------------------ */

div#cgit ul.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

div#cgit ul.pager li {
  margin: 0;
}

div#cgit ul.pager a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-decoration: none;
}

div#cgit ul.pager a:hover,
div#cgit ul.pager .current {
  background: var(--bg-tertiary);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* Summary: downloads, README                                          */
/* ------------------------------------------------------------------ */

div#cgit div#summary {
  margin-bottom: var(--space-lg);
}

div#cgit table#downloads {
  float: right;
  margin: 0 0 var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  background: var(--bg-secondary);
}

div#cgit table#downloads th {
  padding: 6px var(--space-sm);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--text-primary);
  font-size: 0.85rem;
}

div#cgit table#downloads td {
  padding: 4px var(--space-sm);
}

/* ------------------------------------------------------------------ */
/* Blob / blame / binary views                                         */
/* ------------------------------------------------------------------ */

div#cgit div#blob {
  border: 0;
}

div#cgit table.blob,
div#cgit table.bin-blob {
  width: 100%;
  margin-top: 0;
  border: 1px solid var(--border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  background: var(--bg-code);
}

div#cgit table.blob pre {
  margin: 0;
  padding: 0;
  font-size: var(--font-code);
  line-height: 1.6;
}

div#cgit table.blob pre pre,
div#cgit table.blob pre .highlight {
  display: inline;
  font-size: inherit;
  line-height: inherit;
}

/* File view + blame: the "blob: <id> (plain) (blame)" line becomes the
   header bar of a single code card */
div#cgit div.content:has(> table.blob) {
  margin-top: var(--space-md);
  padding: 8px var(--space-sm) 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--font-code);
  line-height: 1.4;
}

div#cgit div.content:has(> table.blob) > a {
  color: var(--text-primary);
}

div#cgit div.content:has(> table.blob) > table.blob {
  width: calc(100% + 2 * var(--space-sm));
  max-width: none;
  margin: 8px calc(-1 * var(--space-sm)) 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
}

div#cgit div.content:has(> table.blob) > table.blob td.linenumbers {
  border-radius: 0 0 0 var(--radius);
}

div#cgit table.blob code {
  font-family: var(--font-mono);
}

div#cgit table.blob td.hashes,
div#cgit table.blob td.lines {
  width: 100%;
  margin: 0;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
  vertical-align: top;
  color: var(--text-secondary);
}

div#cgit table.blob td.linenumbers {
  margin: 0;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
  vertical-align: top;
  text-align: right;
  border-right: 1px solid var(--border);
  background: var(--bg-primary);
  border-radius: var(--radius) 0 0 var(--radius);
  user-select: none;
}

/* Line numbers stay put while the code scrolls sideways. In blame the
   commit column scrolls away and the numbers pin to the left edge. */
div#cgit table.blob td.linenumbers {
  position: sticky;
  left: 0;
  z-index: 1;
}

div#cgit table.blob td.linenumbers a,
div#cgit table.ssdiff td.lineno a {
  color: var(--text-fainter);
  text-decoration: none;
}

div#cgit table.blob td.linenumbers a:hover,
div#cgit table.ssdiff td.lineno a:hover {
  color: var(--text-primary);
}

div#cgit table.blob td.linenumbers a:target {
  color: var(--accent);
  font-weight: 700;
}

div#cgit table.blob td.linenumbers a:target::before {
  content: "\2BA9";
  margin-right: 4px;
  color: var(--accent);
}

/* Blame */
div#cgit table.blame td.hashes,
div#cgit table.blame td.lines,
div#cgit table.blame td.linenumbers {
  padding: 0;
}

div#cgit table.blame td.hashes {
  width: auto;
  white-space: nowrap;
  border-right: 1px solid var(--border);
}

div#cgit table.blame td.hashes a {
  color: var(--text-muted);
}

div#cgit table.blame td.hashes div.alt,
div#cgit table.blame td.lines div.alt {
  padding: 0 var(--space-sm);
}

div#cgit table.blame td.linenumbers div.alt {
  padding: 0 var(--space-sm) 0 var(--space-md);
}

/* Solid number column in blame, like the file view, so scrolled code
   doesn't show through the alternating block shading */
div#cgit table.blame td.linenumbers div.alt:nth-child(n) {
  background: var(--bg-primary);
}

div#cgit table.blame div.alt:nth-child(odd) {
  background: var(--bg-code);
}

div#cgit table.blame div.alt:nth-child(even) {
  background: var(--bg-primary);
}

div#cgit table.blame td.lines > div {
  position: relative;
}

div#cgit table.blame td.lines > div > pre {
  position: absolute;
  top: 0;
  padding: 0 0 0 var(--space-sm);
}

div#cgit table.blame .oid {
  font-size: var(--font-code);
}

/* Binary */
div#cgit table.bin-blob th {
  padding: 6px var(--space-md);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-code);
  white-space: pre;
}

div#cgit table.bin-blob td {
  padding: 0 var(--space-md);
  border-left: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--font-code);
  white-space: pre;
}

div#cgit table.bin-blob td:first-child {
  border-left: 0;
  color: var(--text-fainter);
}

div#cgit table.nowrap td {
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Commit view                                                         */
/* ------------------------------------------------------------------ */

div#cgit table.commit-info {
  margin-top: 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
}

div#cgit table.commit-info th,
div#cgit table.commit-info td {
  padding: 6px var(--space-sm);
  border-bottom: 1px solid var(--border);
  font-weight: 400;
  vertical-align: baseline;
}

div#cgit table.commit-info tr:last-child > * {
  border-bottom: 0;
}

div#cgit table.commit-info th {
  background: var(--bg-primary);
  border-right: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: left;
}

div#cgit table.commit-info tr:first-child > th { border-top-left-radius: var(--radius); }
div#cgit table.commit-info tr:last-child > th { border-bottom-left-radius: var(--radius); }

div#cgit table.commit-info td {
  color: var(--text-secondary);
}

div#cgit table.commit-info td.sha1 a,
div#cgit table.commit-info td.oid a {
  font-family: var(--font-mono);
}

div#cgit div.cgit-panel {
  float: right;
  margin: 0 0 var(--space-md) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  overflow: hidden;
}

div#cgit div.cgit-panel > b {
  display: block;
  padding: 6px var(--space-sm);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
}

div#cgit div.cgit-panel form {
  display: block;
  padding: var(--space-xs) 0;
}

div#cgit div.cgit-panel table {
  border: 0;
  background: none;
}

div#cgit div.cgit-panel td {
  padding: 3px var(--space-sm);
  font-size: 0.85rem;
}

div#cgit div.cgit-panel td.label {
  color: var(--text-muted);
}

div#cgit div.cgit-panel select,
div#cgit div.cgit-panel input {
  height: 26px;
  font-size: 0.8rem;
}

div#cgit div.commit-subject {
  margin: var(--space-xl) 0 var(--space-sm);
  padding: 0;
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

div#cgit div.commit-msg {
  padding-bottom: var(--space-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-code);
  line-height: 1.6;
  white-space: pre-wrap;
}

div#cgit div.notes-header,
div#cgit div.diffstat-header {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-sm);
  color: var(--text-primary);
  font-weight: 600;
}

div#cgit div.diffstat-header a {
  color: var(--text-primary);
}

div#cgit div.notes {
  float: left;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-code);
  border: 0;
  border-left: 2px solid var(--accent);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-code);
  white-space: pre;
}

div#cgit div.notes-footer {
  clear: left;
}

/* Diffstat */
div#cgit table.diffstat {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
}

div#cgit table.diffstat th {
  padding: 6px var(--space-sm);
  font-weight: 400;
  text-align: left;
  text-decoration: none;
}

div#cgit table.diffstat td {
  padding: 4px var(--space-sm);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-code);
}

div#cgit table.diffstat tr:last-child > td {
  border-bottom: 0;
}

div#cgit table.diffstat td.mode {
  font-family: var(--font-mono);
  color: var(--text-fainter);
  white-space: nowrap;
}

div#cgit table.diffstat td.mode + td a,
div#cgit table.diffstat td.add a,
div#cgit table.diffstat td.del a,
div#cgit table.diffstat td.upd a {
  font-family: var(--font-mono);
}

div#cgit table.diffstat td.add a { color: var(--add); }
div#cgit table.diffstat td.del a { color: var(--del); }
div#cgit table.diffstat td.upd a { color: var(--text-primary); }

div#cgit table.diffstat td span.modechange {
  padding-left: var(--space-sm);
  color: var(--del);
}

div#cgit table.diffstat td.right {
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Mode, file name and count hug their content; the bar takes the rest */
div#cgit table.diffstat > tbody > tr > td:not(.graph) {
  width: 1%;
  white-space: nowrap;
}

div#cgit table.diffstat td.graph {
  width: auto;
  min-width: 120px;
  vertical-align: middle;
}

div#cgit table.diffstat td.graph table {
  border: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

div#cgit table.diffstat td.graph td {
  height: 8px;
  padding: 0;
  border: 0;
}

div#cgit table.diffstat td.graph td.add { background: var(--add); }
div#cgit table.diffstat td.graph td.rem { background: var(--del); }

div#cgit div.diffstat-summary {
  padding-top: var(--space-sm);
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Unified diff - one code block */
div#cgit table.diff {
  width: 100%;
  margin-top: var(--space-lg);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-code);
}

div#cgit table.diff td {
  padding: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--font-code);
  line-height: 1.6;
  white-space: pre;
  color: var(--text-secondary);
}

div#cgit table.diff td div {
  padding: 0 var(--space-md);
}

/* File headers: raised bar, same as the side-by-side view */
div#cgit table.diff td div.head {
  margin: var(--space-md) 0 0;
  padding-top: 6px;
  padding-bottom: 6px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 700;
}

div#cgit table.diff td div.head:first-child {
  margin-top: 0;
  border-top: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}

div#cgit table.diff td div.head + div.hunk {
  margin-top: 0;
}

div#cgit table.diff td div.head a {
  color: var(--text-primary);
}

div#cgit table.diff td div.hunk {
  margin: var(--space-xs) 0;
  background: var(--bg-tertiary);
  color: var(--text-faint);
}

div#cgit table.diff td div.add {
  background: var(--add-bg);
  color: var(--add);
}

div#cgit table.diff td div.del {
  background: var(--del-bg);
  color: var(--del);
}

/* Side-by-side diff */
div#cgit table.ssdiff {
  width: 100%;
  margin-top: var(--space-lg);
  border: 1px solid var(--border);
  background: var(--bg-code);
}

div#cgit table.ssdiff td {
  padding: 1px 6px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: pre;
  color: var(--text-secondary);
}

div#cgit table.ssdiff td.add { color: var(--add); background: var(--add-bg); min-width: 50%; }
div#cgit table.ssdiff td.add_dark { color: var(--add); background: var(--add-bg-strong); min-width: 50%; }
div#cgit table.ssdiff span.add { color: var(--add); background: var(--add-bg-strong); font-weight: 700; }
div#cgit table.ssdiff td.del { color: var(--del); background: var(--del-bg); min-width: 50%; }
div#cgit table.ssdiff td.del_dark { color: var(--del); background: var(--del-bg-strong); min-width: 50%; }
div#cgit table.ssdiff span.del { color: var(--del); background: var(--del-bg-strong); font-weight: 700; }
div#cgit table.ssdiff td.changed { color: var(--text-primary); background: var(--chg-bg); min-width: 50%; }
div#cgit table.ssdiff td.changed_dark { color: var(--text-primary); background: var(--chg-bg-strong); min-width: 50%; }

div#cgit table.ssdiff td.lineno {
  width: 3em;
  min-width: 3em;
  background: var(--bg-primary);
  color: var(--text-fainter);
  text-align: right;
}

div#cgit table.ssdiff td.hunk {
  padding: 4px 6px;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
}

div#cgit table.ssdiff td.head {
  padding: 6px 6px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

div#cgit table.ssdiff td.head div.head {
  color: var(--text-primary);
  font-weight: 700;
}

div#cgit table.ssdiff td.head div.head a {
  color: var(--text-primary);
}

div#cgit table.ssdiff td.foot {
  border-top: 1px solid var(--border);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

div#cgit table.ssdiff td.space {
  border: 0;
  background: var(--bg-primary);
}

div#cgit table.ssdiff td.space div {
  min-height: var(--space-lg);
}

div#cgit table.ssdiff tr:first-child:has(> td.space) {
  display: none;
}

div#cgit table.ssdiff {
  border-radius: var(--radius);
}

/* ------------------------------------------------------------------ */
/* Stats                                                               */
/* ------------------------------------------------------------------ */

div#cgit table.stats,
div#cgit table.vgraph,
div#cgit table.hgraph {
  margin-top: var(--space-md);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
}

div#cgit table.stats th,
div#cgit table.stats td {
  padding: 4px var(--space-sm);
  border: 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

div#cgit table.stats tr:last-child > * {
  border-bottom: 0;
}

div#cgit table.stats th {
  background: var(--bg-primary);
  color: var(--text-primary);
  text-align: left;
}

div#cgit table.stats td {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-code);
  text-align: right;
}

div#cgit table.stats td.total,
div#cgit table.stats td.left {
  font-family: var(--font-ui);
  text-align: left;
}

div#cgit table.stats td.total {
  color: var(--text-primary);
  font-weight: 600;
}

div#cgit table.stats td.sum {
  color: var(--text-primary);
  font-weight: 700;
}

div#cgit table.vgraph {
  height: 200px;
}

div#cgit table.vgraph th,
div#cgit table.hgraph th {
  padding: 4px var(--space-sm);
  background: var(--bg-primary);
  border: 0;
  color: var(--text-primary);
  font-weight: 600;
}

div#cgit table.vgraph td {
  padding: 0 var(--space-sm);
  vertical-align: bottom;
}

div#cgit table.hgraph {
  width: 100%;
  max-width: 800px;
}

div#cgit table.hgraph td {
  padding: 2px 4px;
  vertical-align: middle;
}

div#cgit table.vgraph div.bar,
div#cgit table.hgraph div.bar {
  background: var(--text-muted);
  border-radius: var(--radius-sm);
}

div#cgit table.hgraph div.bar {
  height: 1em;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

/* Full-width bar pinned to the bottom, like the Headspace footer */
div#cgit div.footer {
  box-sizing: border-box;
  width: 100%;
  margin-top: auto;
  padding: 8px var(--space-sm);
  border-top: 1px solid var(--border);
  color: var(--text-fainter);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
}

div#cgit div.footer a {
  color: var(--text-muted);
  text-decoration: none;
}

div#cgit div.footer a:hover {
  color: var(--accent);
}

/* ------------------------------------------------------------------ */
/* Rendered READMEs (about-filter: md2html / rst2html / txt2html)      */
/* The blog's article styles; overrides md2html's injected CSS.        */
/* ------------------------------------------------------------------ */

div#cgit .markdown-body,
div#cgit div#summary {
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: var(--font-size);
  line-height: 1.45;
  background: none;
}

div#cgit .markdown-body > :first-child {
  margin-top: 0;
}

div#cgit .markdown-body h1,
div#cgit .markdown-body h2,
div#cgit .markdown-body h3,
div#cgit .markdown-body h4,
div#cgit .markdown-body h5,
div#cgit .markdown-body h6 {
  margin: var(--space-xl) 0 var(--space-sm);
  padding: 0;
  border: 0;
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.25;
}

div#cgit .markdown-body h1 { font-size: 2rem; }
div#cgit .markdown-body h2 { font-size: 1.5rem; }
div#cgit .markdown-body h3 { font-size: 1.17rem; }
div#cgit .markdown-body h4,
div#cgit .markdown-body h5,
div#cgit .markdown-body h6 { font-size: 1rem; }

div#cgit .markdown-body h1:first-child {
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

div#cgit div.content .markdown-body :is(h1, h2, h3, h4, h5, h6) a.toclink {
  color: inherit;
  text-decoration: none;
}

div#cgit .markdown-body a.anchor,
div#cgit .markdown-body .anchor {
  display: none;
}

div#cgit .markdown-body p,
div#cgit .markdown-body ul,
div#cgit .markdown-body ol,
div#cgit .markdown-body dl,
div#cgit .markdown-body table,
div#cgit .markdown-body pre,
div#cgit .markdown-body blockquote {
  margin: var(--space-sm) 0;
}

div#cgit .markdown-body ul,
div#cgit .markdown-body ol {
  padding-left: 2rem;
}

div#cgit .markdown-body li::marker {
  color: var(--text-muted);
}

div#cgit .markdown-body a {
  color: var(--accent);
}

div#cgit .markdown-body strong {
  color: var(--text-primary);
}

div#cgit .markdown-body hr {
  height: 0;
  margin: var(--space-lg) 0;
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
}

div#cgit .markdown-body blockquote {
  padding: var(--space-xs) var(--space-sm);
  border-left: 2px solid var(--accent);
  background: var(--bg-code);
  color: var(--text-secondary);
}

div#cgit .markdown-body blockquote > :first-child { margin-top: 0; }
div#cgit .markdown-body blockquote > :last-child { margin-bottom: 0; }

div#cgit .markdown-body code,
div#cgit .markdown-body tt {
  margin: 0;
  padding: 0 var(--space-xs);
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-code);
  white-space: nowrap;
}

div#cgit .markdown-body pre,
div#cgit .markdown-body .highlight pre {
  padding: var(--space-sm);
  overflow-x: auto;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--font-code);
  line-height: 1.5;
}

div#cgit .markdown-body pre code,
div#cgit .markdown-body pre tt {
  padding: 0;
  border: 0;
  background: transparent;
  white-space: pre;
}

div#cgit .markdown-body table {
  display: table;
  width: 100%;
  border: 1px solid var(--border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  background: var(--bg-tertiary);
}

div#cgit .markdown-body table th {
  padding: var(--space-xs) var(--space-sm);
  background: var(--border);
  border: 0;
  color: var(--text-primary);
}

div#cgit .markdown-body table td {
  padding: 8px var(--space-sm);
  border: 0;
  border-bottom: 1px solid var(--border);
}

div#cgit .markdown-body table td:not(:last-child) {
  border-right: 1px solid var(--border);
}

div#cgit .markdown-body table tr {
  background: none;
  border: 0;
}

div#cgit .markdown-body table tr:nth-child(even) td {
  background: var(--bg-secondary);
}

div#cgit .markdown-body table tr:last-child td {
  border-bottom: 0;
}

div#cgit .markdown-body img {
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: none;
}

/* ------------------------------------------------------------------ */
/* Syntax highlighting: carbonfox, mapped onto Pygments token classes  */
/* Works with the bundled filters/syntax-highlighting.py, cgit's stock */
/* filter (overrides its inline pastie styles) and md2html READMEs.    */
/* ------------------------------------------------------------------ */

div#cgit .highlight,
div#cgit .highlight pre {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--cf-fg1);
}

div#cgit .highlight span {
  background: none;
  border: 0;
  font-style: normal;
  font-weight: 400;
}

div#cgit .highlight .hll { background: var(--bg-tertiary); }
div#cgit .highlight .err { color: inherit; }

/* comments */
div#cgit .highlight :is(.c, .ch, .cm, .c1, .cs, .cpf, .sd) { color: var(--cf-comment); font-style: italic; }

/* preprocessor, imports, decorators, doctype */
div#cgit .highlight :is(.cp, .kn, .nd) { color: var(--cf-pink-bright); }

/* keywords */
div#cgit .highlight :is(.k, .kd, .kp, .kr, .ow) { color: var(--cf-magenta); }

/* constants: true/false/null, named constants, symbols, entities */
div#cgit .highlight :is(.kc, .no, .ss, .ni) { color: var(--cf-orange-bright); }

/* types, classes, namespaces, exceptions */
div#cgit .highlight :is(.kt, .nc, .nn, .ne) { color: var(--cf-yellow); }

/* builtins */
div#cgit .highlight :is(.nb, .bp) { color: var(--cf-red); }

/* functions */
div#cgit .highlight :is(.nf, .fm) { color: var(--cf-blue-bright); }

/* fields / properties / labels / attributes */
div#cgit .highlight :is(.py, .nl) { color: var(--cf-blue); }
div#cgit .highlight .na { color: var(--cf-blue-bright); font-style: italic; }

/* markup tags */
div#cgit .highlight .nt { color: var(--cf-magenta); }

/* variables, identifiers */
div#cgit .highlight :is(.n, .nx, .nv, .vc, .vg, .vi, .vm) { color: var(--cf-white); }

/* strings */
div#cgit .highlight :is(.s, .sa, .sb, .sc, .dl, .s2, .sh, .sx, .s1) { color: var(--cf-green); }
div#cgit .highlight :is(.se, .sr) { color: var(--cf-yellow-bright); }
div#cgit .highlight .si { color: var(--cf-magenta-bright); }

/* numbers */
div#cgit .highlight :is(.m, .mb, .mf, .mh, .mi, .il, .mo) { color: var(--cf-orange); }

/* operators, punctuation, whitespace */
div#cgit .highlight :is(.o, .p) { color: var(--cf-fg2); }
div#cgit .highlight .w { color: var(--cf-fg3); }

/* generic: diffs, markup, shell sessions */
div#cgit .highlight .gd { color: var(--cf-red); }
div#cgit .highlight .gi { color: var(--cf-green); }
div#cgit .highlight :is(.gh, .gu) { color: var(--cf-blue-bright); font-weight: 700; }
div#cgit .highlight .ge { font-style: italic; }
div#cgit .highlight .gs { font-weight: 700; }
div#cgit .highlight :is(.gr, .gt) { color: var(--cf-red); }
div#cgit .highlight :is(.go, .gp) { color: var(--cf-fg3); }

div#cgit .highlight .linenos,
div#cgit td.linenos .normal,
div#cgit span.linenos { color: var(--cf-fg3); background: none; }

/* ------------------------------------------------------------------ */
/* Horizontal scrolling                                                */
/* Each wide table scrolls on its own instead of the page. The table   */
/* box becomes the scroll container; its body is laid out as the table.*/
/* ------------------------------------------------------------------ */

div#cgit table.list,
div#cgit table.blob,
div#cgit table.bin-blob,
div#cgit table.diff,
div#cgit table.ssdiff,
div#cgit table.commit-info,
div#cgit table.diffstat,
div#cgit table.stats {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-color: var(--border) transparent;
  scrollbar-width: thin;
}

div#cgit table.list > tbody,
div#cgit table.blob > tbody,
div#cgit table.bin-blob > tbody,
div#cgit table.diff > tbody,
div#cgit table.ssdiff > tbody,
div#cgit table.commit-info > tbody {
  display: table;
  width: 100%;
}

div#cgit table.diffstat > tbody {
  display: table;
  width: 100%;
}

div#cgit table.stats > tbody {
  display: table;
}

div#cgit table.diffstat {
  width: 100%;
}

div#cgit table.stats {
  width: fit-content;
}

/* ------------------------------------------------------------------ */
/* Pages with an options panel (commit, diff, stats)                   */
/* The panel sits beside the first block and matches its height.       */
/* ------------------------------------------------------------------ */

div#cgit div.content:has(> div.cgit-panel) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-md);
  align-content: start;
}

div#cgit div.content:has(> div.cgit-panel) > * {
  grid-column: 1 / -1;
}

div#cgit div.content > div.cgit-panel {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  grid-row: 1;
  float: none;
  margin: 0;
}

div#cgit div.content > div.cgit-panel + * {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  margin-top: 0;
}

div#cgit div.content > div.cgit-panel + table.commit-info {
  width: 100%;
}

div#cgit div.content > div.cgit-panel + table.commit-info > tbody {
  height: 100%;
}

/* Diff tab: the panel sits beside "Diffstat" + table + summary. The
   spare 1fr row absorbs the panel's extra height, so the left column
   stays packed instead of spreading out to match it. */
div#cgit div.content:has(> div.cgit-panel + div.diffstat-header) {
  grid-template-rows: auto auto auto 1fr;
}

div#cgit div.content > div.cgit-panel:has(+ div.diffstat-header) {
  grid-row: 1 / 5;
  align-self: start;
}

div#cgit div.content > div.cgit-panel + div.diffstat-header {
  align-self: start;
  padding-top: 0;
}

div#cgit div.content:has(> div.cgit-panel + div.diffstat-header) > table.diffstat {
  grid-column: 1;
  grid-row: 2;
}

div#cgit div.content:has(> div.cgit-panel + div.diffstat-header) > div.diffstat-summary {
  grid-column: 1;
  grid-row: 3;
}

/* Stats page title */
div#cgit div.content > h2 {
  margin: 0 0 var(--space-sm);
  color: var(--text-primary);
  font-size: 1.5rem;
  line-height: 1.3;
}

/* Stats: title and table stack on the left, panel spans both */
div#cgit div.content > div.cgit-panel + h2 {
  align-self: start;
}

div#cgit div.content > div.cgit-panel + h2 + table {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

div#cgit div.content > div.cgit-panel:has(+ h2) {
  grid-row: 1 / span 2;
  align-self: start;
}

/* ------------------------------------------------------------------ */
/* Small screens                                                       */
/* ------------------------------------------------------------------ */

@media only screen and (max-width: 800px) {
  div#cgit {
    padding-top: var(--space-md);
  }

  /* Keep rows on one line and let the table scroll instead of wrapping */
  div#cgit table.list td,
  div#cgit table.list th,
  div#cgit table.commit-info th,
  div#cgit table.commit-info td,
  div#cgit table.diffstat td,
  div#cgit table.stats td {
    white-space: nowrap;
  }

  /* Options panel goes above the content */
  div#cgit div.content:has(> div.cgit-panel) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-md);
  }

  div#cgit div.content > div.cgit-panel {
    grid-column: 1;
    grid-row: 1;
  }

  div#cgit div.content > div.cgit-panel + *,
  div#cgit div.content > div.cgit-panel:has(+ h2) + h2 {
    grid-row: 2;
  }

  div#cgit div.content > div.cgit-panel:has(+ h2) {
    grid-row: 1;
  }

  div#cgit div.content > div.cgit-panel + h2 + table {
    grid-row: 3;
  }

  /* Diff tab: plain top-to-bottom order */
  div#cgit div.content:has(> div.cgit-panel + div.diffstat-header) {
    grid-template-rows: none;
  }

  div#cgit div.content:has(> div.cgit-panel + div.diffstat-header) > *,
  div#cgit div.content:has(> div.cgit-panel + div.diffstat-header) > div.cgit-panel,
  div#cgit div.content:has(> div.cgit-panel + div.diffstat-header) > table.diffstat,
  div#cgit div.content:has(> div.cgit-panel + div.diffstat-header) > div.diffstat-summary {
    grid-row: auto;
  }

  div#cgit table#header td.main {
    font-size: 1.5rem;
    white-space: normal;
  }

  div#cgit table#header td.sub {
    font-size: 0.95rem;
  }

  div#cgit table#header td.logo {
    display: none;
  }

  /* Stack the tab row and its search form */
  div#cgit table.tabs tr {
    flex-wrap: wrap;
  }

  div#cgit table.tabs td {
    width: 100%;
  }

  div#cgit table.tabs td a {
    min-width: 0;
    height: 28px;
    padding: 0 10px;
    font-size: 0.8rem;
  }

  div#cgit table.tabs td.form {
    text-align: left;
  }

  div#cgit table.tabs td.form form {
    display: flex;
    width: 100%;
  }

  div#cgit table.tabs td.form input[type="search"],
  div#cgit table.tabs td.form input.txt {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  div#cgit table#downloads {
    float: none;
    margin: 0 0 var(--space-md);
  }


}