/* Terminal blocks, generated by the termynal Markdown extension and animated
   by javascripts/termynal.js. This stands in for the library's stylesheet,
   which never loads: the design system's dark surface with a hairline border
   and the md radius, the system monospace stack, no window buttons or title
   bar, and the two controls set as muted text. The block is dark in both
   color schemes; in slate it sits one step raised so it reads against the
   page. */

:root,
[data-md-color-scheme="default"] {
  --knilb-terminal-bg: #111111;
  --knilb-terminal-fg: #f1f1f1;
  --knilb-terminal-muted: #9e9e9e;
  --knilb-terminal-border: #303030;
}

[data-md-color-scheme="slate"] {
  --knilb-terminal-bg: #1b1b1b;
  --knilb-terminal-border: #3b3b3b;
}

.md-typeset .termy {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 0;
  padding: 1rem 1.2rem 1.8rem;
  background: var(--knilb-terminal-bg);
  color: var(--knilb-terminal-fg);
  border: 1px solid var(--knilb-terminal-border);
  border-radius: 0.5rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.7rem;
  line-height: 1.8;
  text-align: left;
}

.md-typeset .termy [data-ty] {
  display: block;
  white-space: pre;
}

/* The prompt is a pseudo-element, so a copied command carries no "$". */
.md-typeset .termy [data-ty]::before {
  content: "";
  display: inline-block;
}

.md-typeset .termy [data-ty="input"]::before {
  content: "$";
  margin-right: 0.75em;
  color: var(--knilb-terminal-muted);
}

.md-typeset .termy [data-ty][data-ty-prompt]::before {
  content: attr(data-ty-prompt);
}

.md-typeset .termy [data-ty-cursor]::after {
  content: attr(data-ty-cursor);
  margin-left: 0.25em;
  animation: knilb-terminal-blink 1s steps(1) infinite;
}

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

.md-typeset .termy .termynal-comment {
  color: var(--knilb-terminal-muted);
}

/* "fast" while it plays, "restart" once it is done; both bottom right. */
.md-typeset .termy button[data-terminal-control] {
  position: absolute;
  right: 1rem;
  bottom: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--md-text-font-family, sans-serif);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--knilb-terminal-muted);
  cursor: pointer;
}

.md-typeset .termy button[data-terminal-control]:hover,
.md-typeset .termy button[data-terminal-control]:focus-visible {
  color: var(--knilb-terminal-fg);
}