:root {
  --bg: #fbfbf9;
  --ink: #222222;
  --ink-soft: #55554f;
  --ink-muted: #8a8a83;
  --rule: #d8d8d1;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --cols: 80;
  --gutter: clamp(12px, 3vw, 40px);
  --lh: 1.45;
  --status-h: 1.6em;
}

html { background: var(--bg); overflow-x: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  /* 80 columns must fit the viewport; script.js refines this from the measured glyph width */
  font-size: clamp(10px, calc((100vw - 2 * var(--gutter)) / (var(--cols) * 0.6)), 16px);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: underline; text-decoration-color: var(--ink-muted); text-underline-offset: 0.15em; }
a:hover { text-decoration-color: var(--ink); }

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--ink);
  color: var(--bg);
  padding: 4px 8px;
}
.skip:focus { left: 8px; z-index: 100; }

/* Man page */

.screen {
  width: calc(var(--cols) * 1ch);
  margin: 0 auto;
  padding: 2.5em 0 3em;
}
/* the view has a transform, so it is a stacking context: it needs its own
   background for the cursor's blend mode to have something to invert against */
.view { position: relative; background: var(--bg); }
/* With JS the page is a terminal: no native scrolling, the view moves in whole lines */
.js, .js body { height: 100%; overflow-y: hidden; }
.js .screen {
  box-sizing: border-box;
  height: calc(100% - var(--status-h));
  padding-bottom: 0;
  overflow: hidden;
}
.man {
  margin: 0;
  font: inherit;
  white-space: pre;
  tab-size: 8;
}
.man b { font-weight: 700; }
/* every <b> is a selectable item: show it as clickable */
.js .man b { cursor: pointer; }
.js .man b:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.man i { font-style: normal; text-decoration: underline; text-underline-offset: 0.15em; }
.man a { text-decoration: none; }
.man a:hover { text-decoration: underline; }

.cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1ch;
  height: calc(var(--lh) * 1em);
  /* page colour in difference mode inverts the cell: dark block, light glyphs */
  background: var(--bg);
  mix-blend-mode: difference;
  pointer-events: none;
  display: none;
}
.man mark { background: var(--rule); color: var(--ink); }
.cursor.on { display: block; }
/* blink like a terminal: the cell alternates between inverted and normal */
.cursor.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor.blink { animation: none; } }
.modal .cursor.blink { animation: none; }

/* Posts: a Markdown buffer open in the editor */

.tabline { margin: 0 0 calc(var(--lh) * 1em); height: calc(var(--lh) * 1em); color: var(--ink-soft); }
.tabline a { text-decoration: none; }
.tabline a:hover { color: var(--ink); text-decoration: underline; }
.js .screen.has-tabline { padding-top: 1.5em; }
.edit .md-h { font-weight: 700; }
.edit .md-h .md-mark, .edit .md-mark { color: var(--ink-muted); }
.edit i { font-style: normal; text-decoration: underline; text-underline-offset: 0.15em; }
.edit a { text-decoration: underline; text-decoration-color: var(--ink-muted); text-underline-offset: 0.15em; }
.gutter {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font: inherit;
  white-space: pre;
  color: var(--ink-muted);
  user-select: none;
}

/* Vim status line */

.status {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  height: var(--status-h);
  font: inherit;
  background: var(--bg);
  border-top: 1px solid var(--rule);
  white-space: pre;
  overflow: hidden;
}
.status.on { display: block; }
.status-inner {
  width: calc(var(--cols) * 1ch);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2ch;
}
/* centre the caps, not the font's line box; browsers without text-box fall back to flex centring */
.status .msg, .status .pos { text-box: trim-both cap alphabetic; }
/* the span is trimmed to cap height, so the inverse background comes from a
   pseudo-element spanning the full status row instead */
.status .msg.err { position: relative; color: var(--bg); }
.status .msg.err::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--status-h);
  transform: translateY(-50%);
  background: var(--ink);
  z-index: -1;
}
.status .pos { flex: none; }

/* TUI popups: a box drawn in text, centred over a dimmed screen */

.tui {
  position: fixed;
  margin: 0;
  border: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  line-height: var(--lh);
  max-width: calc(100vw - 2 * var(--gutter));
  overflow: visible;
}
.tui::backdrop { background: rgba(34, 34, 34, 0.45); }
.tui pre { margin: 0; font: inherit; white-space: pre; }
.tui a { text-decoration: none; }
.tui a:focus, .tui button:focus { outline: 0; }
.tui .cur, .tui a:hover, .tui button:hover { background: var(--ink); color: var(--bg); }
.tui button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}