:root,
:host {
    /* Minimal theming hooks mapped to Pico so dark/light toggles work */
    --brand-color: var(--pico-primary);
    --text-default: var(--pico-color, #1f2937);
    --bg-header: var(--pico-background-color, #ffffff);
    --bg-panel: var(--pico-background-color, #ffffff);
    --border-soft: var(--pico-muted-border-color, #e5e7eb);
    --list-style: disc;
    --header-height: 4.5rem;
    --header-margin-bottom: 1.5rem;
    --full-header-height: calc(var(--header-height) + var(--header-margin-bottom));
    --light-theme-box-shadow: rgba(89, 89, 89, 0.12) 0px 32px 64px -24px;
    --light-theme-box-shadow-hover: rgba(7, 7, 7, 0.12) 0.0140368px 31.9691px 63.9312px -23.9663px;
    --dark-theme-box-shadow: rgba(252, 252, 252, 0.12) 0px 32px 64px -24px;
    --dark-theme-box-shadow-hover: rgba(255, 255, 255, 0.12) 0.0140368px 31.9691px 63.9312px -23.9663px;
    --elements-background: color-mix(in srgb, rgb(244, 244, 244) 80%, transparent);
    --main-background-color-dark: rgb(19, 22.5, 30.5);
    --main-background-color-light: white;
    --main-background-color: var(--main-background-color-light);
    --pico-initial-background-color: var(--pico-background-color);
    --pico-color: #1f2937;
    --pico-primary: var(--pico-color);
    --pico-font-size: 16px;
    --pico-typography-spacing-vertical: 1.5rem;
    --pico-border-radius: 6px;
    --pico-box-shadow: rgba(0, 65, 117, 0.12) 0px 32px 64px -24px;
    --pico-warning-color: coral;
    --pico-error-color: #f44336;
    --pico-nav-element-spacing-vertical: 0.5rem;
    --pico-box-shadow: var(--light-theme-box-shadow);
    --box-shadow-hover: var(--light-theme-box-shadow-hover);
    --pico-form-element-active-border-color: var(--pico-muted-border-color);
    --pico-form-element-focus-color: var(--pico-muted-color);
    --pico-form-element-focus-background-color: var(--pico-background-color);
    --pico-form-element-focus-box-shadow: none;
    --pico-form-element-focus-color: var(--pico-muted-color);
    --pico-primary-border-color: var(--pico-muted-border-color);
}

@media (prefers-color-scheme: dark) {

    :root,
    :host {
        --main-background-color: var(--main-background-color-dark);
    }

    :root:not([data-theme=dark]),
    :host:not([data-theme=dark]) {
        --pico-box-shadow: var(--dark-theme-box-shadow);
        --box-shadow-hover: var(--dark-theme-box-shadow-hover);
        --pico-primary: var(--pico-color);
        --main-background-color: var(--main-background-color-dark);
    }

    :root:not([data-theme=light]),
    :host:not([data-theme=light]) {
        --pico-box-shadow: var(--dark-theme-box-shadow);
        --box-shadow-hover: var(--dark-theme-box-shadow-hover);
        --pico-primary: var(--pico-color);
        --elements-background: color-mix(in srgb, var(--pico-form-element-background-color) 80%, transparent);
        --main-background-color: var(--main-background-color-dark);
    }

    :root[data-theme=light],
    :host[data-theme=light] {
        --pico-box-shadow: var(--light-theme-box-shadow);
        --box-shadow-hover: var(--light-theme-box-shadow-hover);
        --pico-primary: var(--pico-color);
        --main-background-color: var(--main-background-color-light);
    }
}

:host(:not([data-theme=dark])),
:root:not([data-theme=dark]),
[data-theme=light] {
    --pico-primary: var(--pico-color);

    --pico-form-element-active-border-color: var(--pico-muted-border-color);
    --pico-form-element-focus-color: var(--pico-muted-color);
    --pico-form-element-focus-background-color: var(--pico-background-color);
    --pico-form-element-focus-box-shadow: none;
    --pico-form-element-focus-color: var(--pico-muted-color);
    --pico-primary-border-color: var(--pico-muted-border-color);
}

/* Ensure all text elements use Pico variables in dark theme */
[data-theme=dark] {
    --pico-color: #c2c7d0;
    --pico-box-shadow: var(--dark-theme-box-shadow);
    --box-shadow-hover: var(--dark-theme-box-shadow-hover);
    --pico-primary: var(--pico-color);
    --elements-background: color-mix(in srgb, var(--pico-form-element-background-color) 80%, transparent);
    --main-background-color: var(--main-background-color-dark);
}


[data-theme=dark] .section-card {
    color: var(--pico-color);
}

[data-theme=dark] .section-card h3 {
    color: var(--pico-h1-color);
}

[data-theme=dark] .section-card p {
    color: var(--pico-color);
}

[data-theme=dark] article {
    background-color: var(--pico-background-color);
    color: var(--pico-color);
}


/* App frame */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

abbr[title] {
    border: none;
    cursor: initial;
}

dl dt {
    border-left: 3px solid var(--pico-muted-border-color);
    padding-left: 17px;
    margin-left: 0;
    font-weight: 600;
    margin-top: 1rem;
}

dl dd {
    margin: 0 0 1rem 0;
    border-left: 3px solid var(--pico-muted-border-color);
    padding-left: 1rem;
}

dl.tabs {
    margin: 1rem 0;
    display: flex;
    flex-wrap: wrap;

    dt {
        display: block;
        border-left: none;
        padding: 0.75rem 1.25rem;
        margin: 0;
        margin-right: 0.125rem;
        margin-bottom: -1px;
        font-weight: 500;
        cursor: pointer;
        background-color: color-mix(in srgb, var(--pico-muted-border-color) 60%, var(--pico-background-color));
        color: var(--pico-muted-color);
        border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0;
        border: 1px solid var(--pico-muted-border-color);
        border-bottom: none;
        transition: background-color 0.2s ease, color 0.2s ease;
        user-select: none;
        position: relative;
        z-index: 1;
        order: 1;
        flex-shrink: 0;

        &:hover {
            background-color: color-mix(in srgb, var(--pico-muted-border-color) 50%, var(--pico-background-color));
            color: var(--pico-color);
        }

        &.active {
            background-color: var(--pico-background-color);
            color: var(--pico-color);
            border-bottom: 1px solid var(--pico-background-color);
            z-index: 2;
        }
    }

    dd {
        display: none;
        border-left: none;
        padding: 0;
        margin: 0;
        margin-top: -1px;
        border: 1px solid var(--pico-muted-border-color);
        border-radius: var(--pico-border-radius) var(--pico-border-radius) var(--pico-border-radius) var(--pico-border-radius);
        background-color: var(--pico-background-color);
        position: relative;
        z-index: 1;
        order: 2;
        width: 100%;
        flex-basis: 100%;

        &.active {
            display: block;
            padding: 1rem;
        }

        &.active .code-block-wrapper {
            margin-bottom: 0;
        }
    }
}

.hidden {
    display: none !important;
}

/* Containers (Pico already provides .container) */
.container {
    max-width: 1200px;
}

[role=button],
[type=button],
[type=file]::file-selector-button,
[type=reset],
[type=submit],
button,
.btn {
    background: var(--elements-background);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--pico-primary);
    border: 1px solid transparent;
    cursor: pointer;
    padding: 0.5rem 1rem;
    margin: 0;
    font-size: 1rem;
    border-radius: var(--pico-border-radius);
    transition: all 0.3s ease;
    word-break: keep-all;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;


    &:hover {
        opacity: 0.8;
    }
}

button:disabled,
button:disabled:hover {
    opacity: 0.5;
    cursor: not-allowed;
}

.button-link,
nav li .button-link {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    color: var(--pico-primary);
}

/* Main layout: left nav + content */
.main-content-container {
    display: grid;
    /* default: left nav + content */
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    padding: 0 1rem;
    max-width: 1880px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    width: 100%;
}

/* If mini-toc is not empty, on big screen add third column */
@media (min-width: 1025px) {

    .main-content-container:has(.toc-subtree),
    .main-content-container:has(.related-links) {
        grid-template-columns: 300px 1fr 270px;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .main-content-container {
        grid-template-columns: 260px 1fr;
    }
}

@media (max-width: 768px) {
    .main-content-container {
        grid-template-columns: 1fr;
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

/* Content body */
.content-body {
    background: transparent;
    width: 100%;
    overflow-y: visible;

    @media (max-width: 768px) {
        max-width: 100vw;
    }
}

.content-body .container {
    max-width: 100%;
}

.content-body article article {
    padding-left: 0;
    padding-right: 0;
}

.content-body article ul li {
    list-style-type: disc;
}

.content-area {
    padding: 1rem 0;
    width: 100%;
    container-type: inline-size;
    container-name: content-area;
}

.content-area .sectiontitle {
    margin-top: 3rem;
}

.content-area p {
    margin-top: 1rem;
}


article {
    background: var(--bg-panel);
    transition: box-shadow 0.5s ease;
    box-shadow: none;
}

.content-area article {
    --pico-card-box-shadow: none;
}

section {
    margin-bottom: 4rem;
}

.homepage-content {
    flex: 1;
}

.homepage-content nav {
    margin-left: 1rem;
}

details.dropdown>summary+ul {
    background: var(--elements-background);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 6px;
    border: none;
    box-shadow: var(--pico-dropdown-box-shadow);
    width: max-content;

    >li>a,
    >li>button {
        display: flex;
    }
}


.section-card {
    text-decoration: none;
    color: var(--pico-color);
    transition: color 0.5s ease;
    background: color-mix(in srgb, var(--pico-background-color) 40%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 6px;
}

.section-card h3 {
    color: var(--pico-h1-color);
}

.section-card p,
.section-card h3 {
    transition: color 0.5s ease;
}

.section-card:hover p,
.section-card:hover h3 {
    color: initial;
}

.section-header-special {
    margin-top: 3rem;
    margin-left: 1rem;
}

/* Breadcrumbs */
.breadcrumbs,
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    align-items: center;
    list-style: none;
    padding: 0 var(--pico-spacing-horizontal, 1rem);
    margin: 0 0 1rem 0;
    justify-content: flex-start;
}

.breadcrumbs a {
    text-decoration: none;
    color: var(--pico-muted-color);
}

@media (prefers-color-scheme: dark) {
    .breadcrumbs a {
        color: var(--pico-muted-color);
    }
}

.breadcrumbs a:hover {
    color: var(--brand-color);
}

.breadcrumbs .arrow {
    opacity: .6;
}

.content-body .breadcrumbs {
    margin: 1rem 0 0 0;

    @media (max-width: 768px) {
        display: none;
    }
}

iframe {
    max-width: 100%;
}

.footer-container {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;

    @media print {
        display: none;
    }

    .footer {
        margin-top: 3rem;
        padding: 2rem;
        border-top: 1px solid var(--border-soft);
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        @media (max-width: 768px) {
            flex-direction: column-reverse;
            gap: 1.5rem;
        }

        p {
            margin: 0;
        }

        .footer-lang-select {
            align-self: flex-end;
            min-width: 160px;
            max-width: 280px;
        }

        .footer-container-inner {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
    }
}

ol,
ul {
    @media (max-width: 768px) {
        padding-left: 1rem;
    }
}

ul li {
    list-style: var(--list-style);
    margin-top: 0.5rem;
}

ol li {
    margin-top: 0.5rem;
}

/* Inline notes */
.note {
    position: relative;
    padding: 1.4rem 1rem 1.4rem 5rem;
    border: 1px solid var(--border-soft);
    margin: 1rem 0;
}

.note p {
    margin-top: 0;
}

/* Left accent rendered with ::after */
.note::after {
    content: "";
    position: absolute;
    left: -1px;
    /* extend over the left border */
    top: -1px;
    /* extend over the top border */
    bottom: -1px;
    /* extend over the bottom border */
    width: 4px;
    background: var(--brand-color);
    pointer-events: none;
}

/* Icon */
.note::before {
    content: "";
    position: absolute;
    left: 2rem;
    top: 1.3rem;
    width: 26px;
    height: 26px;
    background-color: var(--pico-color);
}

.note_note::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' class='MuiSvgIcon-root' viewBox='0 0 24 24' aria-hidden='true' tabindex='-1'%3E%3Cpath d='M21 15.2148L15 21.2108L4.002 21.2148C3.73749 21.2159 3.48337 21.1119 3.29549 20.9257C3.1076 20.7395 3.00132 20.4864 3 20.2218V4.20784C3 3.65984 3.445 3.21484 3.993 3.21484H20.007C20.555 3.21484 21 3.67084 21 4.21684V15.2148ZM19 5.21484H5V19.2148H13V14.2148C13 13.9699 13.09 13.7335 13.2527 13.5505C13.4155 13.3674 13.6397 13.2505 13.883 13.2218L14 13.2148L19 13.2138V5.21484ZM18.171 15.2138L15 15.2148V18.3838L18.171 15.2138Z'%3E%3C/path%3E%3C/svg%3E");
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' class='MuiSvgIcon-root' viewBox='0 0 24 24' aria-hidden='true' tabindex='-1'%3E%3Cpath d='M21 15.2148L15 21.2108L4.002 21.2148C3.73749 21.2159 3.48337 21.1119 3.29549 20.9257C3.1076 20.7395 3.00132 20.4864 3 20.2218V4.20784C3 3.65984 3.445 3.21484 3.993 3.21484H20.007C20.555 3.21484 21 3.67084 21 4.21684V15.2148ZM19 5.21484H5V19.2148H13V14.2148C13 13.9699 13.09 13.7335 13.2527 13.5505C13.4155 13.3674 13.6397 13.2505 13.883 13.2218L14 13.2148L19 13.2138V5.21484ZM18.171 15.2138L15 15.2148V18.3838L18.171 15.2138Z'%3E%3C/path%3E%3C/svg%3E");

}

.note_remember::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='MuiSvgIcon-root' focusable='false' viewBox='0 0 24 24' aria-hidden='true' tabindex='-1'%3E%3Cpath d='M9.9732 18.3427H11.0002V13.3427H13.0002V18.3427H14.0272C14.1592 17.1407 14.7722 16.1487 15.7672 15.0657C15.8802 14.9437 16.5992 14.1987 16.6842 14.0927C17.3905 13.2104 17.8332 12.1465 17.9613 11.0235C18.0895 9.90058 17.8978 8.76428 17.4085 7.74549C16.9191 6.72669 16.1519 5.86683 15.1953 5.26492C14.2387 4.66302 13.1315 4.34355 12.0013 4.34331C10.8711 4.34307 9.76374 4.66207 8.80686 5.26356C7.84999 5.86506 7.08246 6.72459 6.59267 7.74318C6.10288 8.76177 5.91074 9.89798 6.0384 11.021C6.16605 12.144 6.60829 13.2081 7.3142 14.0907C7.4002 14.1977 8.1212 14.9437 8.2322 15.0647C9.2282 16.1487 9.8412 17.1407 9.9732 18.3427ZM10.0002 20.3427V21.3427H14.0002V20.3427H10.0002ZM5.7542 15.3427C4.81239 14.166 4.22215 12.7472 4.05147 11.2497C3.88078 9.75221 4.1366 8.23696 4.78946 6.87849C5.44231 5.52003 6.46564 4.37362 7.74156 3.57133C9.01748 2.76904 10.4941 2.34351 12.0013 2.34375C13.5085 2.34399 14.985 2.77 16.2606 3.5727C17.5363 4.37539 18.5592 5.52213 19.2117 6.8808C19.8641 8.23948 20.1194 9.75481 19.9482 11.2523C19.7771 12.7497 19.1864 14.1683 18.2442 15.3447C17.6242 16.1167 16.0002 17.3427 16.0002 18.8427V21.3427C16.0002 21.8732 15.7895 22.3819 15.4144 22.757C15.0393 23.132 14.5306 23.3427 14.0002 23.3427H10.0002C9.46977 23.3427 8.96106 23.132 8.58599 22.757C8.21092 22.3819 8.0002 21.8732 8.0002 21.3427V18.8427C8.0002 17.3427 6.3752 16.1167 5.7542 15.3427Z'%3E%3C/path%3E%3C/svg%3E");
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='MuiSvgIcon-root' focusable='false' viewBox='0 0 24 24' aria-hidden='true' tabindex='-1'%3E%3Cpath d='M9.9732 18.3427H11.0002V13.3427H13.0002V18.3427H14.0272C14.1592 17.1407 14.7722 16.1487 15.7672 15.0657C15.8802 14.9437 16.5992 14.1987 16.6842 14.0927C17.3905 13.2104 17.8332 12.1465 17.9613 11.0235C18.0895 9.90058 17.8978 8.76428 17.4085 7.74549C16.9191 6.72669 16.1519 5.86683 15.1953 5.26492C14.2387 4.66302 13.1315 4.34355 12.0013 4.34331C10.8711 4.34307 9.76374 4.66207 8.80686 5.26356C7.84999 5.86506 7.08246 6.72459 6.59267 7.74318C6.10288 8.76177 5.91074 9.89798 6.0384 11.021C6.16605 12.144 6.60829 13.2081 7.3142 14.0907C7.4002 14.1977 8.1212 14.9437 8.2322 15.0647C9.2282 16.1487 9.8412 17.1407 9.9732 18.3427ZM10.0002 20.3427V21.3427H14.0002V20.3427H10.0002ZM5.7542 15.3427C4.81239 14.166 4.22215 12.7472 4.05147 11.2497C3.88078 9.75221 4.1366 8.23696 4.78946 6.87849C5.44231 5.52003 6.46564 4.37362 7.74156 3.57133C9.01748 2.76904 10.4941 2.34351 12.0013 2.34375C13.5085 2.34399 14.985 2.77 16.2606 3.5727C17.5363 4.37539 18.5592 5.52213 19.2117 6.8808C19.8641 8.23948 20.1194 9.75481 19.9482 11.2523C19.7771 12.7497 19.1864 14.1683 18.2442 15.3447C17.6242 16.1167 16.0002 17.3427 16.0002 18.8427V21.3427C16.0002 21.8732 15.7895 22.3819 15.4144 22.757C15.0393 23.132 14.5306 23.3427 14.0002 23.3427H10.0002C9.46977 23.3427 8.96106 23.132 8.58599 22.757C8.21092 22.3819 8.0002 21.8732 8.0002 21.3427V18.8427C8.0002 17.3427 6.3752 16.1167 5.7542 15.3427Z'%3E%3C/path%3E%3C/svg%3E");

}

.note_tip::before,
.note_fastpath::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='MuiSvgIcon-root' focusable='false' viewBox='0 0 24 24' aria-hidden='true' tabindex='-1'%3E%3Cpath d='M4 2.47656H20C20.2652 2.47656 20.5196 2.58192 20.7071 2.76946C20.8946 2.95699 21 3.21135 21 3.47656V22.7526C21.0001 22.836 20.9793 22.9181 20.9395 22.9915C20.8997 23.0648 20.8422 23.127 20.7722 23.1725C20.7023 23.2179 20.622 23.2451 20.5388 23.2516C20.4557 23.258 20.3722 23.2436 20.296 23.2096L12 19.5066L3.704 23.2086C3.6279 23.2426 3.54451 23.257 3.46141 23.2506C3.37831 23.2441 3.29813 23.217 3.22818 23.1717C3.15822 23.1264 3.1007 23.0643 3.06085 22.9911C3.021 22.9179 3.00008 22.8359 3 22.7526V3.47656C3 3.21135 3.10536 2.95699 3.29289 2.76946C3.48043 2.58192 3.73478 2.47656 4 2.47656ZM19 20.4416V4.47656H5V20.4416L12 17.3176L19 20.4416ZM12 13.9766L9.061 15.5216L9.622 12.2496L7.245 9.93156L10.531 9.45356L12 6.47656L13.47 9.45356L16.755 9.93156L14.378 12.2496L14.938 15.5216L12 13.9766Z'%3E%3C/path%3E%3C/svg%3E");
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='MuiSvgIcon-root' focusable='false' viewBox='0 0 24 24' aria-hidden='true' tabindex='-1'%3E%3Cpath d='M4 2.47656H20C20.2652 2.47656 20.5196 2.58192 20.7071 2.76946C20.8946 2.95699 21 3.21135 21 3.47656V22.7526C21.0001 22.836 20.9793 22.9181 20.9395 22.9915C20.8997 23.0648 20.8422 23.127 20.7722 23.1725C20.7023 23.2179 20.622 23.2451 20.5388 23.2516C20.4557 23.258 20.3722 23.2436 20.296 23.2096L12 19.5066L3.704 23.2086C3.6279 23.2426 3.54451 23.257 3.46141 23.2506C3.37831 23.2441 3.29813 23.217 3.22818 23.1717C3.15822 23.1264 3.1007 23.0643 3.06085 22.9911C3.021 22.9179 3.00008 22.8359 3 22.7526V3.47656C3 3.21135 3.10536 2.95699 3.29289 2.76946C3.48043 2.58192 3.73478 2.47656 4 2.47656ZM19 20.4416V4.47656H5V20.4416L12 17.3176L19 20.4416ZM12 13.9766L9.061 15.5216L9.622 12.2496L7.245 9.93156L10.531 9.45356L12 6.47656L13.47 9.45356L16.755 9.93156L14.378 12.2496L14.938 15.5216L12 13.9766Z'%3E%3C/path%3E%3C/svg%3E");

}

.note_important::before,
.note_attention::before,
.note_restriction::before,
.note_warning::before,
.note_danger::before,
.note_caution::before,
.note_notice::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='MuiSvgIcon-root' focusable='false' viewBox='0 0 24 24' aria-hidden='true' tabindex='-1'%3E%3Cpath d='M12 22.043C6.477 22.043 2 17.566 2 12.043C2 6.51997 6.477 2.04297 12 2.04297C17.523 2.04297 22 6.51997 22 12.043C22 17.566 17.523 22.043 12 22.043ZM12 20.043C14.1217 20.043 16.1566 19.2001 17.6569 17.6998C19.1571 16.1995 20 14.1647 20 12.043C20 9.92124 19.1571 7.88641 17.6569 6.38611C16.1566 4.88582 14.1217 4.04297 12 4.04297C9.87827 4.04297 7.84344 4.88582 6.34315 6.38611C4.84285 7.88641 4 9.92124 4 12.043C4 14.1647 4.84285 16.1995 6.34315 17.6998C7.84344 19.2001 9.87827 20.043 12 20.043ZM11 15.043H13V17.043H11V15.043ZM11 7.04297H13V13.043H11V7.04297Z'%3E%3C/path%3E%3C/svg%3E");
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='MuiSvgIcon-root' focusable='false' viewBox='0 0 24 24' aria-hidden='true' tabindex='-1'%3E%3Cpath d='M12 22.043C6.477 22.043 2 17.566 2 12.043C2 6.51997 6.477 2.04297 12 2.04297C17.523 2.04297 22 6.51997 22 12.043C22 17.566 17.523 22.043 12 22.043ZM12 20.043C14.1217 20.043 16.1566 19.2001 17.6569 17.6998C19.1571 16.1995 20 14.1647 20 12.043C20 9.92124 19.1571 7.88641 17.6569 6.38611C16.1566 4.88582 14.1217 4.04297 12 4.04297C9.87827 4.04297 7.84344 4.88582 6.34315 6.38611C4.84285 7.88641 4 9.92124 4 12.043C4 14.1647 4.84285 16.1995 6.34315 17.6998C7.84344 19.2001 9.87827 20.043 12 20.043ZM11 15.043H13V17.043H11V15.043ZM11 7.04297H13V13.043H11V7.04297Z'%3E%3C/path%3E%3C/svg%3E");
}

.note_tip::after,
.note_fastpath:after {
    background-color: #FDB801;
}

.note_warning::after,
.note_important::after,
.note_attention::after,
.note_remember::after,
.note_danger::after,
.note_caution::after,
.note_restriction::after,
.note_notice::after {
    background-color: #FF5014;
}

.note .note__title {
    font-weight: 600;
    color: var(--pico-color);
    display: inline;
}

.note .note__title+p {
    display: inline-block;
    margin-left: 0.1rem;
    vertical-align: baseline;
}

.note p:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
}

@media (max-width: 768px) {
    .note {
        padding: 1.5rem 1rem 1.4rem 1.4rem;

        .note__title {
            display: block;
            margin-left: 2.2rem;
            margin-bottom: 1rem;
        }

        &::before {
            left: 1.4rem;
            top: 1.4rem;
        }
    }
}

.content-area h1.title:first-of-type {
    width: calc(100% - 5rem);

    @media (max-width: 768px) {
        width: 100%;
    }
}

/* Styled ordered lists with round numbers and connecting dots */
.content-area .steps {
    counter-reset: item;
    list-style-type: none;
    padding-left: 0;
    margin-top: 1rem;
    position: relative;
}

.content-area .steps::before {
    content: "Procedure";
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
    color: var(--pico-color);
    margin-left: 1rem;
}

.content-area .step {
    position: relative;
    padding: 0.5rem 0 1rem 2.8rem;
    margin-bottom: 0.5rem;
    list-style-type: none;
}

.content-area .step .stepresult::before {
    content: "Step result: ";
    font-weight: 600;
    color: var(--pico-color);
}

.content-area .step::before {
    content: counter(item);
    counter-increment: item;
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: 2px solid var(--pico-muted-border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--pico-color);
    z-index: 2;
}

.content-area .step::after {
    content: "";
    position: absolute;
    left: 0.95rem;
    top: 2.9rem;
    width: 2px;
    height: calc(100% - 2.5rem);
    background: repeating-linear-gradient(to bottom,
            var(--pico-muted-border-color) 0,
            var(--pico-muted-border-color) 4px,
            transparent 4px,
            transparent 8px);
    z-index: 1;
}

.content-area .step:last-child::after {
    display: none;
}

/* Code blocks */
.content-area .code-block-wrapper {
    margin-bottom: 1rem;
    border: 1px solid var(--pico-muted-border-color);
    position: relative;
    max-width: min(100%, 90vw);
    overflow-x: auto;
}

.content-area .code-block-header .code-language-label {
    display: none;
}

.content-area .code-copy-btn {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    width: 28px;
    height: 28px;
    line-height: 0;
    cursor: pointer;
    color: transparent;
    /* hide text; icon shown via ::before */
    overflow: hidden;
}

.content-area .code-copy-btn::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--pico-code-color);
    /* icon color follows text color */
    -webkit-mask: url("../images/copy.svg") no-repeat center / contain;
    mask: url("../images/copy.svg") no-repeat center / contain;
}

.content-area .code-copy-btn:hover {
    opacity: .8;
}

.content-area figure {
    margin-bottom: 1rem;
    margin-top: 1rem;
    max-width: 100%;
    cursor: pointer;

    img,
    svg {
        max-width: 100%;
        height: auto;
    }
}

.content-area .zoomable {
    cursor: pointer;
}

.content-area .ph img {
    margin-bottom: 0.3rem;
}

.ph.uicontrol {
    background: var(--pico-muted-border-color);
    padding: 0.2rem 0.4rem;
    border-radius: 0.3rem;
    color: var(--pico-code-color);
}

.image-modal-image,
.image-modal-image-container>svg {
    max-width: none;
    max-height: none;
    object-fit: contain;
    transform-origin: center center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.image-modal-image-container {
    width: 100%;
    height: 100%;
    overflow: scroll;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.image-modal-buttons {
    position: absolute;
    bottom: 1rem;
    right: 50%;
    transform: translateX(50%);
    display: flex;
    justify-content: row;
    align-items: center;
    gap: 1rem;
    z-index: 9999;
    background-color: var(--elements-background);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 6px;
}

.image-modal-buttons button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid transparent;
}

.image-modal-buttons button:active,
.image-modal-buttons button:focus {
    background-color: transparent;
    --pico-box-shadow: var(--pico-color);
    border: 1px solid currentColor;
}


:root:not([data-theme=dark]) .image-modal-buttons button:active,
:root:not([data-theme=dark]) .image-modal-buttons button:focus {
    border: 1px solid var(--pico-primary);
}

.image-modal-buttons button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.image-modal-buttons button svg {
    width: 24px;
    height: 24px;
    color: var(--pico-primary);
}

.image-modal-buttons button:hover svg {
    opacity: 0.8;
}

code {
    background: var(--pico-muted-border-color);
}

pre {
    font-family: monospace;
    margin-bottom: 0;
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .content-area .steps::before {
        color: var(--pico-color);
    }

    .content-area .step::before {
        border-color: var(--pico-muted-color);
        color: var(--pico-color);
    }

    .content-area .step::after {
        background: repeating-linear-gradient(to bottom,
                var(--pico-muted-color) 0,
                var(--pico-muted-color) 3px,
                transparent 4px,
                transparent 8px);
    }
}

[data-theme=dark] ol::before,
[data-theme=dark] ol>li::before {
    color: var(--pico-color);
    border-color: var(--pico-color);
}

[data-theme=dark] ol>li::after {
    background: repeating-linear-gradient(to bottom,
            var(--pico-color) 0,
            var(--pico-color) 4px,
            transparent 4px,
            transparent 4px);
}

button[type="submit"] {
    width: auto;
}

table caption {
    text-align: left;
}

table caption .table--title-label {
    font-weight: 500;
}

table td,
table th {
    vertical-align: top;
}

.content-body table:not(.table-scroll-wrapper) {
    display: table;
    min-width: 100%;
    table-layout: auto;
}

.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: block;
}

/* Mobile table styling - Automatic responsive tables */
@media (max-width: 1280px) {

    .content-body table td,
    .content-body table th {
        padding: 0.5rem;
        border-right: 1px solid var(--border-soft);

        &:last-child {
            border-right: none;
        }

        p {
            margin: 0;
        }
    }
}

/* Utility classes and helpers */
.navigation-update {
    display: none;
}

.no-bottom-margin {
    margin-bottom: 0;
}

.related-links {
    display: flex;
    flex-direction: column;
}

.related-links br {
    display: none;
}

.related-links .hd-label {
    display: block;
    margin-bottom: .75rem;
    margin-right: .25rem;
    font-weight: 600;
}

.related-links ul.linklist {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0;
    display: block;
}

.related-links li.linklist {
    list-style: disc;
    margin: 0;
    display: list-item;
}

.related-links ul.ullinks {
    display: block;
    margin: 0;
    margin-bottom: 2rem;
}

.related-links li.ulchildlink {
    display: list-item;
    margin: 0;
}

.related-links a.link {
    color: var(--pico-primary);
    --pico-text-decoration: none;
}

.related-links a.link:hover,
.related-links a.link:focus {
    color: var(--pico-primary-hover);
}

.related-links .parentlink {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.next-prev-links {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-soft);

    .next-prev-link {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        border-radius: 0.5rem;
        text-decoration: none;
        color: inherit;
        transition: background-color 0.2s ease, color 0.2s ease;
        flex: 1;
        max-width: 48%;
    }

    .next-prev-link:hover,
    .next-prev-link:focus {
        background-color: var(--pico-card-background-color, rgba(127, 127, 127, 0.1));
        color: var(--pico-primary);
    }

    .next-prev-previous {
        text-align: left;
    }

    .next-prev-next {
        text-align: right;

        .next-prev-content {
            align-items: flex-end;
        }
    }

    .next-prev-icon {
        width: 1.5rem;
        height: 1.5rem;
        flex-shrink: 0;
        color: currentColor;
    }

    .next-prev-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }

    .next-prev-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--pico-muted-color);
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .next-prev-title {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.4;
    }

    .next-prev-link:hover .next-prev-label,
    .next-prev-link:focus .next-prev-label {
        color: var(--pico-primary);
    }

    @media (max-width: 768px) {
        .next-prev-links {
            flex-direction: column;
            gap: 0.75rem;
        }

        .next-prev-link {
            max-width: 100%;
        }

        .next-prev-next {
            text-align: left;
            flex-direction: row;
        }
    }

    @media print {
        display: none;
    }
}


/* External link indicator */
.j-external-link {
    position: relative;
    display: inline-block;
}

.j-external-link::after {
    content: "";
    display: inline-block;
    vertical-align: text-top;
    margin-left: 2px;
    width: 1.2rem;
    height: 1.2rem;
    background-color: currentColor;
    -webkit-mask: url("../images/external-link.svg") no-repeat center / contain;
    mask: url("../images/external-link.svg") no-repeat center / contain;
}

.related-links .j-external-link::after {
    top: 0.55rem;
}

/* Social Sharing */
details.dropdown {
    margin-bottom: 0;

    @media print {
        display: none;
    }
}


details.dropdown.social-sharing-container {
    position: absolute;
    top: 1rem;
    right: 1rem;

    @media print {
        display: none;
    }
}

details.dropdown>summary.dropdown-button {
    padding: 0;
    width: 24px;
    height: 24px;
    border: none;
    background-color: transparent;

    &:hover {
        opacity: 0.8;
    }
}


details.dropdown>summary.dropdown-button:focus {
    border: none;
    box-shadow: none;
    outline: none;
}


details.dropdown>summary.dropdown-button::after {
    display: none;
    color: transparent;
}

details.dropdown.social-sharing-container>summary+ul {
    left: auto;
    right: 0;
    top: 2rem;
}

details.social-sharing-container.dropdown svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--pico-primary);
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}

details.social-sharing-container.dropdown svg.success-icon {
    display: none;
}

details.social-sharing-container.dropdown button#copy-url-button {
    position: relative;
    color: var(--pico-primary);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
    min-width: 152px;
}

details.social-sharing-container.dropdown button#copy-url-button:focus {
    border: none;
    box-shadow: none;
}

details.social-sharing-container.dropdown li:has(button#copy-url-button) {
    transition: all 0.5s ease;
}

details.social-sharing-container.dropdown li:has(button#copy-url-button):hover {
    background-color: var(--pico-dropdown-hover-background-color);
}

.print-button {
    position: absolute;
    top: 0.9rem;
    right: 4rem;
    padding: 0;
    width: 24px;
    height: 24px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: var(--pico-primary);

    &:hover {
        opacity: 0.8;
    }

    &:focus {
        border: none;
        box-shadow: none;
        outline: 2px solid var(--pico-primary);
        outline-offset: 2px;
    }

    svg {
        width: 1.5rem;
        height: 1.5rem;
        color: var(--pico-primary);
    }

    @media print {
        display: none;
    }
}

.print-button,
details.dropdown.social-sharing-container {
    @media (max-width: 768px) {
        top: 0;
        margin-top: -2rem;
    }
}

details.dropdown>summary.print-button+ul {
    left: auto;
    right: 4rem;
    top: 3rem;

    button {
        width: 100%;
    }
}

details.dropdown>summary.dropdown-button {
    padding: 0;
    border: none;
    background: transparent;

    &::after {
        display: none;
    }
}

details.dropdown[open]>summary::before {
    z-index: 1;
}

details.dropdown[open]~details.dropdown>summary {
    pointer-events: none;
    cursor: default;
}

.dita-content-container {
    position: relative;
    overflow-y: visible;
}

.login-wrap {
    max-width: 450px;
    margin: 10vh auto;
    padding: 2rem;
}

.login-wrap p span {
    display: block;
}

.login-wrap .btn-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.login-wrap .btn-container .btn {
    width: 100%;
}

/* Screen reader only content - WCAG compliance */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Social sharing button text transitions */
#copy-url-button span {
    transition: opacity 0.2s ease-in-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-body .content-area .dita-content-container {
    animation: fadeInUp 0.3s ease-out 0.2s both;
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

    .content-body .content-area .dita-content-container {
        animation: none;
    }
}

.error-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;

    @media (min-width: 899px) {
        padding: 2rem;
    }


    .error-title {
        margin-top: 20vh;

        @media (max-width: 768px) {
            margin-top: 10vh;
        }
    }

    .section-cards-grid {
        margin-top: 2rem;
    }
}

.federated-search-wrapper {
    min-height: 100vh;
}


/* Print styles - remove browser headers/footers */
@page {
    margin: 0;
    size: auto;
}

@media print {
    @page {
        margin: 0;
    }

    body {
        margin: 0;
        padding: 1cm;
    }

    .last-modified {
        display: none;
    }
}

.related-links ul.ullinks a,
.related-links a.link {
    color: var(--pico-primary-hover);
}

.related-links ul.ullinks a:hover,
.related-links ul.ullinks a:focus,
.related-links a.link:hover,
.related-links a.link:focus {
    color: var(--pico-primary-hover);
    text-decoration: underline;
}