/* ------------------------------------------------------------ */
/* Tutorial interactive - shared variables                        */
/* ------------------------------------------------------------ */

:root {
    --tutorial-panel-background: #f8f9fb;
    --tutorial-panel-border: #d8dde3;
    --tutorial-accent: #012845;
    --tutorial-accent-text: #ffffff;
    --tutorial-connected: #1a7f37;
    --tutorial-not-detected: #8a8a8a;
    --tutorial-pass-background: #e6f4ea;
    --tutorial-pass-text: #1a7f37;
    --tutorial-hint-background: #fdf3e4;
    --tutorial-hint-text: #6a4a12;
    --tutorial-flash-background: #e6f4ea;
    --tutorial-skeleton-base: #ececec;
    --tutorial-skeleton-highlight: #f7f7f7;
    --tutorial-response-background: #f5f5f5;
    --tutorial-panel-transition: 300ms;
}

/* ------------------------------------------------------------ */
/* Tutorial interactive - connect panel                           */
/* ------------------------------------------------------------ */

.tutorial-connect {
    margin: 1.5rem 0;
    padding: 1rem 1.2rem;
    border: 1px solid var(--tutorial-panel-border);
    border-radius: 6px;
    background-color: var(--tutorial-panel-background);
}

.tutorial-connect-title {
    margin-bottom: 0.4rem;
    font-weight: bold;
}

.tutorial-connect-intro {
    margin-bottom: 0.9rem;
    font-size: 0.9rem;
}

.tutorial-connect-field {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.tutorial-connect-label {
    width: 6rem;
    font-size: 0.9rem;
}

.tutorial-connect-input {
    width: 18rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--tutorial-panel-border);
    border-radius: 3px;
    font-size: 0.9rem;
}

.tutorial-connect-input-row {
    display: inline-flex;
    align-items: center;
}

/* ------------------------------------------------------------ */
/* Tutorial interactive - connection status line                  */
/* ------------------------------------------------------------ */

.tutorial-status-row {
    display: flex;
    align-items: center;
    margin-top: 0.7rem;
    font-size: 0.8rem;
}

.tutorial-status-dot {
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.45rem;
    border-radius: 50%;
    background-color: var(--tutorial-not-detected);
}

.tutorial-status-connected .tutorial-status-dot {
    background-color: var(--tutorial-connected);
    animation: tutorial-status-pulse 2.4s ease-in-out infinite;
}

@keyframes tutorial-status-pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.35;
    }
    100% {
        opacity: 1;
    }
}

/* ------------------------------------------------------------ */
/* Tutorial interactive - invokers and checks                     */
/* ------------------------------------------------------------ */

.tutorial-invoker-box,
.tutorial-check-box {
    margin: 1rem 0;
}

.tutorial-invoker-label {
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
}

.tutorial-invoker-body {
    display: block;
    width: 100%;
    max-width: 28rem;
    min-height: 3rem;
    margin-bottom: 0.6rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--tutorial-panel-border);
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.85rem;
}

.tutorial-run-button {
    position: relative;
    min-width: 7rem;
    padding: 0.35rem 1rem;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--tutorial-accent-text);
    background-color: var(--tutorial-accent);
    cursor: pointer;
    transition: opacity 150ms, transform 100ms;
}

.tutorial-run-button:active {
    transform: scale(0.97);
}

.tutorial-run-button:disabled {
    opacity: 0.7;
    cursor: default;
}

/* The spinner appears next to the label so the button keeps its width. */
.tutorial-button-running::after {
    content: '';
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-left: 0.5rem;
    border: 2px solid var(--tutorial-accent-text);
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: middle;
    animation: tutorial-spin 700ms linear infinite;
}

@keyframes tutorial-spin {
    100% {
        transform: rotate(360deg);
    }
}

.tutorial-button-shake {
    animation: tutorial-shake 300ms ease-in-out;
}

@keyframes tutorial-shake {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-4px);
    }
    50% {
        transform: translateX(4px);
    }
    75% {
        transform: translateX(-4px);
    }
    100% {
        transform: translateX(0);
    }
}

/* ------------------------------------------------------------ */
/* Tutorial interactive - response panels                         */
/* ------------------------------------------------------------ */

.tutorial-response {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--tutorial-panel-transition) ease-out;
}

.tutorial-response-open {
    max-height: 30rem;
    margin-top: 0.7rem;
}

.tutorial-response-status {
    margin-bottom: 0.3rem;
    font-family: monospace;
    font-size: 0.8rem;
}

.tutorial-response-body {
    max-width: 28rem;
    margin: 0;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    font-size: 0.85rem;
    background-color: var(--tutorial-response-background);
    white-space: pre-wrap;
}

.tutorial-response-flash {
    animation: tutorial-flash 900ms ease-out;
}

@keyframes tutorial-flash {
    0% {
        background-color: var(--tutorial-flash-background);
    }
    100% {
        background-color: transparent;
    }
}

.tutorial-hint {
    max-width: 40rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--tutorial-hint-text);
    background-color: var(--tutorial-hint-background);
}

.tutorial-check-pass {
    max-width: 40rem;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--tutorial-pass-text);
    background-color: var(--tutorial-pass-background);
}

/* ------------------------------------------------------------ */
/* Tutorial interactive - shimmer skeletons                       */
/* ------------------------------------------------------------ */

.tutorial-skeleton-line {
    max-width: 28rem;
    height: 0.8rem;
    margin-bottom: 0.5rem;
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        var(--tutorial-skeleton-base) 25%,
        var(--tutorial-skeleton-highlight) 50%,
        var(--tutorial-skeleton-base) 75%
    );
    background-size: 200% 100%;
    animation: tutorial-shimmer 1200ms linear infinite;
}

.tutorial-skeleton-line:nth-child(2) {
    width: 85%;
}

.tutorial-skeleton-line:nth-child(3) {
    width: 65%;
}

@keyframes tutorial-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* ------------------------------------------------------------ */
/* Tutorial interactive - progress                                */
/* ------------------------------------------------------------ */

.tutorial-progress-bar {
    height: 0.3rem;
    margin: 0.8rem 0 1.5rem 0;
    border-radius: 999px;
    background-color: var(--tutorial-skeleton-base);
    overflow: hidden;
}

.tutorial-progress-fill {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background-color: var(--tutorial-connected);
    transition: width var(--tutorial-panel-transition) ease-out;
}

.tutorial-toc-check {
    width: 0.9rem;
    height: 0.9rem;
    margin-left: 0.4rem;
    color: var(--tutorial-connected);
    vertical-align: middle;
}

.tutorial-toc-current {
    font-weight: bold;
}

/* ------------------------------------------------------------ */
/* Tutorial interactive - completion card                         */
/* ------------------------------------------------------------ */

.tutorial-completion {
    margin: 1.5rem 0;
    padding: 1.2rem 1.4rem;
    border: 1px solid var(--tutorial-connected);
    border-radius: 6px;
    background-color: var(--tutorial-pass-background);
}

.tutorial-completion-title {
    margin-bottom: 0.4rem;
    font-weight: bold;
    font-size: 1.1rem;
}

.tutorial-completion-text {
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
}