/* Fonts: JetBrains Mono and Source Serif 4, both under the SIL Open Font
   License (see fonts/*-OFL.txt). */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jbm-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/jbm-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jbm-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/jbm-latin-ext-700.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jbm-cyrillic-400.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/jbm-cyrillic-700.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jbm-greek-400.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/jbm-greek-700.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/serif-latin-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;src:url(fonts/serif-latin-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/serif-latin-ext-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;src:url(fonts/serif-latin-ext-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/serif-cyrillic-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;src:url(fonts/serif-cyrillic-italic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/serif-greek-normal.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;src:url(fonts/serif-greek-italic.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}

/* One palette for light and dark; the page follows the system setting. */
:root {
  color-scheme: light dark;
  --bg: #fbfbfa;
  --ink: #1b1b1a;
  --dim: #6a6a66;
  --rule: #e0e0dc;
  --tint: #efefec;
  --link: oklch(0.52 0.11 255);
  --string: oklch(0.52 0.11 70);
  --constant: oklch(0.52 0.12 300);
  --add: oklch(0.52 0.11 150);
  --del: oklch(0.52 0.11 25);
  --add-tint: oklch(0.955 0.03 150);
  --del-tint: oklch(0.955 0.03 25);
  --hatch: #e4e4e0;
  --veil: rgb(251 251 250 / 0.8);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Source Serif 4", Georgia, serif;
  /* One line; every vertical gap is a whole or half number of them. */
  --lh: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141414;
    --ink: #e6e6e3;
    --dim: #9a9a95;
    --rule: #2e2e2c;
    --tint: #212120;
    --link: oklch(0.8 0.1 255);
    --string: oklch(0.8 0.1 75);
    --constant: oklch(0.8 0.1 300);
    --add: oklch(0.8 0.1 150);
    --del: oklch(0.8 0.1 25);
    --add-tint: oklch(0.27 0.04 150);
    --del-tint: oklch(0.27 0.04 25);
    --hatch: #272726;
    --veil: rgb(20 20 20 / 0.8);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/var(--lh) var(--mono);
  font-variant-ligatures: none;
  tab-size: 4;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
b, strong { font-weight: 700; }
h1, h2, h3, h4, h5, h6, p, pre, dl, dd, figure { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; }
code, pre, kbd, samp { font-family: inherit; font-size: inherit; }

.dim { color: var(--dim); }
.ink { color: var(--ink); }
.add { color: var(--add); }
.del { color: var(--del); }
.wrap { overflow-wrap: anywhere; }

/* Syntax: keywords bold, comments dim, strings ochre, constants violet. */
.k { font-weight: 700; }
.c { color: var(--dim); }
.s { color: var(--string); }
.n { color: var(--constant); }

.page {
  max-width: 110ch;
  margin: 0 auto;
  padding: calc(2 * var(--lh)) 3ch calc(4 * var(--lh));
}
.foot { margin-top: calc(4 * var(--lh)); color: var(--dim); }

/* The home page's header. */
.top { display: flex; justify-content: space-between; gap: 3ch; }
.links { display: flex; gap: 3ch; }

/* Every other page's header: where you are, the tabs, the ref and help. */
.bar {
  padding-bottom: calc(0.5 * var(--lh));
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 4ch;
}
.bar-left { display: flex; flex-wrap: wrap; gap: 0 4ch; min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0 1ch; min-width: 0; overflow-wrap: anywhere; }
.tabs { display: flex; gap: 3ch; }
.tabs a { color: var(--dim); }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); font-weight: 700; }
.bar-right { display: flex; gap: 3ch; min-width: 0; overflow-wrap: anywhere; }
.bar-right > a { flex: none; }

/* The list of repositories and its filter. */
.listhead {
  margin-top: calc(2 * var(--lh));
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 3ch;
}
.title, .listtitle { display: flex; gap: 2ch; }
.filter {
  width: 24ch;
  height: var(--lh);
  padding: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
}
.filter::placeholder { color: var(--dim); opacity: 1; }
.filter:not(:placeholder-shown) { border-bottom-color: var(--ink); }
.filter:focus-visible { border-bottom-color: var(--link); }
.empty { margin-top: var(--lh); }
/* When the filter hides every row, the empty list keeps its margin. */
.rows + .empty { margin-top: 0; }
.note { margin-top: calc(2 * var(--lh)); max-width: 72ch; }
.narrow { display: none; }

/* Lists: one row per line, tinted under the pointer or the j and k keys. */
.rows { margin-top: var(--lh); display: flex; flex-direction: column; }
.bar + .rows, .bar + .listtitle { margin-top: calc(1.5 * var(--lh)); }
.listtitle { margin-top: calc(2 * var(--lh)); }
.listtitle + .rows { margin-top: var(--lh); }
.row {
  display: grid;
  column-gap: 3ch;
  margin: 0 -1ch;
  padding: 0 1ch;
  color: var(--dim);
}
a.row:hover, .row.sel { background: var(--tint); }
.row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .name, .row .hash:first-child, .row .path { color: var(--link); }
/* Dates keep to the right, and long ones spill into the gap on their left. */
.row .date { display: flex; justify-content: flex-end; overflow: visible; }
.repos .row { grid-template-columns: 14ch minmax(0, 1fr) 12ch; }
.mirrors .row { grid-template-columns: 14ch minmax(0, 1fr) 24ch; }
.tree .row { grid-template-columns: 24ch minmax(0, 1fr) 12ch; }
.commits .row { grid-template-columns: 7ch minmax(0, 1fr) 13ch 12ch; }
.refs .row { grid-template-columns: 16ch 7ch minmax(0, 1fr) 12ch; }
.subj, .refs .name { display: flex; gap: 2ch; }
.subj .text { color: var(--ink); }
.subj .text, .refs .name .text { overflow: hidden; text-overflow: ellipsis; }
.refs .row .name { color: var(--dim); }
.refs .name .text { color: var(--link); }
.row .name.ink { color: var(--ink); }
.label { flex: none; }
/* Tags take at most half the subject's room, so the subject stays readable. */
.subj .tags { flex: none; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subj .tag + .tag { margin-left: 1ch; }
.pager { margin-top: var(--lh); display: flex; gap: 3ch; }
.intro { margin-top: calc(1.5 * var(--lh)); max-width: 72ch; }

/* The path above a folder or file. */
.pathline {
  margin-top: calc(1.5 * var(--lh));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 3ch;
}
.pathline .meta { display: flex; gap: 3ch; }
.message { margin-top: calc(2 * var(--lh)); max-width: 72ch; overflow-wrap: anywhere; }
.bar + .message { margin-top: calc(1.5 * var(--lh)); }
.pathline + .message { margin-top: var(--lh); }

/* Tinted bands bleed 1ch past the text, so the text stays on the grid. */
.band { margin: var(--lh) -1ch 0; padding: 0 1ch; background: var(--tint); }

/* The readme page. */
.description { margin-top: calc(1.5 * var(--lh)); max-width: 72ch; overflow-wrap: anywhere; }
.description + .description { margin-top: 0; }
.bar + .band { margin-top: calc(1.5 * var(--lh)); }
.clone { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 4ch; }
.clone .cmd { min-width: 0; overflow-wrap: anywhere; }
.clone-tools { display: flex; gap: 4ch; }
.protos { display: flex; gap: 2ch; }
.protos a { color: var(--dim); }
.protos a.on { color: var(--ink); font-weight: 700; }
.copy { padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.clone.copied { background: var(--add-tint); }
.clone.copied .copy { color: var(--add); font-weight: 700; }
.plain { margin-top: calc(2 * var(--lh)); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Markdown: serif prose at most 64ch wide, code in the page's mono. */
.md {
  margin-top: calc(2 * var(--lh));
  max-width: 64ch;
  display: flex;
  flex-direction: column;
  gap: var(--lh);
  overflow-wrap: break-word;
}
.md :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, th, td, dt, dd, summary, figcaption) {
  font-family: var(--serif);
  font-size: 16px;
  line-height: var(--lh);
  text-wrap: pretty;
}
.md > * { margin: 0; }
.md :is(h1, h2, h3, h4, h5, h6) { font-weight: 600; }
.md > :is(h1, h2, h3, h4, h5, h6):not(:first-child) { margin-top: var(--lh); }
.md :is(h1, h2, h3, h4, h5, h6)::before {
  margin-right: 1ch;
  font: 400 14px var(--mono);
  color: var(--dim);
}
.md h1::before { content: "#"; }
.md h2::before { content: "##"; }
.md h3::before { content: "###"; }
.md h4::before { content: "####"; }
.md h5::before { content: "#####"; }
.md h6::before { content: "######"; }
.md code { font-family: var(--mono); font-size: 14px; background: var(--tint); padding: 0 0.5ch; }
.md pre {
  margin: 0 -1ch;
  padding: calc(0.5 * var(--lh)) 1ch;
  background: var(--tint);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 14px/var(--lh) var(--mono);
}
.md pre code { padding: 0; background: none; }
.md ul, .md ol { margin: 0; padding-left: 2ch; font-family: var(--mono); }
.md ul { list-style-type: "- "; }
.md ol { padding-left: 3ch; }
.md li::marker { color: var(--dim); font-family: var(--mono); font-size: 14px; }
.md li > :is(p, ul, ol, pre) { margin: 0; }
.md blockquote { margin: 0; padding-left: 2ch; border-left: 1px solid var(--rule); color: var(--dim); }
.md blockquote > * + * { margin-top: var(--lh); }
.md hr { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--rule); }
.md img { max-width: 100%; height: auto; vertical-align: middle; }
.md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.md th, .md td { padding: 0 1ch; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.md th { font-weight: 600; }
.md details > * + * { margin-top: var(--lh); }
.md summary { cursor: pointer; }
.md sup, .md sub { line-height: 0; }

/* A file, with line numbers. */
.code { margin: var(--lh) -1ch 0; display: flex; flex-direction: column; }
.cl { display: grid; grid-template-columns: 4ch minmax(0, 1fr); column-gap: 3ch; padding: 0 1ch; }
.code.w5 .cl { grid-template-columns: 5ch minmax(0, 1fr); }
.code.w6 .cl { grid-template-columns: 6ch minmax(0, 1fr); }
.code.w7 .cl { grid-template-columns: 7ch minmax(0, 1fr); }
.ln { text-align: right; color: var(--dim); }
.cl:target { background: var(--tint); }
.cl:target .ln { color: var(--ink); }
.t { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.image { margin-top: var(--lh); }
.image img { max-width: 100%; height: auto; }

/* A commit. */
.commit-message {
  margin-top: calc(1.5 * var(--lh));
  max-width: 72ch;
  display: flex;
  flex-direction: column;
  gap: var(--lh);
  overflow-wrap: anywhere;
}
.commit-message .body { white-space: pre-wrap; }
.details { margin-top: calc(2 * var(--lh)); display: grid; grid-template-columns: 6ch minmax(0, 1fr); column-gap: 3ch; }
.parents { display: flex; flex-wrap: wrap; gap: 0 2ch; }
.summary { margin-top: calc(2 * var(--lh)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 3ch; }
.stats { display: flex; gap: 3ch; }
.toggle { display: flex; gap: 2ch; }
.toggle a { color: var(--dim); }
.filelist { max-width: 72ch; }
.filelist .row { grid-template-columns: minmax(0, 1fr) 5ch 5ch; }
.filelist .add, .filelist .del { text-align: right; }
.filelist .add { color: var(--add); }
.filelist .del { color: var(--del); }
.commit-compact { margin-top: calc(1.5 * var(--lh)); overflow-wrap: anywhere; }
.commit-compact .meta { display: flex; flex-wrap: wrap; gap: 0 3ch; }
.commit-compact + .filehead { margin-top: calc(2 * var(--lh)); }
.file { margin-top: calc(2 * var(--lh)); }
.filehead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 3ch; }
.filehead .path { min-width: 0; overflow-wrap: anywhere; }
.fileinfo { display: flex; flex-wrap: wrap; gap: 0 2ch; }
.filehead > .fileinfo:first-child { gap: 0 3ch; }
.filemsg { margin-top: var(--lh); }
.diff { margin: var(--lh) -1ch 0; display: flex; flex-direction: column; }
.hunk { padding: 0 1ch; background: var(--tint); color: var(--dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.dl { display: grid; grid-template-columns: 4ch 4ch 1ch minmax(0, 1fr); column-gap: 2ch; padding: 0 1ch; }
.w5 .dl { grid-template-columns: 5ch 5ch 1ch minmax(0, 1fr); }
.w6 .dl { grid-template-columns: 6ch 6ch 1ch minmax(0, 1fr); }
.w7 .dl { grid-template-columns: 7ch 7ch 1ch minmax(0, 1fr); }
.no { text-align: right; color: var(--dim); }
.a { background: var(--add-tint); }
.d { background: var(--del-tint); }
.a > .g { color: var(--add); }
.d > .g { color: var(--del); }
.sr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sd { display: grid; grid-template-columns: 3ch 1ch minmax(0, 1fr); column-gap: 1ch; padding: 0 1ch; }
.w4 .sd { grid-template-columns: 4ch 1ch minmax(0, 1fr); }
.w5 .sd { grid-template-columns: 5ch 1ch minmax(0, 1fr); }
.w6 .sd { grid-template-columns: 6ch 1ch minmax(0, 1fr); }
.w7 .sd { grid-template-columns: 7ch 1ch minmax(0, 1fr); }
.sd + .sd { border-left: 1px solid var(--rule); }
.sd.x { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--hatch) 5px 6px); }

/* The help page. */
.section { margin-top: calc(2 * var(--lh)); font-weight: 700; }
.bar + .section { margin-top: calc(1.5 * var(--lh)); }
.sub { margin-top: var(--lh); }
.grid { margin-top: var(--lh); display: grid; column-gap: 3ch; }
.clone-help { grid-template-columns: 6ch minmax(0, max-content) minmax(0, 1fr); }
.terminal-help { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.key-help { grid-template-columns: 7ch minmax(0, 1fr); }

/* The list of keys, over a dimmed page. */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: calc(2 * var(--lh)) 3ch;
  background: var(--veil);
}
.panel { width: 100%; max-width: 52ch; padding: var(--lh) 3ch; background: var(--bg); border: 1px solid var(--rule); }
.panel-head { display: flex; justify-content: space-between; gap: 3ch; }
.keylist { margin-top: var(--lh); display: grid; grid-template-columns: 10ch minmax(0, 1fr); column-gap: 3ch; }
.keylist dd { color: var(--dim); }

/* Phones: less padding, and lists keep only their first and last columns. */
@media (max-width: 640px) {
  .page { padding: calc(1.5 * var(--lh)) 2ch calc(2 * var(--lh)); }
  .top, .links { gap: 2ch; }
  .listhead { display: block; margin-top: calc(1.5 * var(--lh)); }
  .filter { display: block; width: 100%; margin-top: calc(0.5 * var(--lh)); }
  .row { column-gap: 2ch; padding: calc(0.25 * var(--lh)) 1ch; }
  .repos .row, .mirrors .row, .tree .row, .refs .row { grid-template-columns: minmax(0, 1fr) 12ch; }
  .repos .desc, .mirrors .desc, .tree .desc, .refs .hash, .refs .desc, .commits .author { display: none; }
  .commits .row { grid-template-columns: 7ch minmax(0, 1fr) 12ch; }
  .filelist .row { grid-template-columns: minmax(0, 1fr) 5ch 5ch; }
  .note { margin-top: calc(1.5 * var(--lh)); }
  /* Notes go under their commands. */
  .clone-help { grid-template-columns: 6ch minmax(0, 1fr); }
  .clone-help > :nth-child(3n) { grid-column: 2; }
  .terminal-help { grid-template-columns: minmax(0, 1fr); }
  .wide { display: none; }
  .narrow { display: inline; }
}
