.terminal {
    margin: 1em 0;
    font-size: 0.85rem;
}

/* manual-style.css sets these to 1rem */
.terminal .stt,
.terminal .hspace {
    font-size: inherit;
}

.terminal .SVerbatim,
.terminal .SVerbatim td {
    line-height: 1.25;
}

.term-prompt::before {
    content: "$ ";
    color: #888;
}

.term-bold { font-weight: bold; }
.term-italic { font-style: italic; }
.term-red { color: #c00; }
.term-green { color: #080; }
.term-yellow { color: #a60; }
.term-gray { color: #888; }

/* Diagrams shrink to fit narrow screens */
.diagram {
    max-width: 100%;
    height: auto;
}

/* Code added to a file shown by tour-file */
.tour-added {
    background: #dfd;
}

/* On narrow screens (manual-style.css switches to its mobile layout at 720px), scroll wide
   output and code within their own boxes. Otherwise they widen the whole page, and the
   browser zooms out to fit it. */
@media all and (max-width: 720px) {
    .terminal,
    .tour-file .SCodeFlow {
        overflow-x: auto;
    }
}

/* A picture that links to a video, blurred behind a content warning (see video-link) */
.video-link {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    overflow: hidden; /* keep the blur inside the picture's edges */
}

.video-link a {
    position: relative;
    display: block;
}

.video-link a img {
    display: block;
}

/* A play button: a dark circle with a white triangle */
.video-link .play-button {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
}

.video-link .play-button::after {
    content: "";
    position: absolute;
    left: 29px;
    top: 22px;
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent #fff;
}

.video-link a:hover .play-button,
.video-link a:focus-visible .play-button {
    background: rgba(0, 0, 0, 0.8);
}

/* The checkbox is hidden but still reachable from the keyboard */
.video-link .cw-toggle {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

/* Until the warning is dismissed, the picture is blurred and the warning covers it */
.video-link .cw-toggle:not(:checked) ~ a {
    filter: blur(14px);
    transform: scale(1.1); /* so the blurred edges don't fade to transparent */
    pointer-events: none;
}

.video-link .cw-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    line-height: 1.3;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    text-align: center;
    cursor: pointer;
}

.video-link .cw-title {
    font-weight: bold;
    font-size: 1.1em;
}

.video-link .cw-hint {
    font-size: 0.85em;
    opacity: 0.85;
}

.video-link .cw-toggle:focus-visible ~ .cw-label {
    outline: 2px solid #fff;
    outline-offset: -6px;
}

.video-link .cw-toggle:checked ~ .cw-label {
    display: none;
}