/* The tour: lesson on the left, an editor and what it prints on the right. */

:root {
    --tour-width: min(46vw, 780px);
    --tour-top: 50px;
    --tour-kw: #a626a4;
    --tour-fn: #2a6fd6;
    --tour-bi: #0b7a75;
    --tour-ty: #b25c00;
    --tour-st: #3c8a2e;
    --tour-nu: #986801;
    --tour-co: #8a8f98;
    --tour-op: #5c6370;
    --tour-accent: #e8508c;
    --tour-edge: rgba(128, 128, 128, 0.3);
    --tour-panel: rgba(128, 128, 128, 0.08);
}
.coal, .navy, .ayu {
    --tour-kw: #d58cf0;
    --tour-fn: #7ab7ff;
    --tour-bi: #5fd3c8;
    --tour-ty: #f0a45d;
    --tour-st: #a5d68a;
    --tour-nu: #e5c07b;
    --tour-co: #7f8794;
    --tour-op: #a9b2c3;
    --tour-accent: #ff7fb0;
}

.cb-kw { color: var(--tour-kw); font-weight: 600; }
.cb-fn { color: var(--tour-fn); }
.cb-bi { color: var(--tour-bi); }
.cb-ty { color: var(--tour-ty); }
.cb-st { color: var(--tour-st); }
.cb-nu { color: var(--tour-nu); }
.cb-co { color: var(--tour-co); font-style: italic; }
.cb-op { color: var(--tour-op); }

/* ------------------------------------------------------ the lesson's side */

main pre.tour-code { position: relative; border-left: 3px solid transparent; }
main pre.tour-code.tour-chosen { border-left-color: var(--tour-accent); }
main pre.tour-code > code { padding-right: 5.5em; }
.tour-try {
    position: absolute; top: 6px; right: 6px;
    font: inherit; font-size: 0.8em; font-weight: 600;
    padding: 2px 10px; border-radius: 999px; cursor: pointer;
    color: var(--tour-accent); background: transparent; border: 1px solid var(--tour-accent);
}
.tour-try:hover, .tour-try:focus-visible { color: var(--bg); background: var(--tour-accent); }
.tour-try::before { content: "\25B6\00A0"; font-size: 0.8em; }

/* What a block prints, shown straight under it. */
main pre.tour-prints { margin-top: -0.6em; opacity: 0.85; position: relative; }
main pre.tour-prints > code { padding-top: 1.5em; border-top: 1px dashed var(--tour-edge); }
main pre.tour-prints::before {
    content: "prints"; position: absolute; top: 3px; left: 10px; z-index: 1;
    font-size: 0.7em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tour-co);
}
/* mdBook's own buttons on a block get in the way of ours. */
main pre.tour-code > .buttons, main pre.tour-prints > .buttons { display: none; }

main blockquote.tour-from, main blockquote.tour-tip {
    border-block: none; border-left: 4px solid var(--tour-fn); border-radius: 4px; padding: 0.2em 1em;
}
main blockquote.tour-tip { border-left-color: var(--tour-accent); }
main blockquote.tour-from-basic { border-left-color: var(--tour-ty); }
main blockquote.tour-from-python { border-left-color: var(--tour-fn); }
main blockquote.tour-from-javascript { border-left-color: var(--tour-nu); }
main blockquote.tour-from-lua { border-left-color: var(--tour-bi); }
main blockquote.tour-from > p:first-child > strong:first-child,
main blockquote.tour-tip > p:first-child > strong:first-child { color: var(--fg); }

/* Crash-tan herself, beside her introduction. */
main img.tour-crash-tan { float: right; width: 190px; max-width: 40%; height: auto; margin: -1.5em 0 0.5em 1.2em; }
main h2 { clear: both; }

/* --------------------------------------------------------------- the pane */

#tour-pane {
    position: fixed; z-index: 90; right: 0; top: var(--tour-top); bottom: 0; width: var(--tour-width);
    display: flex; flex-direction: column;
    background: var(--bg); color: var(--fg); border-left: 1px solid var(--tour-edge);
    font-size: 1.5rem;
}
.tour-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--tour-edge); background: var(--tour-panel); }
.tour-name { font-weight: 700; }
.tour-keys { flex: 1; font-size: 0.75em; opacity: 0.6; }
.tour-bar button {
    font: inherit; font-size: 0.85em; font-weight: 600; padding: 4px 14px; border-radius: 6px; cursor: pointer;
    color: var(--fg); background: transparent; border: 1px solid var(--tour-edge);
}
.tour-bar button:hover { border-color: var(--fg); }
.tour-bar .tour-run { color: #fff; background: var(--tour-accent); border-color: var(--tour-accent); }
.tour-bar .tour-run:disabled { opacity: 0.5; cursor: default; }
.tour-bar .tour-run::before { content: "\25B6\00A0"; font-size: 0.8em; }

.tour-editor { position: relative; flex: 3 1 0; min-height: 120px; overflow: hidden; }
.tour-back, .tour-text {
    position: absolute; inset: 0; margin: 0; padding: 12px 14px; border: 0; box-sizing: border-box;
    font-family: var(--mono-font, "Source Code Pro", Consolas, Menlo, monospace); font-size: 1.4rem; line-height: 1.5;
    white-space: pre; tab-size: 4; overflow: auto; letter-spacing: 0;
}
.tour-back { pointer-events: none; background: transparent; overflow: hidden; }
.tour-back code { display: block; padding: 0; background: transparent; font: inherit; white-space: inherit; color: var(--fg); }
.tour-text { resize: none; outline: none; background: transparent; color: transparent; caret-color: var(--fg); -webkit-text-fill-color: transparent; }
.tour-text::selection { background: rgba(120, 160, 255, 0.35); }

.tour-problem { padding: 6px 14px; font-size: 0.8em; border-top: 1px solid var(--tour-edge); color: var(--tour-ty); }
.tour-out { flex: 2 1 0; min-height: 90px; overflow: auto; border-top: 1px solid var(--tour-edge); background: var(--tour-panel); padding: 8px 14px 14px; }
.tour-out-name { font-size: 0.7em; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; margin-bottom: 4px; }
.tour-printed { margin: 0; padding: 0; background: transparent; white-space: pre-wrap; word-break: break-word; font-size: 1.4rem; line-height: 1.5; }
.tour-printed.tour-quiet { opacity: 0.55; font-style: italic; }
.tour-error { margin-top: 8px; padding: 8px 12px; border-radius: 6px; border-left: 4px solid var(--tour-accent); background: var(--bg); }
.tour-error p { margin: 0 0 4px; }
.tour-error-tip { font-size: 0.9em; opacity: 0.9; }

/* ------------------------------------------------------------- the layout */

/* A page with no pane beside it has room for longer lines of code. */
html:not(.tour) .content main { max-width: 900px; }

/* A page of tables and no code to try: room for every column. */
html.tour-wide .content main { max-width: 1400px; }
html.tour-wide main table { width: 100%; margin: 0; }
html.tour-wide main table td, html.tour-wide main table th { padding: 6px 12px; text-align: left; }
html.tour-wide main table td:first-child { white-space: nowrap; font-weight: 600; }
html.tour-wide main table td:nth-child(2) { background: var(--tour-panel); }
html.tour-wide main table code { white-space: nowrap; }

@media (min-width: 900px) {
    html.tour .content { padding-right: calc(var(--tour-width) + 12px); }
    html.tour .content main { max-width: 760px; }
    /* The arrows at the page's edges would sit under the pane. */
    html.tour .nav-wide-wrapper { display: none; }
    html.tour .nav-wrapper { display: block; }
}
@media (max-width: 899px) {
    #tour-pane { top: auto; left: 0; width: auto; height: 46vh; border-left: 0; border-top: 2px solid var(--tour-accent); }
    html.tour .content { padding-bottom: 50vh; }
    .tour-keys { visibility: hidden; }
}
@media print {
    #tour-pane, .tour-try { display: none; }
    html.tour .content { padding-right: 0; }
}