/* hachem.wtf -- every page is a man page. same font and grays as cgit (cgit/cgit.css). */

/* Maple Mono (OFL), self-hosted. four files cover every weight/style the css asks for. */
@font-face {
    font-family: "maple";
    src: url("/fonts/maple-mono-regular.woff2?h=1bbc21ff") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "maple";
    src: url("/fonts/maple-mono-bold.woff2?h=590b05fe") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "maple";
    src: url("/fonts/maple-mono-italic.woff2?h=cc012e4f") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "maple";
    src: url("/fonts/maple-mono-bolditalic.woff2?h=5202592c") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* fallback: a JuliaMono subset covering the math glyphs Maple Mono lacks
   (∮ ∇ ⟂ ⟺ ∝, some sub/superscripts). per-glyph fallback picks it up. */
@font-face {
    font-family: "ucmono";
    src: url("/fonts/ucmono.woff2?h=f1a7d2ec") format("woff2");
    font-display: swap;
}

html { background: #ffffff; }

body {
    margin: 0;
    color: #1a1a1a;
    background: #ffffff;
    font-family: "maple", "ucmono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: 16px;
    line-height: 1.6;
}

::selection { background: #ededed; }

a {
    color: #1a1a1a;
    text-decoration: underline dashed;
    text-decoration-color: #999999;
    text-underline-offset: 2px;
}

a:hover { text-decoration-color: #1a1a1a; }
a:focus-visible { outline: 1px dashed #1a1a1a; outline-offset: 2px; }

/* a terminal's worth of width: man formats for 80 columns */
#page {
    max-width: 80ch;
    margin: 0 auto;
    padding: 2.4em 2ch 1em;
}

/* the shell prompt above the page and after it, as if man had just run and quit */
.prompt { margin: 0 0 1.6em; color: #999999; }
.prompt a { color: inherit; text-decoration: none; }
.prompt a:hover { color: #1a1a1a; text-decoration: underline dashed; }
.prompt b { color: #1a1a1a; font-weight: normal; }

.cursor {
    display: inline-block;
    width: 1ch;
    height: 1.15em;
    vertical-align: -0.2em;
    background: #1a1a1a;
    animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* running header and footer: HECC(7)   hachem.wtf manual   HECC(7) */
.th, .tf {
    display: flex;
    justify-content: space-between;
    gap: 2ch;
    white-space: nowrap;
}

.th { margin-bottom: 1.6em; }
.tf { margin: 1.6em 0; }
.th a { text-decoration: none; }
.th a:hover { text-decoration: underline dashed; }

/* section names sit at the margin and everything under them is indented 7 columns.
   headings are body-sized and bold, and one blank line separates blocks. */
.man { padding-left: 7ch; overflow-wrap: break-word; }

.man h2, .man h3 {
    font-size: 1em;
    font-weight: bold;
    line-height: inherit;
    scroll-margin-top: 1.6em;
}

.man h2 { margin: 1.6em 0 0 -7ch; text-transform: uppercase; }
.man h2:first-child { margin-top: 0; }
.man h3 { margin: 1.6em 0 0 -4ch; }

.man p, .man ul, .man ol, .man pre, .man blockquote { margin: 0 0 1.6em; }

/* literal text is bold, the way man prints it */
.man code { font-weight: bold; }

.man pre {
    padding: 0.8em 2ch;
    overflow-x: auto;
    background: #f2f2f2;
    font-size: 0.85em;
    line-height: 1.5;
    scrollbar-width: thin;
    scrollbar-color: #cccccc transparent;
}

.man pre code { font-weight: normal; }

/* lists hang their dash in the indent */
.man ul, .man ol { padding-left: 2ch; }
.man ol { padding-left: 3ch; }
.man ul { list-style: none; }
.man ul > li { position: relative; }
.man ul > li::before { content: "-"; position: absolute; left: -2ch; color: #999999; }
.man li > p { margin-bottom: 0.8em; }

.man blockquote {
    margin-left: 0;
    padding-left: 2ch;
    border-left: 1px dashed #cccccc;
    color: #555555;
}

.man hr { border: 0; border-top: 1px dashed #cccccc; margin: 0 0 1.6em; }

/* SYNOPSIS: the page's name, then a [--flag] per section, wrapping under the first */
.synopsis {
    padding-left: calc(var(--hang) * 1ch);
    text-indent: calc(var(--hang) * -1ch);
}

/* each [--flag] moves to the next line whole, and only breaks if it's wider than a line */
.synopsis span {
    display: inline-block;
    max-width: 100%;
    text-indent: 0;
    overflow-wrap: anywhere;
    color: #999999;
}
.synopsis span a { font-weight: bold; text-decoration: none; }
.synopsis span a:hover { text-decoration: underline dashed; }

/* a section's own page lists its pages the way whatis(1) does */
.man ul.whatis {
    display: grid;
    grid-template-columns: max-content auto;
    gap: 0.2em 2ch;
    padding: 0;
}

.man ul.whatis li { display: contents; }
.man ul.whatis li::before { content: none; }
.man ul.whatis span::before { content: "- "; }

/* KaTeX output (see math.js) */
.man .katex { font-size: 1.08em; }
.man .katex .math-punct { font-family: "maple", "ucmono", monospace; font-size: 0.926em; }
.man .katex-display { margin: 0 0 1.6em; overflow-x: auto; overflow-y: hidden; }

/* less's prompt line, in reverse video at the bottom of the window (pager.js fills it) */
body { padding-bottom: 2.2em; }

#status {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.3em 0;
    background: #ffffff;
}

#status div {
    max-width: 80ch;
    margin: 0 auto;
    padding: 0 2ch;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

#status span { background: #1a1a1a; color: #ffffff; }

/* h: less's help screen, over the page */
#help {
    position: fixed;
    inset: 0;
    overflow: auto;
    background: #ffffff;
}

#help[hidden] { display: none; }
#help pre { max-width: 80ch; margin: 2.4em auto; padding: 0 2ch; font: inherit; }

@media (prefers-reduced-motion: reduce) {
    .cursor { animation: none; }
}

/* touch screens have no keys to page with, so no prompt line */
@media (max-width: 40em), (hover: none) {
    #status { display: none; }
    body { padding-bottom: 0; }
}

@media (max-width: 40em) {
    #page { padding: 1.6em 1.5ch 0.5em; }
    .man { padding-left: 2ch; }
    .man h2 { margin-left: -2ch; }
    .man h3 { margin-left: -1ch; }
    .man pre { font-size: 0.8em; }
    .th > span:last-child, .th a span, .tf > span:first-child { display: none; }
    /* too narrow to hang flags under the name, or to give whatis two columns */
    .synopsis { --hang: 2 !important; }
    .man ul.whatis { grid-template-columns: 1fr; gap: 0; }
    .man ul.whatis span { margin: 0 0 0.6em 2ch; }
    .man ul.whatis span::before { content: none; }
}