/* Terminal – amber phosphor CRT. One monospace face, three brightness levels. */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

@keyframes tm-blink {
  50% {
    opacity: 0;
  }
}
@keyframes tm-flicker {
  0%,
  100% {
    opacity: 0.94;
  }
  50% {
    opacity: 1;
  }
}

:root[data-design='terminal'] {
  --amber: #ffb627;
  --amber-hi: #ffe2a3;
  --amber-dim: #b07a1c;
  --err: #ff7849;
  --crt: #0d0801;
  --glow: 0 0 5px rgb(255 170 30 / 0.55), 0 0 18px rgb(255 140 0 / 0.18);

  & body {
    background: #050300;
    color: var(--amber);
    font: 400 15px/1.6 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  }
  & a {
    color: var(--amber-hi);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
  }
  & a:hover {
    background: var(--amber);
    color: var(--crt);
    text-decoration: none;
  }
  & :focus-visible {
    outline: 1px dashed var(--amber-hi);
    outline-offset: 2px;
  }
  & ::selection {
    background: var(--amber);
    color: var(--crt);
  }

  & .tm {
    position: relative;
    min-height: calc(100vh - var(--ds-h));
    min-height: calc(100dvh - var(--ds-h));
    display: flex;
    flex-direction: column;
    background: radial-gradient(ellipse 120% 90% at 50% 40%, #1c1103 0%, var(--crt) 55%, #050300 100%);
    text-shadow: var(--glow);
  }
  /* Scanlines and vignette over everything */
  & .tm::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background:
      repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / 0.28) 2px 3px),
      radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / 0.55) 100%);
    animation: tm-flicker 0.18s infinite;
  }

  & .tm-crt {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    padding: 28px clamp(16px, 4vw, 48px) 24px;
  }
  & .tm-out p,
  & .tm-out h1,
  & .tm-out h2 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
  }
  & .tm-out section,
  & .tm-block {
    max-width: 82ch;
  }
  & .tm-block {
    margin-bottom: 1.2em;
  }
  & .tm-entry {
    margin-bottom: 1.2em;
  }
  & .tm-cmd {
    color: var(--amber-hi);
  }
  & .tm-ps {
    color: var(--amber-dim);
    margin-right: 0.6ch;
    white-space: nowrap;
  }
  & .tm-hi {
    color: var(--amber-hi);
    font-weight: 700;
  }
  & .tm-dim {
    color: var(--amber-dim);
  }
  & .tm-err {
    color: var(--err);
  }
  & .tm-key {
    color: var(--amber-hi);
  }
  & .tm-boot {
    color: var(--amber-dim);
    margin-bottom: 0.6em;
  }

  /* neofetch */
  & .tm-neo {
    display: flex;
    gap: 3ch;
    align-items: flex-start;
    margin: 0.4em 0;
  }
  & .tm-ascii {
    margin: 0;
    font: inherit;
    font-size: 10px;
    line-height: 1.12;
    color: var(--amber);
    flex: none;
  }
  & .tm-info dl {
    margin: 0.2em 0 0;
  }
  & .tm-info dl div {
    display: flex;
    gap: 1ch;
  }
  & .tm-info dt {
    color: var(--amber-hi);
    font-weight: 700;
    min-width: 9ch;
  }
  & .tm-info dt::after {
    content: ':';
  }
  & .tm-info dd {
    margin: 0;
  }
  & .tm-swatches {
    display: flex;
    margin-top: 0.8em !important;
  }
  & .tm-swatches span {
    width: 3ch;
    height: 1.2em;
  }
  & .tm-swatches span:nth-child(1) { background: #3a2504; }
  & .tm-swatches span:nth-child(2) { background: #6b4408; }
  & .tm-swatches span:nth-child(3) { background: var(--amber-dim); }
  & .tm-swatches span:nth-child(4) { background: var(--amber); }
  & .tm-swatches span:nth-child(5) { background: var(--amber-hi); }
  & .tm-swatches span:nth-child(6) { background: var(--err); }

  & .tm-help,
  & .tm-ls {
    border-collapse: collapse;
  }
  & .tm-help td,
  & .tm-ls td {
    padding: 0 3ch 0 0;
    vertical-align: top;
  }
  & .tm-out button,
  & .tm-keys button {
    padding: 0 0.4ch;
    margin: 0 -0.4ch;
    border: 0;
    background: none;
    color: var(--amber-hi);
    font: inherit;
    text-shadow: inherit;
    cursor: pointer;
  }
  & .tm-out button:hover {
    background: var(--amber);
    color: var(--crt);
    text-shadow: none;
  }
  & .tm-files {
    display: flex;
    flex-wrap: wrap;
    gap: 0 3ch;
  }
  & .tm-list {
    margin: 0.3em 0;
    padding: 0;
    list-style: none;
  }
  & .tm-list li::before {
    content: '  * ';
    white-space: pre;
    color: var(--amber-dim);
  }
  & .tm-log {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  & .tm-log li {
    margin-bottom: 0.8em;
    max-width: 82ch;
  }
  & .tm-in1 {
    padding-left: 2ch;
  }
  & .tm-in2 {
    display: inline-block;
    padding-left: 2ch;
  }

  /* Prompt */
  & .tm-line {
    display: flex;
    align-items: baseline;
  }
  & .tm-line input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--amber-hi);
    font: inherit;
    text-shadow: inherit;
    caret-color: var(--amber-hi);
    caret-shape: block;
  }

  /* Command keys */
  & .tm-keys {
    position: sticky;
    bottom: 0;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 10px clamp(16px, 4vw, 48px);
    background: rgb(13 8 1 / 0.94);
    border-top: 1px solid #3a2504;
  }
  & .tm-keys button {
    margin: 0;
    padding: 4px 10px;
    border: 1px solid var(--amber-dim);
    color: var(--amber);
  }
  & .tm-keys button::before {
    content: '$ ';
    color: var(--amber-dim);
  }
  & .tm-keys button:hover {
    background: var(--amber);
    color: var(--crt);
    text-shadow: none;
  }
  & .tm-keys button:hover::before {
    color: var(--crt);
  }

  @media (max-width: 760px) {
    & body {
      font-size: 13px;
    }
    & .tm-neo {
      flex-direction: column;
      gap: 1em;
    }
    & .tm-ascii {
      font-size: 7px;
    }
    & .tm-line input {
      font-size: 16px;
    }
    & .tm-keys {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      padding-inline: 16px;
    }
    & .tm-keys button {
      flex: none;
    }
    & .tm-help td:first-child {
      white-space: nowrap;
    }
    & .tm-ls td:nth-child(1),
    & .tm-ls td:nth-child(4) {
      display: none;
    }
  }

  &[data-motion='off'] {
    & .tm::after {
      animation: none;
    }
  }
}