/* boar.rh1.tech: the page callers read before they call.
 *
 * The same drawing as the sysop web interface (internal/web/static/sysop.css)
 * and as the BBS itself on a terminal: VGA colours on black, a blue title bar,
 * double-line boxes with the title set into the top edge, and menu items
 * whose hotkey is lit. One monospace face, with Cyrillic for the Russian page.
 * Self-hosted terminal and branding scripts; no third-party requests. */

@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+2500-259F; }
@font-face { font-family: "Plex Mono"; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+2500-259F; }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Plex Mono"; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-mono-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  /* VGA, in ANSI order. */
  --c0: #000000; --c1: #aa0000; --c2: #00aa00; --c3: #aa5500;
  --c4: #0000aa; --c5: #aa00aa; --c6: #00aaaa; --c7: #aaaaaa;
  --c8: #555555; --c9: #ff5555; --c10: #55ff55; --c11: #ffff55;
  --c12: #5555ff; --c13: #ff55ff; --c14: #55ffff; --c15: #ffffff;

  --bg: #050505;
  --ink: var(--c7);
  --bright: var(--c15);
  --dim: #727272;
  --line: var(--c8);
  --title: var(--c11);
  --key: var(--c14);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15px/1.6 "Plex Mono", ui-monospace, Menlo, monospace;
}
a { color: var(--key); text-decoration: none; }
a:hover { color: var(--bg); background: var(--key); }
:focus-visible { outline: 2px solid var(--key); outline-offset: 1px; }
::selection { background: var(--c7); color: var(--c0); }
b, strong { color: var(--bright); font-weight: 600; }
code { color: var(--bright); }
.dim { color: var(--dim); }
p { margin: 0 0 1rem; max-width: 76ch; }

/* ── title bar ──────────────────────────────────────────────────────────── */

.bar {
  display: flex; flex-wrap: wrap; gap: 0.2rem 2ch; align-items: center;
  padding: 0.3rem 2ch; background: var(--c4); color: var(--bright);
}
.bar .bbs { color: var(--c11); font-weight: 600; }
.bar .host { color: #aab; }
.bar nav { margin-left: auto; display: flex; gap: 2ch; }

.item { color: var(--bright); white-space: nowrap; }
.item::before { content: "["; color: #aab; }
.item::after { content: "]"; color: #aab; }
.item .key { color: var(--c11); font-weight: 600; }
.item:hover, .item[aria-current="page"] { background: var(--c7); color: var(--c0); }
.item:hover::before, .item:hover::after, .item:hover .key,
.item[aria-current="page"]::before, .item[aria-current="page"]::after,
.item[aria-current="page"] .key { color: var(--c0); }

main { width: min(100% - 2rem, 88ch); margin: 2rem auto 3rem; }

/* ── the welcome screen, as a terminal shows it ─────────────────────────── */

.screen { margin: 0 0 2rem; }
.screen pre {
  margin: 0; padding: 1.2rem 1ch 1rem; background: #000;
  border: 3px double var(--line); overflow-x: auto;
  /* Faces that have every block and box-drawing glyph at the same width, so
     the art joins up; Plex Mono borrows them from other fonts. Line height 1,
     as on a terminal, so full blocks touch. */
  font: 400 clamp(8px, 1.72vw, 15px)/1 Menlo, "DejaVu Sans Mono", Consolas, "Liberation Mono", monospace;
}
.cursor { display: inline-block; width: 0.6em; height: 1em; vertical-align: -0.12em; background: var(--c7); }
@media (prefers-reduced-motion: no-preference) {
  .cursor { animation: blink 1.1s steps(1) infinite; }
}
@keyframes blink { 50% { opacity: 0; } }

h1 { margin: 0 0 0.8rem; color: var(--bright); font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); line-height: 1.2; }
.lead { font-size: 1.02rem; }

/* ── boxes ──────────────────────────────────────────────────────────────── */

.box {
  position: relative; margin: 2.2rem 0 0;
  border: 3px double var(--line); padding: 1.3rem 2ch 0.6rem;
}
.box > h2 {
  position: absolute; top: -0.95em; left: 2ch; margin: 0;
  padding: 0 1ch; background: var(--bg);
  color: var(--title); font-size: 1rem; font-weight: 600;
}
.split { display: grid; gap: 0 3ch; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } }

/* A command as you would type it. */
.cmd {
  margin: 0.3rem 0 0.7rem; padding: 0.35rem 1.5ch; background: var(--c4);
  color: var(--bright); border-bottom: 2px solid var(--c12); overflow-x: auto; white-space: pre;
}
.cmd::before { content: "$ "; color: #8f8fd8; }
.way { margin-bottom: 0.9rem; }
.way h3 { margin: 0; font-size: 1rem; color: var(--c14); font-weight: 600; }
.way h3 .tag { color: var(--c0); background: var(--c10); padding: 0 0.7ch; margin-left: 1ch; font-size: 0.8rem; }
.fp { word-break: break-all; color: var(--bright); }

ol, ul { margin: 0 0 1rem; padding-left: 3ch; max-width: 76ch; }
li { margin-bottom: 0.4rem; }
ul li::marker { content: "■ "; color: var(--c8); }
ol li::marker { color: var(--c11); }
dl.inside { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 2ch; margin: 0 0 1rem; }
dl.inside dt { color: var(--c11); }
dl.inside dd { margin: 0; }

footer { width: min(100% - 2rem, 88ch); margin: 0 auto 2.5rem; padding-top: 1rem;
  border-top: 3px double var(--line); color: var(--dim); font-size: 0.85rem; }
footer p { margin: 0 0 0.3rem; }
footer .credit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5ch;
  max-width: 100%; overflow-wrap: anywhere;
}
footer .footer-rh1 { color: var(--ink); flex: 0 0 auto; }
footer .footer-rh1:hover { background: transparent; }
footer .rh1-wordmark { width: 5.5rem; height: 1.2rem; fill: currentColor; }
footer .rh1-mark { display: inline-block; width: 18px; height: 18px; }
footer .rh1-mark svg { width: 100%; height: 100%; }

.split > *, .box, .inside dd { min-width: 0; }
dl.inside { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.inside dd { overflow-wrap: anywhere; }
.terminal-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1ch; margin-bottom: 1rem; }
.terminal-controls button {
  font: inherit; color: var(--bright); background: var(--c4);
  border: 1px solid var(--c12); padding: 0.3rem 1ch; cursor: pointer;
}
.terminal-controls button:disabled { opacity: 0.5; cursor: default; }
#terminal-status { font-size: 0.85rem; }
.terminal-scroll { max-width: 100%; overflow-x: auto; margin-bottom: 1rem; background: #000; }
#terminal { width: 690px; padding: 8px; }

/* VGA classes the rendered screen uses. */
.f0 { color: var(--c0); } .f1 { color: var(--c1); } .f2 { color: var(--c2); } .f3 { color: var(--c3); }
.f4 { color: var(--c4); } .f5 { color: var(--c5); } .f6 { color: var(--c6); } .f7 { color: var(--c7); }
.f8 { color: var(--c8); } .f9 { color: var(--c9); } .f10 { color: var(--c10); } .f11 { color: var(--c11); }
.f12 { color: var(--c12); } .f13 { color: var(--c13); } .f14 { color: var(--c14); } .f15 { color: var(--c15); }
.b1 { background: var(--c1); } .b2 { background: var(--c2); } .b3 { background: var(--c3); }
.b4 { background: var(--c4); } .b5 { background: var(--c5); } .b6 { background: var(--c6); } .b7 { background: var(--c7); }