/* Shared by every page: the font, the colours and the terminal basics.
   Page stylesheets (landing.css, or a <style> block) load after this one and
   only add their own layout. Lengths are in ch (one character wide) and
   var(--line) (one line tall), so everything sits on the character grid. */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --bg: #0a0a0c;
  --text: #e8e8e8;
  --dim: #6b7280;
  --accent: #9fb8d9;
  --accent-dim: #7f93ad;
  --error: #e8a0a0;

  --font-size: 14px;
  --line: 17px;          /* one line = one character cell tall */
}

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

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-size);
  line-height: var(--line);
}

/* Headings look like any other line of text; a page can style them if it wants. */
h1, h2, h3 { font: inherit; }

.dim { color: var(--dim); }

/* Links and buttons are plain text, and invert on hover and keyboard focus. */
a, button {
  font: inherit;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
a:hover, a:focus-visible,
button:hover, button:focus-visible {
  background: var(--text);
  color: var(--bg);
  outline: none;
}
button:disabled {
  color: var(--dim);
  background: none;
  cursor: default;
}

/* Text for screen readers only: there, but not drawn. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The hidden attribute always wins, even over a display set by a class. */
[hidden] { display: none !important; }