/* Reiner VS-Code-Klickrundgang. Jeder Zielanker entspricht einer im
   Generator festgelegten Pixelposition des 900x500-Originalausschnitts. */

.vsc-guide {
    max-width: 1180px;
}

.vsc-guide__intro {
    background: var(--gradient-card-subtle);
}

.vsc-guide .vsc-guide__eyebrow {
    margin: 0 0 var(--spacing-xs);
    color: var(--primary-color);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vsc-guide__format-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) 0;
}

.vsc-guide .vsc-guide__format {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    border: var(--border-thin) solid var(--surface-border-light);
    border-radius: var(--radius-pill);
    background: var(--neutrals-0);
    color: var(--textcolor-80contrast);
}

.vsc-guide .vsc-guide__format strong {
    color: var(--primary-color);
    font-family: var(--font-mono);
}

.vsc-guide__goal-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-sm) var(--spacing-xl);
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.vsc-guide .vsc-guide__prerequisite-link,
body.neutral0color-onbackground .vsc-guide .vsc-guide__prerequisite-link {
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.vsc-guide__platform-note {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    border: var(--border-thin) solid rgba(var(--primary-rgb), 0.28);
    border-left: var(--border-thick) solid var(--primary-color);
    border-radius: var(--radius-lg);
    background: var(--primary-tint);
}

.vsc-guide__platform-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.vsc-guide__platform-head h3 {
    flex: 1 1 280px;
    margin: 0 0 0 var(--spacing-sm);
    font-size: var(--text-lg);
}

.vsc-guide .vsc-guide__platform-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 var(--spacing-sm);
    border: var(--border-thin) solid rgba(var(--primary-rgb), 0.3);
    border-radius: var(--radius-pill);
    background: var(--neutrals-0);
    color: var(--primary-dark);
    font-size: var(--text-xs);
    font-weight: 700;
}

.vsc-guide .vsc-guide__platform-equals {
    color: var(--primary-color);
    font-weight: 700;
}

.vsc-guide__platform-note p {
    margin: 0 0 var(--spacing-sm);
}

.vsc-guide__platform-note ul {
    margin: 0;
    padding-left: var(--spacing-lg);
}

.vsc-guide__platform-note li + li {
    margin-top: var(--spacing-xs);
}

.vsc-guide__tour-start {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.vsc-guide .vsc-guide__tour-panel {
    position: relative;
    width: 100%;
    margin: 0 0 var(--spacing-xl);
    padding: var(--spacing-lg);
    border: var(--border-base) solid var(--primary-color);
    border-radius: var(--radius-xl);
    background: var(--neutrals-0);
    box-shadow: var(--shadow-xl);
    scroll-margin-top: 6rem;
}

.vsc-guide__tour-panel[hidden] {
    display: none;
}

.vsc-guide__tour-head,
.vsc-guide__tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.vsc-guide .vsc-guide__tour-counter {
    color: var(--primary-color);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vsc-guide__tour-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: var(--border-thin) solid var(--surface-border-light);
    border-radius: var(--radius-pill);
    background: var(--surface-bg);
    color: var(--textcolor-80contrast);
    font-size: var(--text-xl);
    cursor: pointer;
}

.vsc-guide__tour-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: var(--spacing-xl);
    align-items: center;
}

.vsc-guide__tour-figure {
    min-width: 0;
    margin: 0;
}

.vsc-guide__tour-crop {
    position: relative;
    overflow: hidden;
    border: var(--border-base) solid var(--surface-border);
    border-radius: var(--radius-lg);
    background: var(--neutrals-0);
    box-shadow: var(--shadow-md);
}

.vsc-guide__tour-crop img {
    display: block;
    width: 100%;
    height: auto;
}

.vsc-guide__tour-target {
    position: absolute;
    z-index: 3;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Die Werte sind die Anker aus generate_vscode_tour_crops.py als Prozent
   des immer 900x500 Pixel großen Ausschnitts. */
.vsc-guide__tour-crop[data-vsc-tour-anchor="top-left"] .vsc-guide__tour-target { left: 10%; top: 14%; }
.vsc-guide__tour-crop[data-vsc-tour-anchor="left-top"] .vsc-guide__tour-target { left: 8.333%; top: 19%; }
.vsc-guide__tour-crop[data-vsc-tour-anchor="left-row"] .vsc-guide__tour-target { left: 25.556%; top: 27%; }
.vsc-guide__tour-crop[data-vsc-tour-anchor="file-row"] .vsc-guide__tour-target { left: 22.222%; top: 27%; }
.vsc-guide__tour-crop[data-vsc-tour-anchor="center"] .vsc-guide__tour-target { left: 50%; top: 50%; }
.vsc-guide__tour-crop[data-vsc-tour-anchor="top-center"] .vsc-guide__tour-target { left: 50%; top: 17%; }
.vsc-guide__tour-crop[data-vsc-tour-anchor="bottom-right"] .vsc-guide__tour-target { left: 87.778%; top: 87%; }
.vsc-guide__tour-crop[data-vsc-tour-anchor="top-menu"] .vsc-guide__tour-target { left: 24.444%; top: 14%; }
.vsc-guide__tour-crop[data-vsc-tour-anchor="left-center"] .vsc-guide__tour-target { left: 8.333%; top: 50%; }
.vsc-guide__tour-crop[data-vsc-tour-anchor="right-top"] .vsc-guide__tour-target { left: 87.778%; top: 22%; }
.vsc-guide__tour-crop[data-vsc-tour-anchor="toolbar"] .vsc-guide__tour-target { left: 50%; top: 22%; }
.vsc-guide__tour-crop[data-vsc-tour-anchor="cell-run"] .vsc-guide__tour-target { left: 20%; top: 50%; }

.vsc-guide__tour-target-ring {
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
    transform: translate(-50%, -50%);
    border: 4px solid var(--warning-500);
    border-radius: var(--radius-pill);
    background: rgba(var(--warning-rgb), 0.08);
    box-shadow: 0 0 0 5px rgba(var(--warning-rgb), 0.2), var(--shadow-md);
    animation: vsc-guide-target-pulse 1.4s ease-in-out infinite;
}

/* Breite Klickflächen werden als echte Rechtecke statt als ungenauer Kreis
   markiert. Der Mittelpunkt bleibt die gemessene Pixelkoordinate. */
.vsc-guide__tour-crop[data-vsc-tour-key="folder-menu"] .vsc-guide__tour-target-ring,
.vsc-guide__tour-crop[data-vsc-tour-key="python-run-menu"] .vsc-guide__tour-target-ring {
    width: 62px;
    height: 34px;
    border-radius: var(--radius-md);
}

.vsc-guide__tour-crop[data-vsc-tour-key="python-file"] .vsc-guide__tour-target-ring,
.vsc-guide__tour-crop[data-vsc-tour-key="notebook-file"] .vsc-guide__tour-target-ring,
.vsc-guide__tour-crop[data-vsc-tour-key="python-tab"] .vsc-guide__tour-target-ring,
.vsc-guide__tour-crop[data-vsc-tour-key="notebook-tab"] .vsc-guide__tour-target-ring {
    width: 170px;
    height: 38px;
    border-radius: var(--radius-md);
}

.vsc-guide__tour-crop[data-vsc-tour-key="python-editor"] .vsc-guide__tour-target-ring {
    width: 110px;
    height: 52px;
    border-radius: var(--radius-md);
}

.vsc-guide__tour-crop[data-vsc-tour-key="python-run-command"] .vsc-guide__tour-target-ring {
    width: 230px;
    height: 36px;
    border-radius: var(--radius-md);
}

/* In einem Notebook ist die ganze helle Zelle der Eingabebereich. Eine kleine
   Box um einzelne Zeichen wirkt hier wie ein falsches Klickziel. */
.vsc-guide__tour-crop[data-vsc-tour-key="notebook-editor"] .vsc-guide__tour-target-ring {
    width: 360px;
    height: 104px;
    border-radius: var(--radius-md);
}

.vsc-guide__tour-crop[data-vsc-tour-key="python-interpreter"] .vsc-guide__tour-target-ring {
    width: 58px;
    height: 34px;
    border-radius: var(--radius-md);
}

.vsc-guide__tour-crop[data-vsc-tour-key="notebook-kernel"] .vsc-guide__tour-target-ring {
    width: 120px;
    height: 38px;
    border-radius: var(--radius-md);
}

.vsc-guide__tour-crop[data-vsc-tour-key="terminal-tab"] .vsc-guide__tour-target-ring {
    width: 84px;
    height: 34px;
    border-radius: var(--radius-md);
}

.vsc-guide__tour-crop[data-vsc-tour-key="python-search"] .vsc-guide__tour-target-ring,
.vsc-guide__tour-crop[data-vsc-tour-key="jupyter-search"] .vsc-guide__tour-target-ring {
    width: 245px;
    height: 42px;
    border-radius: var(--radius-md);
}

.vsc-guide__tour-crop[data-vsc-tour-key="python-extension"] .vsc-guide__tour-target-ring {
    width: 190px;
    height: 66px;
    border-radius: var(--radius-md);
}

.vsc-guide__tour-crop[data-vsc-tour-key="python-install"] .vsc-guide__tour-target-ring {
    width: 140px;
    height: 38px;
    border-radius: var(--radius-md);
}

.vsc-guide__tour-crop[data-vsc-tour-key="jupyter-install"] .vsc-guide__tour-target-ring {
    width: 140px;
    height: 38px;
    border-radius: var(--radius-md);
}

.vsc-guide__tour-crop[data-vsc-tour-key="python-filename"] .vsc-guide__tour-target-ring,
.vsc-guide__tour-crop[data-vsc-tour-key="notebook-filename"] .vsc-guide__tour-target-ring {
    width: 280px;
    height: 42px;
    border-radius: var(--radius-md);
}

.vsc-guide__tour-crop[data-vsc-tour-key="notebook-add-code"] .vsc-guide__tour-target-ring { width: 76px; height: 38px; border-radius: var(--radius-md); }
.vsc-guide__tour-crop[data-vsc-tour-key="notebook-add-markdown"] .vsc-guide__tour-target-ring { width: 112px; height: 38px; border-radius: var(--radius-md); }
.vsc-guide__tour-crop[data-vsc-tour-key="notebook-run-all"] .vsc-guide__tour-target-ring { width: 96px; height: 38px; border-radius: var(--radius-md); }

.vsc-guide__tour-cursor {
    position: absolute;
    left: 11px;
    top: 11px;
    width: 25px;
    height: 25px;
    fill: var(--neutrals-0);
    stroke: var(--textcolor-fullcontrast);
    stroke-width: 1.6;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(var(--primary-rgb), 0.35));
}

.vsc-guide .vsc-guide__tour-target-label {
    position: absolute;
    left: 0;
    bottom: 34px;
    min-width: max-content;
    padding: 0.28rem 0.55rem;
    transform: translateX(-50%);
    border-radius: var(--radius-pill);
    background: var(--warning-500);
    box-shadow: var(--shadow-sm);
    color: var(--textcolor-fullcontrast);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}

.vsc-guide__tour-crop[data-vsc-tour-anchor="top-left"] .vsc-guide__tour-target-label,
.vsc-guide__tour-crop[data-vsc-tour-anchor="left-top"] .vsc-guide__tour-target-label,
.vsc-guide__tour-crop[data-vsc-tour-anchor="top-center"] .vsc-guide__tour-target-label,
.vsc-guide__tour-crop[data-vsc-tour-anchor="top-menu"] .vsc-guide__tour-target-label,
.vsc-guide__tour-crop[data-vsc-tour-anchor="right-top"] .vsc-guide__tour-target-label,
.vsc-guide__tour-crop[data-vsc-tour-anchor="toolbar"] .vsc-guide__tour-target-label {
    top: 34px;
    bottom: auto;
}

.vsc-guide__tour-title-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: var(--spacing-sm);
    align-items: center;
    margin: var(--spacing-sm) 0;
}

.vsc-guide__tour-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: var(--primary-color);
    color: var(--neutrals-0);
}

.vsc-guide .vsc-guide__tour-icon {
    color: var(--neutrals-0);
}

/* Die globale Inhaltsregel faerbt verschachtelte spans dunkel. Das eigentliche
   Rundgangssymbol muss auf dem Primary-Kreis deshalb explizit weiss bleiben. */
.vsc-guide .vsc-guide__tour-icon .vsc-guide__hotspot-icon,
.vsc-guide .vsc-guide__tour-icon .vsc-guide__hotspot-glyph {
    color: var(--neutrals-0);
}

.vsc-guide__hotspot-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.vsc-guide__hotspot-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vsc-guide__hotspot-icon .vsc-guide__hotspot-fill {
    fill: currentColor;
    stroke: currentColor;
}

.vsc-guide__hotspot-glyph {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 900;
}

.vsc-guide__tour-panel h3 {
    margin: 0;
    color: var(--textcolor-fullcontrast);
    font-size: var(--text-lg);
}

.vsc-guide__tour-panel p {
    margin: 0 0 var(--spacing-lg);
}

.vsc-guide__tour-actions {
    justify-content: flex-start;
}

.vsc-guide__tour-back,
.vsc-guide__tour-next {
    min-height: 42px;
    padding: 0.62rem 1rem;
    font-size: var(--text-sm);
}

.vsc-guide__tour-back:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.vsc-guide .vsc-guide__tour-figure figcaption {
    margin-top: var(--spacing-sm);
    color: var(--textcolor-50contrast);
    font-size: var(--text-sm);
}

.vsc-guide__footer {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-lg);
    align-items: center;
}

.vsc-guide__footer p {
    margin: 0;
}

@keyframes vsc-guide-target-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(var(--warning-rgb), 0.18), var(--shadow-md); }
    50% { box-shadow: 0 0 0 8px rgba(var(--warning-rgb), 0.28), var(--shadow-lg); }
}

@media (max-width: 767.98px) {
    .vsc-guide__goal-list {
        grid-template-columns: 1fr;
    }

    .vsc-guide__platform-head h3 {
        flex-basis: 100%;
        margin: var(--spacing-xs) 0 0;
    }

    .vsc-guide__tour-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .vsc-guide__tour-figure {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    .vsc-guide__tour-crop {
        width: 760px;
    }

    .vsc-guide__tour-copy {
        position: sticky;
        left: 0;
    }

    .vsc-guide__footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vsc-guide__tour-target-ring {
        animation: none;
    }
}