.drop-shadow img,
.drop-shadow video,
video.drop-shadow {
    filter: drop-shadow(0 4px 8px rgb(0 0 0 / 25%));
}

/* Cap only tagged course diagrams so their labels do not grow on wide screens.
   Existing percentage widths still determine their size on smaller screens. */
.bd-article img.diagram-width-small {
    max-width: min(100%, 440px);
    height: auto;
}

.bd-article img.diagram-width-medium {
    max-width: min(100%, 470px);
    height: auto;
}

.bd-article img.diagram-width-large {
    max-width: min(100%, 550px);
    height: auto;
}

.bd-article img.diagram-width-overview {
    max-width: min(100%, 550px);
    height: auto;
}

/* Code block labels describe how learners should use each snippet. */
.bd-article {
    --course-code-background: #fff;
    --course-reference-background: #f1f3f5;
    --course-code-border: #d1d5db;
}

html[data-theme="dark"] .bd-article {
    --course-code-background: #181b20;
    --course-reference-background: #252a31;
    --course-code-border: #49515c;
}

.bd-article div.copy-code,
.bd-article div.view-code,
.bd-article div.terminal-output {
    position: relative;
}

.bd-article div.copy-code > .highlight > pre,
.bd-article div.view-code > .highlight > pre,
.bd-article div.terminal-output > .highlight > pre {
    padding-top: 1.25rem;
    background: var(--course-code-background);
    border: 1px solid var(--course-code-border);
    border-radius: 0.375rem;
}

.bd-article div.view-code > .highlight > pre,
.bd-article div.terminal-output > .highlight > pre {
    background: var(--course-reference-background);
}

.bd-article div.optional-dashed > .highlight > pre {
    border-style: dashed;
}

.bd-article div.copy-code::before,
.bd-article div.view-code::before,
.bd-article div.terminal-output::before {
    content: "Paste";
    position: absolute;
    top: 0;
    left: 1rem;
    transform: translateY(-50%);
    z-index: 1;
    padding: 0 0.4rem;
    background: var(--course-code-background);
    color: var(--pst-color-text-base);
    font-family: var(--pst-font-family-base);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}

.bd-article div.run-code::before { content: "Run"; }
.bd-article div.view-code::before { content: "Reference"; }
.bd-article div.terminal-output::before { content: "Output"; }
.bd-article div.copy-code.optional-dashed::before { content: "Optional: Paste"; }
.bd-article div.run-code.optional-dashed::before { content: "Optional: Run"; }

.bd-article .copy-code .copybtn {
    opacity: 1;
    background-color: var(--course-reference-background);
    border-color: var(--course-code-border);
    color: var(--pst-color-text-base);
}

.bd-article .copy-code .copybtn:hover {
    background-color: var(--course-code-background);
}

.bd-article .copy-code .copybtn svg {
    stroke: currentColor;
}

/* Also suppress controls if another script adds them to reference blocks. */
.bd-article .view-code .copybtn,
.bd-article .terminal-output .copybtn {
    display: none !important;
}

html[data-theme="dark"] .drop-shadow img,
html[data-theme="dark"] .drop-shadow video,
html[data-theme="dark"] video.drop-shadow {
    filter: drop-shadow(0 4px 8px rgb(255 255 255 / 25%));
}

/* Keep long inline package and file paths readable on narrow screens.
   Code blocks retain their own horizontal scrolling and original line breaks. */
.bd-article :not(pre) > code.literal,
.bd-article :not(pre) > code.literal .pre {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Let the course title share a phone-sized header with both navigation buttons. */
@media (max-width: 575.98px) {
    .bd-header .navbar-header-items__start {
        flex: 1 1 auto;
        min-width: 0;
    }

    .bd-header .navbar-brand {
        max-width: 100%;
    }

    .bd-header .logo__title {
        white-space: normal;
        font-size: 1rem;
        line-height: 1.2;
    }
}

/* Clickable branches show independent entry points into the learning path. */
.learning-path-diagram {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    --path-line: #76b900;
    --path-title: #426800;
    --path-card-background: transparent;
}

.learning-path-root {
    flex: 0 0 9rem;
    padding: 1rem;
    border: 2px solid var(--path-line);
    border-radius: 0.75rem;
    text-align: center;
    font-weight: 700;
    color: #111;
    background: #76b900;
}

.learning-path-branches {
    flex: 1;
    list-style: none;
    margin: 0 !important;
    padding: 0 0 0 2rem !important;
}

.learning-path-branches li {
    position: relative;
    padding: 0.5rem 0 0.5rem 2rem;
    margin: 0;
}

.learning-path-branches li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-left: 2px solid var(--path-line);
}

.learning-path-branches li:first-child::before { top: 50%; }
.learning-path-branches li:last-child::before { bottom: 50%; }

.learning-path-branches li::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 2rem;
    border-top: 2px solid var(--path-line);
}

.learning-path-branches a {
    display: block;
    position: relative;
    padding: 1rem;
    border: 2px solid var(--path-line);
    border-radius: 0.75rem;
    color: var(--pst-color-text-base);
    text-decoration: none;
    background: var(--path-card-background);
    border-left-width: 6px;
}

.learning-path-branches a strong {
    color: var(--path-title);
}

.learning-path-branches a.learning-path-recommended {
    color: #111;
    background: #76b900;
}

.learning-path-branches a.learning-path-recommended strong {
    color: inherit;
}

.learning-path-branches a:hover,
.learning-path-branches a:focus-visible {
    border-color: var(--path-title);
    outline: 2px solid var(--path-title);
    outline-offset: 3px;
}

.learning-path-branches::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 9rem;
    width: 2rem;
    border-top: 2px solid var(--path-line);
}

.learning-path-diagram { position: relative; }

@media (max-width: 575.98px) {
    .learning-path-diagram { flex-direction: column; align-items: stretch; }
    .learning-path-root { flex-basis: auto; }
    .learning-path-branches { padding-left: 0 !important; padding-top: 1rem !important; }
    .learning-path-branches::before { display: none; }
}

html[data-theme="dark"] .learning-path-diagram {
    --path-title: #a3e635;
}