/* sl0p.foo cgit reskin  ->  /opt/sl0p/git-static/sl0p-cgit.css
   Layered ON TOP of the stock /cgit.css (cgitrc lists stock first, this second).

   IMPORTANT: stock cgit.css scopes ~186 rules under `div#cgit ...`, which
   outranks bare selectors (`a`, `.tabs td a`). So every override here is scoped
   under `div#cgit` too, matching stock's specificity exactly — then load order
   (this sheet is second) makes ours win. Deep rules (diff/blob/list) mirror the
   stock selector shape for the same reason. Also: stock sets row colors on the
   <tr> (tr{background:white} + odd/even), so zebra/hover overrides MUST target
   <tr>, not <td>. Fonts come from /vendor/fonts.css (via head-include.html).

   Palette: grayscale CRT (sl0p's "mono" flavour) — neutral tones, no accent hue.
   To re-theme, edit the channel vars in :root; everything derives from them. */

:root {
  /* accent channel (neutral gray instead of phosphor green) */
  --accent-rgb: 228 233 237;
  --accent-dim-rgb: 124 132 137;
  --accent:        rgb(var(--accent-rgb));
  --accent-dim:    rgb(var(--accent-dim-rgb));
  --accent-bright: #f6f8fa;
  --hi:            #c8cdd2;   /* secondary emphasis (sha1, section, dirs) */

  --text:  #cfd4d8;  --muted: #868c91;  --faint: #5c6266;
  --bg:    #06070a;  --panel: rgb(20 23 27);  --panel-2: #0d0f12;

  --line:      rgb(var(--accent-dim-rgb) / .35);
  --line-soft: rgb(var(--accent-dim-rgb) / .18);
  --wash:      rgb(var(--accent-rgb) / .07);    /* hover highlight */
  --zebra:     rgb(255 255 255 / .025);         /* even-row stripe */

  /* diffs read in grayscale via LIGHTNESS, not hue: add = bright on light
     wash, del = dim on dark wash (the +/- glyphs carry the semantics too). */
  --add:    #e8edf0;  --add-bg: rgb(255 255 255 / .06);
  --del:    #8a9196;  --del-bg: rgb(0 0 0 / .24);
  --hunk:   #aab0b5;

  --mono: 'JetBrainsMono Nerd Font Mono','Share Tech Mono',ui-monospace,monospace;
  --display: 'VT323','Share Tech Mono',monospace;
}

html, body {
  background:
    radial-gradient(120% 90% at 50% -10%, #14171b 0%, #0d0f12 45%, #060709 100%) fixed;
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  min-height: 100vh;
}

/* ── the centering wrapper ──────────────────────────────────────────────── */
div#cgit {
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 20px 64px;
  font-family: var(--mono);
  /* stock sets `div#cgit { color:#333; background:white }`, which every child
     inherits unless overridden — that's why un-themed text (commit message,
     subject, misc) rendered dark. Set the base text color once, here. */
  color: var(--text);
  background: none;
}

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

/* ── header ─────────────────────────────────────────────────────────────── */
div#cgit table#header { width: 100%; margin-bottom: 8px; }
div#cgit table#header td.logo { width: 72px; padding-right: 16px; vertical-align: top; }
div#cgit table#header td.logo img {
  width: 56px; height: 56px; border-radius: 8px;
  border: 1px solid var(--line); box-shadow: 0 0 18px rgb(0 0 0 / .45);
  filter: grayscale(1) contrast(1.05); }
div#cgit table#header td.main,
div#cgit table#header td.main a {
  font-family: var(--display); font-size: 34px; letter-spacing: 1px;
  color: var(--accent); text-shadow: 0 0 12px rgb(var(--accent-rgb) / .18); }
div#cgit table#header td.sub {
  color: var(--muted); border-top: 1px solid var(--line-soft);
  padding: 4px 0 0 0; font-size: 12px; letter-spacing: .3px; }

/* ── nav tabs ───────────────────────────────────────────────────────────── */
div#cgit table.tabs { width: 100%; border-bottom: 1px solid var(--line);
  margin: 14px 0 18px; }
div#cgit table.tabs td a {
  color: var(--muted); padding: 6px 12px; display: inline-block;
  text-transform: lowercase; letter-spacing: .5px; }
div#cgit table.tabs td a:hover {
  color: var(--accent-bright); text-decoration: none; background: var(--wash); }
div#cgit table.tabs td a.active {
  color: var(--bg); background: var(--accent); border-radius: 4px 4px 0 0;
  text-shadow: none; font-weight: 700; }
div#cgit table.tabs td.form input,
div#cgit table.tabs td.form select {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px;
  font-family: var(--mono); }

/* ── content + list tables ──────────────────────────────────────────────── */
div#cgit div.content { border: none; padding: 0; }
/* the "path: root/dir/file" breadcrumb bar (stock: black-on-#eee -> our light
   links vanished on it). Make it a dark header strip. */
div#cgit div.path {
  color: var(--muted); background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: 6px;
  margin: 0 0 10px; padding: 7px 14px; font-size: 12px; }
div#cgit div.path a { color: var(--accent); }
div#cgit table.list {
  border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden;
  border-collapse: separate; border-spacing: 0; width: 100%; }
/* Row backgrounds on the <tr> (stock hardcodes tr{background:white}). */
div#cgit table.list tr,
div#cgit table.list tr:nth-child(odd)  { background: transparent; }
div#cgit table.list tr:nth-child(even) { background: var(--zebra); }
div#cgit table.list tr.logheader       { background: var(--panel); }
div#cgit table.list tr:hover,
div#cgit table.list tr:nth-child(even):hover,
div#cgit table.list tr:nth-child(odd):hover { background: var(--wash); }
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; }
div#cgit table.blame div.alt:nth-child(odd)  { background: transparent; }
div#cgit table.blame div.alt:nth-child(even) { background: var(--zebra); }

div#cgit table.list th {
  background: var(--panel); color: var(--accent); text-align: left;
  padding: 8px 12px; font-weight: 700; border-bottom: 1px solid var(--line);
  text-transform: lowercase; letter-spacing: .5px; }
div#cgit table.list td { padding: 6px 12px; border: none; color: var(--text); }
div#cgit table.list td a { color: var(--accent); }
div#cgit table.list td a.ls-dir { color: var(--hi); font-weight: 700; }
/* stock paints these links black + a BLUE (#00f) hover, both more specific than
   the generic `a`/`a:hover` — override rest + hover here so nothing goes blue. */
div#cgit table.list td a:hover,
div#cgit table.list td a.ls-dir:hover { color: var(--accent-bright); }
div#cgit table.list td.logmsg { color: var(--text); }
div#cgit td.reposection {
  color: var(--hi); font-family: var(--display); font-size: 18px; padding-top: 16px; }
div#cgit td.desc, div#cgit .desc { color: var(--muted); }

/* ── commit / diff view ─────────────────────────────────────────────────── */
div#cgit .sha1, div#cgit .oid { font-family: var(--mono); color: var(--hi); }
div#cgit .age { color: var(--faint); }
div#cgit table.commit-info,
div#cgit table.diffstat {
  border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel-2); }
div#cgit table.commit-info th,
div#cgit table.diffstat th { background: var(--panel); color: var(--accent); text-align: left; }
div#cgit div.commit-subject { color: var(--accent-bright); }
div#cgit div.commit-msg { color: var(--text); }
/* the little cgit-panel box (stock gives its table a light #eee bg) */
div#cgit div.cgit-panel table { background-color: var(--panel); border: 1px solid var(--line-soft); }
div#cgit table.diffstat td.add a { color: var(--text); }
div#cgit table.diffstat td.del a { color: var(--muted); }
div#cgit table.diffstat td.upd a { color: var(--muted); }   /* stock: blue */
/* ref decorations (branch/tag/remote chips) — stock uses colored bg; go gray */
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 {
  color: var(--text); background: rgb(var(--accent-dim-rgb) / .22);
  border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; margin: 0 2px; }

div#cgit table.diff { background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: 8px; }
div#cgit table.diff td { font-family: var(--mono); }
div#cgit table.diff td div.head {
  color: var(--accent-bright); font-weight: 700; background: var(--wash); }
div#cgit table.diff td div.hunk { color: var(--hunk); background: rgb(255 255 255 / .04); }
div#cgit table.diff td div.add  { color: var(--add); background: var(--add-bg);
  box-shadow: inset 2px 0 0 rgb(255 255 255 / .35); }
div#cgit table.diff td div.del  { color: var(--del); background: var(--del-bg);
  box-shadow: inset 2px 0 0 rgb(0 0 0 / .5); }

/* ── colour holdouts -> grayscale ───────────────────────────────────────────
   A few stock rules still use hue (red/green/rainbow) that our diffstat/diff
   overrides above don't touch. Re-express them in the same LIGHTNESS scheme:
   add = bright, del = dim, the +/- glyph carries the semantics. */

/* +N / -N line-count tallies (log, summary, commit-info diffstat totals).
   stock: insertions #080 green, deletions #800 red. */
div#cgit span.insertions { color: var(--add); }
div#cgit span.deletions  { color: var(--del); }

/* commit graph (log --graph view): stock paints the 6 lane columns in a full
   red/green/yellow/blue/magenta/cyan rainbow. Keep lanes distinguishable via 6
   neutral brightness steps instead of hue. */
div#cgit table.list td.commitgraph .column1 { color: #f0f3f5; }
div#cgit table.list td.commitgraph .column2 { color: #b8bec3; }
div#cgit table.list td.commitgraph .column3 { color: #8a9196; }
div#cgit table.list td.commitgraph .column4 { color: #d2d7db; }
div#cgit table.list td.commitgraph .column5 { color: #a0a7ac; }
div#cgit table.list td.commitgraph .column6 { color: #6f767b; }

/* :target line-number marker arrow (stock: red) in blob + side-by-side diff. */
div#cgit table.blob td.linenumbers a:target:before,
div#cgit table.ssdiff td.lineno a:target:before { color: var(--accent-bright); }

/* side-by-side diff (?ss=1): stock uses black-on-pastel green/red/yellow cells,
   invisible on our dark card. Recolor to grayscale washes with light text,
   mirroring the unified-diff add=bright / del=dim scheme. */
div#cgit table.ssdiff td { border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft); }
div#cgit table.ssdiff td.add,
div#cgit table.ssdiff td.add_dark { color: var(--add); background: var(--add-bg); }
div#cgit table.ssdiff td.add_dark { background: rgb(255 255 255 / .11); }
div#cgit table.ssdiff span.add { background: rgb(255 255 255 / .16); color: var(--add);
  font-weight: 700; }
div#cgit table.ssdiff td.del,
div#cgit table.ssdiff td.del_dark { color: var(--del); background: var(--del-bg); }
div#cgit table.ssdiff td.del_dark { background: rgb(0 0 0 / .34); }
div#cgit table.ssdiff span.del { background: rgb(0 0 0 / .42); color: var(--text);
  font-weight: 700; }
div#cgit table.ssdiff td.changed,
div#cgit table.ssdiff td.changed_dark { color: var(--hunk); background: rgb(255 255 255 / .05); }
div#cgit table.ssdiff td.changed_dark { background: rgb(255 255 255 / .09); }
div#cgit table.ssdiff td.lineno { color: var(--faint); background: var(--panel); }
div#cgit table.ssdiff td.lineno a { color: var(--faint); }
div#cgit table.ssdiff td.hunk { color: var(--hunk); background: rgb(255 255 255 / .04); }

/* commit-age column (log/summary): stock fades bright-green (fresh) -> gray
   (old). Keep the same "fresh = loud, old = quiet" gradient, but in neutral
   brightness steps so nothing goes green. */
div#cgit span.age-mins   { color: var(--accent-bright); font-weight: 700; }
div#cgit span.age-hours  { color: #cfd4d8; }
div#cgit span.age-days   { color: #a4abb0; }
div#cgit span.age-weeks  { color: #868c91; }
div#cgit span.age-months { color: #6b7176; }
div#cgit span.age-years  { color: #565c60; }

/* ── blob / tree ────────────────────────────────────────────────────────── */
div#cgit table.blob {
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 8px; }
div#cgit table.blob pre { font-family: var(--mono); }
/* stock cgit.css paints code text `color: black` (invisible on dark) — the
   Pygments source-filter isn't emitting spans, so override the base color. */
div#cgit table.blob td.lines,
div#cgit table.blob td.hashes,
div#cgit table.blob td.lines pre { color: var(--text); }
div#cgit table.blob td.linenumbers { border-right: 1px solid var(--line-soft); }
div#cgit table.blob td.linenumbers a { color: var(--faint); }
div#cgit table.blob td.linenumbers a:hover { color: var(--accent); }
/* if/when Pygments highlighting is enabled, keep its output legible on dark */
/* ── syntax highlighting (grayscale override of Pygments' light 'pastie') ──
   The source-filter injects a LIGHT theme inline per blob (class-based spans +
   a <style> block). We override its token classes to grayscale; our selectors
   (div#cgit .highlight .X) outrank the inline `.highlight .X` rules
   regardless of order. Tone is carried by brightness + weight, not hue. */
div#cgit .highlight { background: transparent; color: var(--text); }
div#cgit .highlight pre { margin: 0; background: transparent; }
div#cgit .highlight .hll { background: rgb(255 255 255 / .06); }
div#cgit .highlight .c,  div#cgit .highlight .ch,
div#cgit .highlight .cm, div#cgit .highlight .cp,
div#cgit .highlight .cpf,div#cgit .highlight .c1,
div#cgit .highlight .cs {
  color: var(--faint); font-style: italic; font-weight: normal; background: transparent; }
div#cgit .highlight .k,  div#cgit .highlight .kc,
div#cgit .highlight .kd, div#cgit .highlight .kn,
div#cgit .highlight .kp, div#cgit .highlight .kr,
div#cgit .highlight .kt, div#cgit .highlight .ow {
  color: var(--accent-bright); font-weight: 600; }
div#cgit .highlight .s,  div#cgit .highlight .sa,
div#cgit .highlight .sb, div#cgit .highlight .sc,
div#cgit .highlight .dl, div#cgit .highlight .sd,
div#cgit .highlight .s2, div#cgit .highlight .se,
div#cgit .highlight .sh, div#cgit .highlight .si,
div#cgit .highlight .sx, div#cgit .highlight .sr,
div#cgit .highlight .s1, div#cgit .highlight .ss {
  color: #aab0b5; background: transparent; }
div#cgit .highlight .m,  div#cgit .highlight .mb,
div#cgit .highlight .mf, div#cgit .highlight .mh,
div#cgit .highlight .mi, div#cgit .highlight .mo,
div#cgit .highlight .il, div#cgit .highlight .no { color: var(--hi); }
div#cgit .highlight .nf, div#cgit .highlight .fm,
div#cgit .highlight .nc, div#cgit .highlight .nd,
div#cgit .highlight .nn, div#cgit .highlight .ne,
div#cgit .highlight .nt { color: var(--hi); font-weight: 600; }
div#cgit .highlight .nb, div#cgit .highlight .bp { color: #c8cdd2; }
div#cgit .highlight .o, div#cgit .highlight .p { color: var(--muted); }
div#cgit .highlight .n,  div#cgit .highlight .na,
div#cgit .highlight .nv, div#cgit .highlight .nx,
div#cgit .highlight .nl, div#cgit .highlight .py,
div#cgit .highlight .vc, div#cgit .highlight .vg,
div#cgit .highlight .vi { color: var(--text); }
div#cgit .highlight .gd { color: var(--del); background: var(--del-bg); }
div#cgit .highlight .gi { color: var(--add); background: var(--add-bg); }
div#cgit .highlight .gh, div#cgit .highlight .gu {
  color: var(--hi); font-weight: 600; }
div#cgit .highlight .err { color: var(--text); background: transparent; border: none; }
div#cgit .highlight .special { background: rgb(255 255 255 / .06); color: var(--text); }

/* ── about / rendered README ────────────────────────────────────────────── */
div#cgit div.about { line-height: 1.65; }
div#cgit div.about h1, div#cgit div.about h2, div#cgit div.about h3 {
  color: var(--accent); border-bottom: 1px solid var(--line-soft); padding-bottom: 4px; }
div#cgit div.about a { color: var(--accent); }
div#cgit div.about code, div#cgit div.about pre {
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: 5px; padding: .1em .35em; font-family: var(--mono); }
div#cgit div.about pre { padding: 12px; overflow: auto; }
div#cgit div.about blockquote {
  border-left: 3px solid var(--accent-dim); color: var(--muted); margin: 0; padding-left: 14px; }

/* ── readme card (wraps both the markdown-body AND the plain-text <pre>) ────
   Stock leaves #summary unstyled, so content sat flush to the edge (looked
   wider than the padded table cells above). Give it the same card look as the
   tables + inner padding so the text lines up, and contain long lines. */
div#cgit #summary {
  color: var(--text);
  background: rgb(255 255 255 / .012);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  margin-top: 14px;
  padding: 14px 20px;
  overflow-x: auto;
  box-sizing: border-box;
}
/* plain-text readme: txt2html emits a bare <pre> (no markdown-body). Give it
   light text and wrap long lines instead of overflowing the card. */
div#cgit #summary > pre {
  color: var(--text); margin: 0; background: transparent; border: 0;
  font-family: var(--mono); white-space: pre-wrap; word-wrap: break-word; }

/* ── rendered markdown (readme on summary + about, via md2html) ────────────
   md2html injects its OWN light github-ish <style> into the page body: black
   headings, black a.toclink (the heading text!), white code/table backgrounds.
   Both summary + about wrap it in <div id='summary'>, so we scope under #summary
   (2 IDs) to outrank every md2html rule regardless of source order. */
div#cgit #summary .markdown-body { color: var(--text); }
div#cgit #summary .markdown-body h1, div#cgit #summary .markdown-body h2,
div#cgit #summary .markdown-body h3, div#cgit #summary .markdown-body h4,
div#cgit #summary .markdown-body h5 { color: var(--accent); }
div#cgit #summary .markdown-body h6 { color: var(--muted); }
div#cgit #summary .markdown-body h1, div#cgit #summary .markdown-body h2 {
  border-bottom: 1px solid var(--line-soft); padding-bottom: 4px; }
/* heading text is wrapped in a.toclink, which md2html forces to black */
div#cgit #summary .markdown-body h1 a.toclink, div#cgit #summary .markdown-body h2 a.toclink,
div#cgit #summary .markdown-body h3 a.toclink, div#cgit #summary .markdown-body h4 a.toclink,
div#cgit #summary .markdown-body h5 a.toclink, div#cgit #summary .markdown-body h6 a.toclink {
  color: inherit; }
div#cgit #summary .markdown-body a { color: var(--accent); }
div#cgit #summary .markdown-body a:hover { color: var(--accent-bright); }
div#cgit #summary .markdown-body hr { border: 0; border-top: 1px solid var(--line-soft); }
div#cgit #summary .markdown-body blockquote {
  border-left: 3px solid var(--accent-dim); color: var(--muted); }
/* inline code + fenced blocks -> dark */
div#cgit #summary .markdown-body code, div#cgit #summary .markdown-body tt {
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: 4px; color: var(--text); }
div#cgit #summary .markdown-body pre, div#cgit #summary .markdown-body .highlight pre {
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: 6px; color: var(--text); }
div#cgit #summary .markdown-body pre code, div#cgit #summary .markdown-body pre tt {
  background: transparent; border: none; }
/* tables -> dark zebra */
div#cgit #summary .markdown-body table th, div#cgit #summary .markdown-body table td {
  border: 1px solid var(--line-soft); }
div#cgit #summary .markdown-body table th { background: var(--panel); color: var(--accent); }
div#cgit #summary .markdown-body table tr { background: transparent; }
div#cgit #summary .markdown-body table tr:nth-child(2n) { background: var(--zebra); }

/* ── footer + pager ─────────────────────────────────────────────────────── */
div#cgit div.footer {
  color: var(--faint); border-top: 1px solid var(--line-soft);
  margin-top: 26px; padding-top: 10px; font-size: 11px; letter-spacing: .3px; }
div#cgit div.footer a { color: var(--muted); }
div#cgit ul.pager a {
  border: 1px solid var(--line-soft); border-radius: 4px; padding: 2px 8px; color: var(--muted); }
div#cgit ul.pager a:hover { border-color: var(--line); color: var(--accent-bright); }
div#cgit .error { color: var(--text); }

/* ── folder README (ui-tree.c: rendered under a directory listing) ───────── */
div#cgit #summary.dir-readme {
  margin-top: 22px; padding-top: 4px; border-top: 1px solid var(--line-soft); }

/* ── click-to-copy (sl0p-cgit.js): copy buttons + CRT toast ──────────────── */
div#cgit button.sl0p-copy {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  margin-left: 6px; padding: 0 6px; font-family: var(--mono); font-size: 11px;
  line-height: 1.5; color: var(--muted); background: rgb(255 255 255 / .04);
  border: 1px solid var(--line-soft); border-radius: 4px; vertical-align: baseline;
  transition: color .12s ease, border-color .12s ease, background .12s ease; }
div#cgit button.sl0p-copy:hover {
  color: var(--accent-bright); border-color: var(--line); background: var(--wash); }
div#cgit button.sl0p-copy.ok { color: var(--accent-bright); border-color: var(--accent-dim); }
div#cgit button.sl0p-copy.ok::after { content: " \2713"; }

#sl0p-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 12px);
  z-index: 999; padding: 9px 16px; border-radius: 6px; font-family: var(--mono);
  font-size: 13px; letter-spacing: .5px; color: var(--accent-bright);
  background: rgb(12 14 17 / .96); border: 1px solid var(--line);
  box-shadow: 0 0 18px rgb(0 0 0 / .5), inset 0 0 14px rgb(0 0 0 / .4);
  opacity: 0; pointer-events: none; max-width: 90vw; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .18s ease, transform .18s ease; }
#sl0p-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── auto-linked repo paths (md2html pathlink): hint they're auto-detected ── */
div#cgit #summary .markdown-body a.pathlink {
  text-decoration: underline dotted; text-underline-offset: 2px;
  text-decoration-color: var(--line); }
div#cgit #summary .markdown-body a.pathlink:hover {
  text-decoration-color: var(--accent-dim); }