/* The terminal: a shell session in a terminal's own type and colours. The
   ASCII crystal beside neutrinofetch is the switcher. */
.view-terminal {
  padding: 22px 18px 60px;
  background: #0c0c0c;
  color: #d4d4d4;
  font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
@media (min-width: 960px) { .view-terminal { padding: 30px 40px 80px; font-size: 15px; } }
.terminal { max-width: 1100px; }
.term-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.term-user { color: #5fd75f; }
.term-path { color: #5f87ff; }
.term-muted { color: #858585; }
.term-command { color: #f2f2f2; }
.term-live { position: relative; scroll-margin-bottom: 4.5em; }
/* Invisible, but 16px so a phone doesn't zoom in on it. */
.term-input { position: absolute; inset: 0; width: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; }
.term-ls { display: grid; grid-template-columns: repeat(auto-fill, 16ch); }
.term-ls a { color: #5f87ff; text-decoration: none; }
.term-ls a:hover { text-decoration: underline; }
.term-cursor { background: #d4d4d4; animation: cursor 1.05s steps(1) infinite; }
@keyframes cursor { 50% { background: transparent; } }
.fetch { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 10px 0 16px; }
.ascii-logo { color: #ff5fd7; text-align: left; }
.ascii-logo:hover { color: #ffa0e8; }
.ascii { margin: 0; font: inherit; line-height: 1.2; }
.view-terminal.leaving .ascii { animation: glitch 0.12s steps(2) infinite; }
@keyframes glitch { 50% { transform: translateX(2px); color: #5fd7ff; } }
.fetch-info { min-width: 0; }
.fetch-title .term-user, .fetch-key { color: #ff5fd7; font-weight: 700; }
.fetch-gap { height: 0.75em; }
.swatch { display: inline-block; width: 2.4em; height: 1.3em; vertical-align: middle; }
.swatch-0 { background: #2e2e2e; } .swatch-1 { background: #cd3131; } .swatch-2 { background: #0dbc79; }
.swatch-3 { background: #e5e510; } .swatch-4 { background: #2472c8; } .swatch-5 { background: #bc3fbc; }
.swatch-6 { background: #11a8cd; } .swatch-7 { background: #e5e5e5; }
.term-table { margin: 6px 0 16px; font: inherit; overflow-x: auto; }

/* The way to everything else, as tmux's status line: the session, this
   shell as window 0, each page as a window after it, and on the right the
   pane's title and the clock, which terminal.js fills in. */
body[data-view="terminal"] .bottom-line {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  gap: 0 1ch;
  padding: 0 18px;
  font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  letter-spacing: 0;
  text-transform: none;
  color: #0c0c0c;
  background: #0dbc79;
  counter-reset: window;
}
@media (min-width: 960px) { body[data-view="terminal"] .bottom-line { padding: 0 40px; font-size: 15px; } }
body[data-view="terminal"] .bottom-line::before { content: "[0] 0:zsh*"; }
body[data-view="terminal"] .bottom-line::after { content: attr(data-status); margin-left: auto; white-space: pre; }
/* Narrow, tmux gives up the right side first. */
@media (max-width: 599px) { body[data-view="terminal"] .bottom-line::after { content: none; } }
body[data-view="terminal"] .bottom-line a { counter-increment: window; font: inherit; letter-spacing: 0; text-transform: lowercase; }
body[data-view="terminal"] .bottom-line a::before { content: counter(window) ":"; }
/* The picker is the last window, numbered like the pages. */
body[data-view="terminal"] .bottom-line > .view-picker { counter-increment: window; }
body[data-view="terminal"] .bottom-line .view-toggle::before { content: counter(window) ":"; }
body[data-view="terminal"] .bottom-line a:hover { color: inherit; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .term-cursor { animation: none; }
}