/* d1no.dev. A Linux console: black, white, nothing else. */

:root {
  --bg: #000;
  --fg: #c8c8c8;   /* VGA light grey, what a console actually calls white */
  --cursor: #fff;
  --size: 14px;
  --pad: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  overscroll-behavior: none;
}

body {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "DejaVu Sans Mono",
               "Liberation Mono", Consolas, monospace;
  font-size: var(--size);
  line-height: 1.3;          /* terminal metrics, not document metrics */
  color: var(--fg);
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

::selection { background: var(--fg); color: var(--bg); }  /* inverted, no blue */

#term {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--pad);
  padding-top: max(var(--pad), env(safe-area-inset-top));
  padding-bottom: max(var(--pad), env(safe-area-inset-bottom));
  cursor: text;
  scrollbar-width: thin;
  scrollbar-color: #222 transparent;
}
#term::-webkit-scrollbar { width: 8px; }
#term::-webkit-scrollbar-track { background: transparent; }
#term::-webkit-scrollbar-thumb { background: #222; }

#out, #line {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Rebuilt on every keystroke, so the blink restarts as you type and idles
   when you stop, the way a real one behaves. */
.cur {
  background: var(--cursor);
  color: var(--bg);
  animation: blink 1.2s steps(1) infinite;
}
.cur.off {
  background: transparent;
  color: var(--fg);
  animation: none;
  box-shadow: inset 0 0 0 1px #555;
}
@keyframes blink { 0%, 50% { opacity: 1 } 51%, 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .cur { animation: none } }

/* Keyboard sink. Fixed so focusing never scrolls the document, 16px so iOS
   does not zoom in on focus. */
#kbd {
  position: fixed;
  bottom: 0; left: 0;
  width: 1px; height: 1px;
  padding: 0; border: 0; margin: 0;
  opacity: 0;
  font-size: 16px;
  resize: none;
}

@media (max-width: 640px) { :root { --size: 13px; --pad: 10px; } }