@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap');

/* ------------------------------------------------------------------ *
 *  Tokens
 * ------------------------------------------------------------------ */
:root {
  /* PCBoard-era 16-colour ANSI palette */
  --bbs-bg:        #000;
  --bbs-fg:        #aaa;      /* default text — ANSI light grey */
  --bbs-dim:       #666;      /* meta, hints */
  --bbs-yellow:    #ff5;      /* headings, bright */
  --bbs-cyan:      #5ff;      /* links */
  --bbs-cyan-dim:  #0aa;      /* frames, lightbars */
  --bbs-green:     #5f5;
  --bbs-red:       #f55;      /* errors */
  --bbs-frame:     #222;      /* faint dividers */
  --bbs-pre-bg:    #0d0d0d;   /* pre / code background */

  --bbs-font:      "IBM Plex Mono", "Courier New", Consolas, monospace;
  --bbs-cols:      80ch;      /* the "monitor" width */
  --bbs-font-size: 14px;
  --bbs-line:      1.4;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------ *
 *  Page chrome — every body.bbs page is centered inside the monitor.
 * ------------------------------------------------------------------ */

body.bbs {
  background: var(--bbs-bg);
  color: var(--bbs-fg);
  font-family: var(--bbs-font);
  font-size: var(--bbs-font-size);
  line-height: var(--bbs-line);
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 32px 16px 56px;
}

#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body.bbs #terminal {
  position: relative;
  z-index: 1;
  width: var(--bbs-cols);
  max-width: calc(100vw - 32px);
  border: 1px solid var(--bbs-cyan-dim);
  background: var(--bbs-pre-bg);
  padding: 24px 16px;
}

/* The single screen — every page renders its content inside this <main>.
 * The data-screen attribute (press / message / project / ...) is a hook
 * for any screen-specific CSS that ever wants to override something. */
body.bbs main.screen {
  display: block;
  background: var(--bbs-pre-bg);
}

/* ------------------------------------------------------------------ *
 *  Cursor
 * ------------------------------------------------------------------ */

body.bbs .cursor-blink {
  animation: blink 1s step-end infinite;
}

body.bbs .blink-fast {
  animation: blink 0.7s step-end infinite;
}

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

/* ------------------------------------------------------------------ *
 *  ANSI palette
 * ------------------------------------------------------------------ */

body.bbs .ansi-cyan     { color: var(--bbs-cyan); }
body.bbs .ansi-cyan-dim { color: var(--bbs-cyan-dim); }
body.bbs .ansi-bright   { color: var(--bbs-yellow); }
body.bbs .ansi-white    { color: #fff; }
body.bbs .ansi-green    { color: var(--bbs-green); }
body.bbs .ansi-dim      { color: var(--bbs-dim); }
body.bbs .ansi-red      { color: var(--bbs-red); }

/* ------------------------------------------------------------------ *
 *  Lightbar — the PCBoard inverse selection bar. Used on the main
 *  menu (rows inside <pre>) and on content-page .post-list items.
 * ------------------------------------------------------------------ */

body.bbs .lb {
  background: var(--bbs-cyan-dim);
  color: #000;
  font-weight: 700;
}

body.bbs .post-list li.lb,
body.bbs .post-list li.lb a,
body.bbs .post-list li.lb .post-date,
body.bbs .post-list li.lb .post-meta,
body.bbs .post-list li.lb .ansi-dim {
  color: #000;
}

body.bbs .row {
  cursor: pointer;
}

/* ------------------------------------------------------------------ *
 *  Status bar (fixed at viewport bottom — the "CRT HUD")
 * ------------------------------------------------------------------ */

body.bbs .status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0a0a0a;
  border-top: 1px solid var(--bbs-frame);
  color: var(--bbs-dim);
  font-family: var(--bbs-font);
  font-size: 12px;
  padding: 6px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  z-index: 100;
}

body.bbs .status-bar .status-label { white-space: nowrap; }

/* Front-panel modem LED row — RD/SD flicker simulates data movement. */
body.bbs .status-bar .modem-lights {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  user-select: none;
}
body.bbs .status-bar .led {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 2px;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 0 0 1px #000 inset;
  vertical-align: middle;
  transition: background 60ms linear, box-shadow 60ms linear;
}
body.bbs .status-bar .led-key {
  margin-right: 6px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #444;
  font-size: 10px;
}
body.bbs .status-bar .led.on { background: var(--bbs-green); box-shadow: 0 0 4px var(--bbs-green); }
body.bbs .status-bar .led[data-led="oh"].on { background: var(--bbs-red); box-shadow: 0 0 4px var(--bbs-red); }
body.bbs .status-bar .led[data-led="hs"].on,
body.bbs .status-bar .led[data-led="cd"].on,
body.bbs .status-bar .led[data-led="tr"].on { background: var(--bbs-cyan); box-shadow: 0 0 4px var(--bbs-cyan); }
body.bbs .status-bar .led.on + .led-key { color: #888; }
body.bbs .status-bar .led[data-led="oh"].on + .led-key { color: #c77; }
body.bbs .status-bar .led[data-led="hs"].on + .led-key,
body.bbs .status-bar .led[data-led="cd"].on + .led-key,
body.bbs .status-bar .led[data-led="tr"].on + .led-key { color: #6cc; }

/* ------------------------------------------------------------------ *
 *  Boot screen content (pre / connect / login / menu) — pre-formatted,
 *  fixed-width blocks. Width: max-content + auto margin keeps the block
 *  sized to its content (so ASCII art is exactly as wide as the chars)
 *  but visually centered inside the terminal frame.
 * ------------------------------------------------------------------ */

body.bbs main.screen pre.boot-art,
body.bbs main.screen pre.boot-screen,
body.bbs main.screen pre.boot-prompt {
  margin: 0 0 1em;
  background: var(--bbs-pre-bg);
  color: var(--bbs-fg);
  padding: 8px 0;
  white-space: pre;
  text-align: left;
  overflow: hidden;
}

body.bbs main.screen pre.boot-error {
  margin: 0 0 1em;
  background: transparent;
  color: var(--bbs-red);
  padding: 0;
}

/* ------------------------------------------------------------------ *
 *  Article typography (used on message / project / about pages)
 * ------------------------------------------------------------------ */

body.bbs h1 {
  font-size: 1.2em;
  color: var(--bbs-yellow);
  margin-bottom: 0.5em;
  letter-spacing: 0.05em;
}

body.bbs h2 {
  font-size: 1.05em;
  color: var(--bbs-yellow);
  margin: 1.2em 0 0.4em;
  letter-spacing: 0.05em;
}

body.bbs p {
  margin: 0 0 0.8em;
}

body.bbs a {
  color: var(--bbs-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.bbs a:hover {
  color: var(--bbs-yellow);
}

body.bbs ul,
body.bbs ol {
  margin: 0 0 1em 1.5em;
  padding: 0;
}

body.bbs li {
  margin-bottom: 0.3em;
}

body.bbs code {
  background: var(--bbs-pre-bg);
  color: var(--bbs-yellow);
  padding: 0 0.3em;
  border-radius: 2px;
}

body.bbs pre {
  font-family: var(--bbs-font);
  background: var(--bbs-pre-bg);
  color: var(--bbs-fg);
  padding: 8px 12px;
  margin: 0 0 1em;
  overflow-x: auto;
}

body.bbs pre code {
  background: none;
  padding: 0;
}

body.bbs blockquote {
  border-left: 2px solid var(--bbs-cyan);
  margin: 0 0 1em;
  padding: 0 1em;
  color: var(--bbs-dim);
}

body.bbs hr {
  border: none;
  border-top: 1px dashed var(--bbs-dim);
  margin: 1.5em 0;
}

body.bbs .post-header {
  border-bottom: 1px dashed var(--bbs-dim);
  margin-bottom: 1em;
  padding-bottom: 0.6em;
}

body.bbs .post-meta {
  color: var(--bbs-dim);
  font-size: 0.9em;
  margin: 0.2em 0 0;
}

body.bbs .post-date {
  color: var(--bbs-dim);
  font-size: 0.9em;
}

body.bbs .conf {
  margin: 1.5em 0;
  padding: 0.5em 0;
  border-top: 1px solid var(--bbs-frame);
}

body.bbs .conf:first-of-type {
  border-top: none;
  margin-top: 0.5em;
}

body.bbs .post-list {
  list-style: none;
  margin: 0 0 0.4em;
  padding: 0;
}

body.bbs .post-list li {
  padding: 0.2em 0;
  border-bottom: 1px dotted var(--bbs-frame);
}

body.bbs .lede {
  color: var(--bbs-dim);
  font-style: italic;
  margin-bottom: 1em;
}

body.bbs .nav-hint {
  text-align: center;
  color: var(--bbs-dim);
  font-size: 0.85em;
  margin-top: 1em;
  letter-spacing: 0.1em;
}

.about-art {
  padding: 1em;
  margin: 1em 0;
  overflow-x: auto;
  border: 1px solid #222;
}
.about-art pre.ascii {
  font-family: monospace;
  font-size: 8pt;
  line-height: 1.1;
  font-weight: bold;
  white-space: pre;
  margin: 0;
}