/*
 * tapir-cgit.css — a cgit theme in the Tapir palette.
 *
 * Layered ON TOP of the stock cgit.css (load both, in order):
 *     css=/cgit.css
 *     css=/tapir-cgit.css
 * It only restyles colours, typography and a few surfaces — cgit's layout is
 * left intact, so it survives cgit upgrades.
 *
 * Palette: warm cream + deep teal (light), near-black + bright teal (dark) —
 * the same faces as https://tapir.dev. Auto-switches with the OS theme.
 */

@font-face {
    font-family: "Departure Mono";
    src: url("/DepartureMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg:        #fbf8f1;  /* cream page */
    --surface:   #f3eee4;  /* panels: tabs, path, table headers */
    --surface-2: #e9e2d3;  /* hovers, secondary fills */
    --border:    #ddd3c0;
    --text:      #16241f;
    --text-dim:  #4f6259;
    --accent:    #1f6b59;  /* deep teal */
    --accent-2:  #2f8f78;
    --on-accent: #fbf8f1;

    --add-bg: #e4efe8; --add-fg: #1f6b59;
    --del-bg: #f6e6e1; --del-fg: #b3402f;
    --hunk:   #2f8f78;

    /* syntax palette for the rendered README (pygments tokens) — teal-forward
     * with a couple of warm accents, tuned to read on the cream surface. */
    --syn-keyword:  #1f6b59;
    --syn-string:   #5b7c3a;
    --syn-comment:  #7c8a82;
    --syn-number:   #a35a1f;
    --syn-function: #2f8f78;
    --syn-type:     #8a6d1f;
    --syn-builtin:  #2f8f78;

    --tapir-mono: "Departure Mono", ui-monospace, SFMono-Regular, Menlo,
                  Consolas, "DejaVu Sans Mono", monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:        #0a1411;
        --surface:   #10201b;
        --surface-2: #16302a;
        --border:    #1f3d35;
        --text:      #eef4f1;
        --text-dim:  #93a89f;
        --accent:    #6fd7bd;  /* bright teal */
        --accent-2:  #46a890;
        --on-accent: #04130e;

        --add-bg: #11302a; --add-fg: #6fd7bd;
        --del-bg: #3a1f1b; --del-fg: #ff8b8b;
        --hunk:   #6fd7bd;

        --syn-keyword:  #6fd7bd;
        --syn-string:   #9fd17a;
        --syn-comment:  #6f8076;
        --syn-number:   #e0a060;
        --syn-function: #46a890;
        --syn-type:     #d9c27a;
        --syn-builtin:  #46a890;
    }
}

/* ---- page ------------------------------------------------------------- */
/* The cream/near-black bg fills the viewport (body), while the UI itself is
 * capped and auto-centred so it doesn't sprawl on wide screens. */
body { background: var(--bg); margin: 0; }
div#cgit {
    background: var(--bg);
    color: var(--text);
    font-family: var(--tapir-mono);
    font-size: 14px;
    line-height: 1.5;
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 16px 0;   /* breathing room at the top of the page */
    box-sizing: border-box;
}
div#cgit a,
div#cgit a:visited { color: var(--accent); text-decoration: none; }
div#cgit a:hover { color: var(--accent-2); text-decoration: underline; }

/* ---- header ----------------------------------------------------------- */
div#cgit table#header td.main { font-size: 1.2em; }
div#cgit table#header td.main a,
div#cgit table#header td.main a:visited { color: var(--text); font-weight: 700; }
div#cgit table#header td.main a:hover { color: var(--accent); }
div#cgit table#header td.sub {
    color: var(--text-dim);
    border-top: 1px solid var(--border);
}
div#cgit table#header td.logo img { max-height: 72px; }
/* Tagline under the logo/title: "Git repositories hosted at tapir.dev". */
div#cgit table#header td.sub.right { color: var(--text-dim); }

/* ---- tab bar ---------------------------------------------------------- */
div#cgit table.tabs {
    border-bottom: 2px solid var(--accent);
    background: var(--surface);
}
div#cgit table.tabs td a {
    color: var(--text-dim);
    padding: 6px 12px;
    display: inline-block;
}
div#cgit table.tabs td a:hover { color: var(--accent); }
div#cgit table.tabs td a.active {
    color: var(--on-accent);
    background: var(--accent);
    font-weight: 700;
}
div#cgit table.tabs td.form select,
div#cgit table.tabs td.form input,
div#cgit table#header td.form select,
div#cgit table#header td.form input {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    font-family: var(--tapir-mono);
}

/* ---- breadcrumb / path ------------------------------------------------ */
div#cgit div.path {
    background: var(--surface);
    color: var(--text-dim);
    border: 1px solid var(--border);
}
/* Stock cgit insets .content by `padding: 2em` on all sides, so listings sit
 * ~2em narrower than the full-width tabs bar above them. Drop the horizontal
 * inset (keep vertical breathing room) so the branch/log/tree tables line up
 * edge-to-edge with the tab bar. */
div#cgit div.content {
    border-color: var(--border);
    padding: 1.5em 0;
}

/* ---- listings (repos, log, tree) -------------------------------------- */
div#cgit table.list th {
    background: var(--surface-2);
    color: var(--text);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
/* Stock cgit paints rows white/#f7f7f7/#eee — repaint in the tapir palette. */
div#cgit table.list tr,
div#cgit table.list tr:nth-child(odd),
div#cgit table.list tr.nohover,
div#cgit table.list tr.nohover:hover { background: var(--bg); }
div#cgit table.list tr:nth-child(even) { background: var(--surface); }
div#cgit table.list tr.logheader { background: var(--surface-2); }
div#cgit table.list tr:hover { background: var(--surface-2); }
div#cgit table.list td { border: none; }
div#cgit table.list td a { color: var(--accent); }
/* stock cgit overrides this hover to #00f (blue) — repaint it teal. */
div#cgit table.list td a:hover { color: var(--accent-2); }
div#cgit table.list td a.ls-dir { font-weight: 700; }
/* Stock cgit marks the summary branch + tree tables `list nowrap`, forcing
 * white-space:nowrap on every cell — so a long commit subject / filename grows
 * the table past the full-width tab bar and bleeds out of the column. Let just
 * the 2nd column (subject / name) wrap; branch/author/age/size stay single-line
 * so the table tracks the tab bar's width instead of overflowing it. */
div#cgit table.list.nowrap td:nth-child(2) { white-space: normal; }

/* blame + side-by-side diff zebra/linenos */
div#cgit table.blame div.alt:nth-child(even) { background: var(--surface); }
div#cgit table.blame div.alt:nth-child(odd)  { background: var(--bg); }
div#cgit table.ssdiff td.lineno { background: var(--surface-2); color: var(--text-dim); }

/* ---- commit / blob / diff --------------------------------------------- */
div#cgit table.commit-info,
div#cgit table.commit-info th { background: var(--surface); color: var(--text); }
div#cgit div.commit-subject { color: var(--text); font-weight: 700; }
div#cgit div.commit-msg, div#cgit div.notes { color: var(--text); }

div#cgit table.blob td.linenumbers a { color: var(--text-dim); }
div#cgit table.blob td.linenumbers a:hover,
div#cgit table.ssdiff td.lineno a:hover { color: var(--accent-2); }
div#cgit table.blob td.lines pre { color: var(--text); }

div#cgit table.diff td div.head { color: var(--text); font-weight: 700; }
div#cgit table.diff td div.hunk { color: var(--hunk); }
div#cgit table.diff td div.add { color: var(--add-fg); background: var(--add-bg); }
div#cgit table.diff td div.del { color: var(--del-fg); background: var(--del-bg); }

/* commit/diff panels (stock cgit paints these #eee with #aaa borders) */
div#cgit div.cgit-panel table,
div#cgit table.diffstat {
    background: var(--surface);
    border-color: var(--border);
}
div#cgit div.cgit-panel th,
div#cgit table.diffstat th { background: var(--surface-2); color: var(--text); }
div#cgit div.cgit-panel td,
div#cgit table.diffstat td { color: var(--text); }
div#cgit table.diffstat td.add a { color: var(--add-fg); }
div#cgit table.diffstat td.del a { color: var(--del-fg); }
div#cgit table.diffstat td.upd a { color: var(--accent); }   /* stock: blue */
div#cgit table.diffstat td.graph td.add { background: var(--add-fg); }
div#cgit table.diffstat td.graph td.rem { background: var(--del-fg); }
div#cgit div.diffstat-summary,
div#cgit div.diffstat-header { color: var(--text-dim); }

/* ---- rendered README / "about" tab ------------------------------------ */
/* The stock about-filter (md2html) injects its OWN inline <style>: a GitHub
 * light .markdown-body sheet + a light pygments "pastie" palette. Those are
 * class-based, so these id-scoped (div#cgit ...) rules win and repaint the
 * whole thing in the tapir palette — light/dark aware via the vars above. */

/* headings, rules, links */
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 { color: var(--text); }
div#cgit .markdown-body h1,
div#cgit .markdown-body h2 { border-bottom: 1px solid var(--border); padding-bottom: 4px; }
div#cgit .markdown-body h6 { color: var(--text-dim); }
div#cgit .markdown-body a { color: var(--accent); }
div#cgit .markdown-body a:hover { color: var(--accent-2); }
/* The TOC extension wraps each heading's text in <a class="toclink">; the
 * filter hardcodes it black (unreadable in dark mode). The extra div.content
 * out-specifies that id-level rule so the anchor inherits the heading colour. */
div#cgit div.content .markdown-body h1 a.toclink,
div#cgit div.content .markdown-body h2 a.toclink,
div#cgit div.content .markdown-body h3 a.toclink,
div#cgit div.content .markdown-body h4 a.toclink,
div#cgit div.content .markdown-body h5 a.toclink,
div#cgit div.content .markdown-body h6 a.toclink { color: inherit; }
div#cgit .markdown-body hr { border: none; border-top: 1px solid var(--border); }

/* inline code + code blocks (the filter hardcodes #f8f8f8 / #ccc / #eaeaea) */
div#cgit .markdown-body code,
div#cgit .markdown-body tt {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
}
div#cgit .markdown-body pre,
div#cgit .markdown-body .highlight pre,
div#cgit .markdown-body .highlight {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
div#cgit .markdown-body pre code,
div#cgit .markdown-body pre tt { background: transparent; border: none; }

/* blockquotes + tables */
div#cgit .markdown-body blockquote {
    color: var(--text-dim);
    border-left: 4px solid var(--accent);
}
div#cgit .markdown-body table th,
div#cgit .markdown-body table td { border: 1px solid var(--border); }
div#cgit .markdown-body table th { background: var(--surface-2); color: var(--text); }
div#cgit .markdown-body table tr { background: var(--bg); border-top: 1px solid var(--border); }
div#cgit .markdown-body table tr:nth-child(2n) { background: var(--surface); }

/* pygments tokens — remap the light "pastie" palette to the tapir syntax vars.
 * Grouped by token family so unlisted tokens fall back to --text. */
div#cgit .highlight { color: var(--text); }
div#cgit .highlight .hll { background: var(--surface-2); }
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 .nt,
div#cgit .highlight .ow { color: var(--syn-keyword); font-weight: bold; }
div#cgit .highlight .c,  div#cgit .highlight .c1, div#cgit .highlight .cm,
div#cgit .highlight .cs, div#cgit .highlight .ch, div#cgit .highlight .cp,
div#cgit .highlight .cpf { color: var(--syn-comment); font-style: italic; }
div#cgit .highlight .s,  div#cgit .highlight .s1, div#cgit .highlight .s2,
div#cgit .highlight .sb, div#cgit .highlight .sc, div#cgit .highlight .sd,
div#cgit .highlight .se, div#cgit .highlight .sh, div#cgit .highlight .si,
div#cgit .highlight .sx, div#cgit .highlight .sr, div#cgit .highlight .ss,
div#cgit .highlight .dl, div#cgit .highlight .sa { color: var(--syn-string); }
div#cgit .highlight .m,  div#cgit .highlight .mi, div#cgit .highlight .mf,
div#cgit .highlight .mh, div#cgit .highlight .mo, div#cgit .highlight .mb,
div#cgit .highlight .il { color: var(--syn-number); }
div#cgit .highlight .nf, div#cgit .highlight .fm { color: var(--syn-function); }
div#cgit .highlight .nc, div#cgit .highlight .nn, div#cgit .highlight .no,
div#cgit .highlight .ne { color: var(--syn-type); }
div#cgit .highlight .nb, div#cgit .highlight .bp,
div#cgit .highlight .o { color: var(--syn-builtin); }
div#cgit .highlight .na, div#cgit .highlight .nv, div#cgit .highlight .vc,
div#cgit .highlight .vg, div#cgit .highlight .vi,
div#cgit .highlight .n,  div#cgit .highlight .p { color: var(--text); }
div#cgit .highlight .gi { color: var(--add-fg); background: var(--add-bg); }
div#cgit .highlight .gd { color: var(--del-fg); background: var(--del-bg); }
div#cgit .highlight .gh, div#cgit .highlight .gu { color: var(--accent); font-weight: bold; }
div#cgit .highlight .ge { font-style: italic; }
div#cgit .highlight .gs { font-weight: bold; }
div#cgit .highlight .err { color: var(--del-fg); background: var(--del-bg); }

/* ---- misc ------------------------------------------------------------- */
div#cgit div.error { color: var(--del-fg); background: var(--del-bg); border-color: var(--border); }
div#cgit a.button, div#cgit input.txt { border: 1px solid var(--border); }
div#cgit table.list td.logsubject a,
div#cgit table.list td.logsubject a:visited { color: var(--text); }
div#cgit table.list td.logsubject a:hover { color: var(--accent); }
div#cgit td.lines pre { font-family: var(--tapir-mono); }

/* ---- footer ----------------------------------------------------------- */
/* The custom tapir-cgit-footer.html (cgitrc `footer=`) replaces cgit's
 * "generated by…" line. Centred nav row of tapir.dev links, dimmed, with
 * border-coloured separators between items. */
div#cgit .footer {
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    margin-top: 24px;
    padding: 12px 0 20px;
    text-align: center;
    font-size: 0.92em;
}
div#cgit .footer a,
div#cgit .footer a:visited { color: var(--text-dim); }
div#cgit .footer a:hover { color: var(--accent); }
div#cgit .footer .sep { color: var(--border); margin: 0 6px; }