/* styles/sections/agent-terminal.css
 * /ship-faster/ hero: the Termynal transcript (termynal.js from the CDN types the lines;
 * js/ship-faster.js keeps the box at this height and scrolled to the newest line). The
 * library's own stylesheet is not loaded: its rules are here, on the pre-swap palette
 * (--term-window, --term-light-*, --term-text, --term-prompt, --term-typed, --term-agent).
 * 400px tall, 320px with 14px type at 768px and below (the page's pre-swap query). */
@layer sections {
  #termynal[data-termynal] {
    --color-bg: var(--term-window);
    --color-text: var(--term-text);
    --color-text-subtle: var(--term-prompt);

    position: relative;
    width: 100%;
    max-width: 800px;
    height: 400px;
    padding: var(--space-32) var(--space-24) var(--space-24);
    overflow: hidden auto;
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    box-shadow: var(--elevation-low);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 18px;
    text-align: left;
  }

  /* Window lights, drawn in one pseudo-element as the library does. */
  #termynal[data-termynal]::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--term-light-close);
    box-shadow: 25px 0 0 var(--term-light-min), 50px 0 0 var(--term-light-max);
  }

  #termynal[data-termynal]::after {
    content: "bash";
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    color: var(--color-text-subtle);
    text-align: center;
  }

  #termynal [data-ty] {
    display: block;
    color: var(--term-text);
    line-height: 2;
    text-align: left;
  }

  #termynal [data-ty]::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    color: var(--term-prompt);
  }

  #termynal [data-ty="input"]::before,
  #termynal [data-ty-prompt]::before {
    margin-right: 0.75em;
  }

  #termynal [data-ty="input"]::before {
    content: "$";
  }

  #termynal [data-ty][data-ty-prompt]::before {
    content: attr(data-ty-prompt);
  }

  /* Typed by the user: green. Run by the agent (empty prompt): orange. */
  #termynal [data-ty="input"] {
    color: var(--term-typed);
  }

  #termynal [data-ty="input"][data-ty-prompt=""] {
    color: var(--term-agent);
  }

  #termynal [data-ty].terminal-error {
    color: var(--term-prompt);
  }

  #termynal [data-ty-cursor]::after {
    content: attr(data-ty-cursor);
    margin-left: 0.5em;
    font-family: monospace;
    animation: termynal-blink 1s infinite;
  }

  @keyframes termynal-blink {
    50% {
      opacity: 0;
    }
  }

  @media (width <= 768px) {
    #termynal[data-termynal] {
      height: 320px;
      padding: var(--space-32) var(--space-16) var(--space-16);
      font-size: 14px;
    }
  }
}