/* dark, monochrome: white, black and grays only, like a terminal */
:root {
  color-scheme: dark;
  --red: #c4121f; /* the one alarm color: the status dot */
  --bg: #000000;
  --fg: #c8c8c8;
  --muted: #8a8a8a; /* still 4.5:1 on black for small text */
  --accent: #ffffff;
}

body {
  box-sizing: border-box;
  min-height: 100vh;
  max-width: 80ch;
  margin: 0 auto;
  padding: 1rem;
  font-family: monospace;
  /* explicit size: with a bare `monospace` browsers fall back to a smaller default (often 13px) */
  font-size: 1rem;
  line-height: 1.5;
  background: var(--bg);
  color: var(--fg);
  /* narrow screens: one column, footer pushed to the bottom */
  display: flex;
  flex-direction: column;
}

/* the background: a mirrored kernel panic log (img/panic.svg) on the right,
   fading out towards the text. Behind everything, never moves. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* 1620 units high, font 20 units: 64.8rem high makes the log font 0.8rem, like the footer;
     at the bottom, just above the status line, like the last thing a dying terminal printed;
     repeated upwards, so it fills any window: boot, panic, boot, panic... a reboot loop */
  background: url("img/panic.svg") right 0 bottom 2.5rem / auto 64.8rem repeat-y;
}

/* narrow screens: the log lies right under the text, so it is fainter there */
@media (max-width: 60rem) {
  body::before {
    opacity: 0.45;
  }
}

a {
  color: var(--accent);
}

h1,
h2,
h3 {
  color: var(--accent);
}

/* site icon on the left, language switch on the right */
header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 2ch;
}

header img {
  display: block; /* no inline-image gap under it */
}

/* small, one line, at the bottom of the window */
footer {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0 3ch;
  font-size: 0.8rem;
  color: var(--muted);
}

footer p {
  margin: 0;
}

footer a {
  color: var(--muted);
}

/* contacts as `finger` output, its own block above the repo and the license */
footer .contacts {
  flex-basis: 100%;
  margin: 0 0 0.75rem;
  font-size: 0.8rem; /* explicit: a <pre> would fall back to the small monospace default */
  line-height: 1.4;
}

/* terminal-like: hover inverts, focus is a clear white frame */
a:hover {
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
}

/* selected text is struck through instead of highlighted */
::selection {
  background: transparent;
  color: inherit;
  text-decoration: line-through;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* wiki: back on the left, next on the right, a line above */
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2ch;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--muted);
}

.steps a[rel="next"] {
  margin-left: auto;
}

/* hidden on screen, still read by lynx and screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* home page logo: 72 columns of block characters, shrinks to fit the column */
.logo {
  width: fit-content;
  max-width: 100%;
  margin: 2rem auto;
  color: var(--accent);
  font-size: min(1rem, calc((100vw - 2rem) / 45));
  line-height: 1.15; /* block characters touch, no gaps between rows */
}

/* 404: the dead stickman under the big 404 */
.dead {
  text-align: center;
}

.dead img {
  width: 12rem;
  max-width: 100%;
}

/* home page: the slogan under the logo */
.slogan {
  text-align: center;
}

/* site tree, drawn like `tree` / nvim-tree: nested lists, lines from borders */
.tree {
  margin-top: 2rem;
  font-size: 1.125rem; /* the tree a bit bigger than the text */
  white-space: nowrap;
}

.tree p,
.tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree li {
  position: relative;
  padding-left: 4ch;
}

/* ├── and └── : the branch to this item */
.tree li::before {
  content: "";
  position: absolute;
  left: 0.5ch;
  top: 0;
  width: 2.5ch;
  height: 0.75em; /* half of line-height 1.5 */
  border-left: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
}

/* │ : the line down to the next sibling */
.tree li::after {
  content: "";
  position: absolute;
  left: 0.5ch;
  top: 0.75em;
  bottom: 0;
  border-left: 1px solid var(--muted);
}

.tree li:last-child::after {
  content: none;
}

.tree a {
  text-decoration: none;
}

/* project folders: click the name to open / close */
.tree summary {
  cursor: pointer;
}

/* the open page, like the cursor line in vim */
.tree [aria-current="page"] {
  background: var(--fg);
  color: var(--bg);
}

/* wide screens: tree at the left edge, text centered in the window (pushed right only when the tree needs the room);
   narrow: tree after the text */
@media (min-width: 60rem) {
  body {
    max-width: none;
    display: grid;
    /* tree, text, empty: both sides 1fr, so the text is centered in the window; the left one never narrower than the tree (min-content = its width, it is nowrap; max-content would also take the footer's full width, the footer spans this column) */
    grid-template-columns: minmax(min-content, 1fr) minmax(0, 80ch) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 4ch;
  }

  header,
  footer {
    grid-column: 1 / -1;
  }

  footer {
    grid-row: 3;
  }

  .page {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    width: 100%;
    max-width: 80ch;
  }

  .tree {
    grid-column: 1;
    grid-row: 2;
    margin-top: 1em; /* level with the first line of the text */
  }

  /* the text column here is the window minus the tree and the gap */
  .logo {
    font-size: min(1rem, calc((100vw - 22rem) / 45));
  }
}

/* projects, wiki sections: click the heading to hide / show what is under it */
main summary {
  list-style: none; /* own marker below, after the heading, so the heading lines up with the text */
  cursor: pointer;
}

main summary::-webkit-details-marker {
  display: none; /* Safari */
}

/* the arrow right of the heading: closed ▶, open ▼ (like the tree) */
main summary::after {
  content: "▶";
  margin-left: 1ch;
  color: var(--fg);
}

main details[open] > summary::after {
  content: "▼";
}

main summary h2 {
  display: inline; /* keep the heading on the marker's line */
}

main table {
  border-collapse: collapse;
}

main th,
main td {
  padding: 0 3ch 0 0;
  text-align: left;
  vertical-align: top;
}

/* lists of several-line items (components): an empty line between items */
main ul.spaced > li + li {
  margin-top: 1em;
}

/* the item name at the start (mode, editor...) in heading white */
main ul.spaced > li > code:first-child {
  color: var(--accent);
}

main ul.spaced {
  overflow-wrap: anywhere; /* long paths break instead of widening the page */
}

/* commands: explicit size, a <pre> would fall back to the small monospace default */
main pre {
  font-size: 1rem;
}

/* commands set apart from the text like a terminal box: dark gray, a line on the left
   (not the logo, also a <pre>: overflow would give it scrollbars) */
main pre:not(.logo) {
  overflow-x: auto;
  background: #161616;
  border-left: 2px solid var(--muted);
  padding: 0.5em 1ch;
}

/* numbered steps: an empty line between items (1.5em = one line at line-height 1.5);
   a <pre> margin at the end of an item collapses into it, so every gap is the same */
main ol > li + li {
  margin-top: 1.5em;
}

/* hover / focus note: a number after the word, the note shows under it.
   The note is in the HTML, so lynx and screen readers read it inline. */
main article {
  counter-reset: tip;
}

.tip {
  position: relative;
  counter-increment: tip;
  border-bottom: 1px dotted var(--muted);
  cursor: help;
}

.tip::after {
  content: counter(tip);
  vertical-align: super;
  font-size: 0.7em;
  color: var(--muted);
}

/* hidden like .visually-hidden until hover / focus */
.tip-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tip:hover .tip-text,
.tip:focus .tip-text {
  z-index: 1;
  top: 100%;
  left: 0;
  width: max-content;
  max-width: 40ch;
  height: auto;
  padding: 0 1ch;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  background: var(--bg);
  border: 1px solid var(--muted);
  color: var(--fg);
}

/* (important) */
.star {
  color: var(--red);
}

/* vim-like status line at the very bottom; every number on it is enforced by the CSP */
footer .status {
  position: relative; /* for the stickman */
  flex-basis: 100%;
  margin-top: 0.75rem;
  padding: 0 3.5rem 0 1ch; /* the right end is kept free for the stickman */
  background: #111;
  color: var(--muted);
  white-space: pre-wrap;
}

.status .dot {
  color: var(--red);
}

/* a stickman sitting on the top edge of the status line, legs hanging over it (img/stickman.svg);
   it is a link: whoever pokes him ends up on the 404 page */
footer .stickman {
  position: absolute;
  bottom: calc(100% - 1.125rem); /* the image's edge line (18 of 64 units from the bottom) on the bar's top */
  right: 0.5rem;
  width: 2.5rem;
  height: 4rem; /* = the 40x64 image */
  background: url("img/stickman.svg") center / contain no-repeat;
}

footer .stickman:hover {
  background: url("img/stickman.svg") center / contain no-repeat; /* no inverted block, like other links */
}