/* Appearance informed by CERN's 2013 line-mode reconstruction.
   CERN terminal font attribution and license: THIRD-PARTY-NOTICES.txt. */
@font-face {
  font-family: CERN;
  src: url('cern-terminal.woff') format('woff');
  font-display: swap;
}
:root {
  color-scheme: dark;
  background: #000;
  color: #00ff80;
  font: 18px/1.5 CERN, monospace;
  --line: 1.5rem;
}
* { box-sizing: border-box; }
body { margin: 0; }
.terminal {
  width: min(80ch, calc(100% - 32px));
  margin-inline: auto;
  padding-block: 0 18px;
  text-shadow: 0 0 10px currentColor;
}
.document-title { text-align: right; }
h1, h2, p, dl, dd { margin: 0; font: inherit; }
h1 { text-transform: uppercase; text-align: center; margin-block: var(--line); }
h2 { text-transform: uppercase; margin-top: var(--line); }
p { margin-top: var(--line); }
h2 + p { margin-top: 0; }
dl { margin-block: var(--line); }
dl > div { display: grid; grid-template-columns: 20ch minmax(0, 1fr); margin-left: 7ch; }
dl > div + div { margin-top: var(--line); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, main:focus-visible, input:focus-visible, button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}
::selection { background: #00ff80; color: #000; text-shadow: none; }
.end { margin-bottom: var(--line); }
.enhanced .terminal {
  height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.enhanced main {
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
  padding-inline: 4px;
  margin-inline: -4px;
}
.enhanced main::-webkit-scrollbar { display: none; }
.command-area { background: #000; padding-top: var(--line); }
#command-response { margin: 0; white-space: pre-line; }
#command-response:not(:empty) { margin-bottom: var(--line); }
form { display: flex; align-items: baseline; gap: 1ch; }
input, button { font: inherit; color: inherit; text-shadow: inherit; border: 0; border-radius: 0; background: #000; padding: 0; }
input { width: 8ch; min-width: 2ch; flex: 1; caret-color: #00ff80; }
input::placeholder { color: #00ff80; opacity: 1; }
button { cursor: pointer; display: none; }
input:focus-visible { outline: none; }
@media (max-width: 700px) {
  :root { font-size: 18px; }
  .terminal { width: calc(100% - 28px); }
  dl > div { margin-left: 2ch; grid-template-columns: 1fr; }
  dd { margin-left: 2ch; }
  form { flex-wrap: wrap; }
  label { flex-basis: 100%; }
  input, button { min-height: 44px; }
  button { display: block; }
}
@media (prefers-contrast: more) {
  .terminal { text-shadow: none; }
  a { text-decoration: underline; }
}