/*
 * Konsole's stock Breeze palette, which is what the ys theme's colour names
 * resolve to on the machine this was built against. Swapping terminal scheme
 * is a matter of replacing this block and nothing else.
 *
 * The theme distinguishes $fg[white] (ANSI colour 7) from the default
 * foreground. Breeze happens to give both the same value, but they are kept
 * apart here so the distinction survives a palette swap.
 */
:root {
  --bg: #232627;
  --fg: #fcfcfc;

  --red: #ed1515;
  --red-b: #c0392b;
  --green: #11d116;
  --green-b: #1cdc9a;
  --yellow: #f67400;
  --yellow-b: #fdbc4b;
  --blue: #1d99f3;
  --blue-b: #3daee9;
  --cyan: #1abc9c;
  --cyan-b: #16a085;
  --white: #fcfcfc;
  --white-b: #ffffff;

  --leading: 1.55;
  --blank-line: calc(1em * var(--leading));
  --mono: Hack, "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  line-height: var(--leading);
  -webkit-text-size-adjust: 100%;
}

.terminal {
  max-width: 82ch;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- ys prompt segments ---------------------------------------------- */

.line {
  margin: 0;
  overflow-wrap: break-word;
}

.c-blue-b {
  color: var(--blue-b);
  font-weight: 700;
}

.c-cyan {
  color: var(--cyan);
}

.c-green {
  color: var(--green);
}

.c-white {
  color: var(--white);
}

.c-yellow-b {
  color: var(--yellow-b);
  font-weight: 700;
}

.c-red-b {
  color: var(--red-b);
  font-weight: 700;
}

/*
 * The theme's PROMPT opens with a newline, so every prompt after the first is
 * preceded by a blank line. Output follows its command immediately, the way
 * cat writes straight to the same stream.
 */
.terminal > * {
  margin: 0;
}

.idle {
  margin-block-start: var(--blank-line);
}

.cursor {
  display: inline-block;
  width: 1ch;
  height: 1em;
  vertical-align: text-bottom;
  background: var(--fg);
  animation: blink 1.05s infinite;
}

@keyframes blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

/* ---- command output --------------------------------------------------- */

.intro {
  margin: 0;
  max-width: 68ch;
}

.group {
  margin-block-start: var(--blank-line);
}

.heading {
  margin: 0;
  font-size: inherit;
  font-weight: 700;
  color: var(--yellow-b);
}

.listing {
  display: grid;
  grid-template-columns: 16ch 1fr;
  column-gap: 1ch;
  margin: 0;
  padding-inline-start: 2ch;
}

.key {
  grid-column: 1;
  color: var(--green);
}

.val {
  grid-column: 2;
  margin: 0;
}

.fingerprint {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--white-b);
}

a:focus-visible {
  outline: 2px solid var(--blue-b);
  outline-offset: 2px;
}

/* ---- animation states ------------------------------------------------- */

/*
 * Hidden with opacity rather than visibility or display, so the content stays
 * in the accessibility tree and is announced immediately, while sighted
 * visitors still get the reveal. pointer-events stops a stray click landing on
 * a link nobody can see yet.
 */
.js .output > *,
.js .idle {
  opacity: 0;
  pointer-events: none;
}

.js .output > .is-shown,
.js .idle.is-shown {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .js .output > *,
  .js .idle {
    opacity: 1;
    pointer-events: auto;
  }

  .cursor {
    animation: none;
  }
}

@media (max-width: 600px) {
  .listing {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .key,
  .val {
    grid-column: 1;
  }

  .val {
    padding-inline-start: 2ch;
    margin-block-end: calc(0.5 * var(--blank-line));
  }
}