/* Uberspace documentation design */

:root {
    --md-text-font: "Roboto";
    --md-code-font: "Roboto Mono";

    /* Core Colors */
    --color-black: #06001e;
    --color-white: #fff;
    --color-dark: #212134;
    --color-light: #f4f1ff;

    /* Grayscale */
    --color-gray-0: #f9f7ff;
    --color-gray-1: #f4f1ff;
    --color-gray-2: #e0dce8;
    --color-gray-3: #c8c2d9;
    --color-gray-4: #9f9caf;
    --color-gray-5: #7e7a91;
    --color-gray-6: #4d4c68;
    --color-gray-7: #403a60;
    --color-gray-8: #383651;
    --color-gray-9: #2b2b3a;

    /* Accents */
    --color-blue: #28c2ff;
    --color-yellow: #fffc9c;
    --color-green: #47d7ac;
    --color-orange: #ffca3a;
}

[data-md-color-scheme] {
    --md-primary-fg-color: var(--color-black);
    --md-typeset-color: var(--md-default-fg-color);
    --md-accent-fg-color: var(--site-link-color);
    --md-typeset-a-color: var(--site-link-color);
    --md-default-fg-color--lighter: var(--color-gray-5);
}

/* Light theme */

[data-md-color-scheme$="-light"] {
    --site-terminal-dot: var(--color-gray-4);
    --site-terminal-background: var(--color-gray-2);
    --site-terminal-border: var(--color-gray-3);
    --site-terminal-text: var(--color-gray-6);
    --site-link-color: var(--site-accent-strong);
    --site-code-mark: var(--color-gray-2);
    --site-code-comment: var(--color-gray-6);
    --site-code-keyword: var(--site-accent-strong);
    --site-code-string: var(--site-accent-strong);
    --site-code-number: #a80046;
    color-scheme: light;
    --md-default-fg-color: var(--color-gray-8);
    --md-default-fg-color--light: var(--site-accent-strong);
    --md-default-bg-color: var(--color-white);
    --md-admonition-bg-color: var(--color-gray-0);
    --md-typeset-mark-color: var(--site-accent-soft);
    --md-code-fg-color: var(--color-gray-9);
    --md-code-bg-color: var(--color-gray-1);
    --site-control-border: var(--color-gray-5);
    --site-muted: var(--color-gray-6);
    --site-info: #0369a1;
    --site-success: #08775c;
    --site-warning: #766000;
    --site-danger: #b0004b;
}

/* Dark theme */

[data-md-color-scheme$="-dark"] {
    --site-terminal-dot: var(--color-gray-5);
    --site-terminal-background: var(--color-gray-8);
    --site-terminal-border: var(--color-gray-6);
    --site-terminal-text: var(--color-gray-4);
    --site-link-color: var(--site-accent-soft);
    --site-code-mark: var(--color-gray-8);
    --site-code-comment: var(--color-gray-4);
    --site-code-keyword: var(--site-accent-soft);
    --site-code-string: var(--color-green);
    --site-code-number: var(--color-orange);
    color-scheme: dark;
    --md-default-fg-color: var(--color-light);
    --md-default-fg-color--light: var(--color-gray-3);
    --md-default-bg-color: var(--color-black);
    --md-typeset-mark-color: var(--site-accent-strong);
    --md-admonition-fg-color: var(--color-white);
    --md-admonition-bg-color: var(--color-dark);
    --md-code-fg-color: var(--color-light);
    --md-code-bg-color: var(--color-gray-9);
    --md-typeset-table-color: var(--color-gray-6);
    --site-control-border: var(--color-gray-4);
    --site-muted: var(--color-gray-3);
    --site-info: var(--color-blue);
    --site-success: var(--color-green);
    --site-warning: var(--color-yellow);
    --site-danger: #ff80b4;
}

[data-md-color-scheme$="-dark"] .md-typeset table:not([class]) {
    background-color: var(--color-dark);
    border: 1px solid var(--color-gray-6);
}

[data-md-color-scheme$="-dark"] .md-typeset table:not([class]) th {
    background-color: var(--color-gray-8);
    color: var(--color-light);
    border-bottom: 1px solid var(--color-gray-6);
}

[data-md-color-scheme$="-dark"] .md-typeset table:not([class]) td {
    border-top: 1px solid var(--color-gray-7);
}

/* Typography: branding fonts and Material content fonts, hosted locally. */
@font-face {
    font-family: "Uberspace Navigation";
    src: url("../_static/fonts/alternate-gothic-no3-d.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Uberspace Body";
    src: url("../_static/fonts/opensans-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Material default content fonts, hosted locally (licenses in _static/fonts). */
/* latin-ext */
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(../_static/fonts/roboto-latin-ext-italic.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(../_static/fonts/roboto-latin-italic.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../_static/fonts/roboto-latin-ext-normal.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../_static/fonts/roboto-latin-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../_static/fonts/roboto-mono-latin-ext-normal.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../_static/fonts/roboto-mono-latin-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Material supplies the type scale, heading weights and line heights. */
.md-typeset h1 { color: var(--site-link-color); }

.md-typeset :is(blockquote, small) { color: var(--site-muted); }
.md-typeset blockquote { border-color: var(--site-control-border); }

.md-typeset .md-button {
    border: 1px solid var(--site-link-color);
    border-radius: 0.2rem;
    background: transparent;
    color: var(--site-link-color);
    padding: 0.5em 1em;
    box-shadow: none;
}

.md-typeset .md-button:is(:hover, :focus-visible),
.md-typeset .md-button--primary {
    background: var(--site-accent-strong);
    border-color: var(--site-accent-strong);
    color: var(--color-white);
}

:where(a, button, input, summary, label[tabindex]):focus-visible {
    outline: 2px solid var(--site-link-color);
    outline-offset: 3px;
}

.md-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--site-accent-soft); }

.site-footer-nav a:focus-visible,
.md-typeset a:focus-visible,
.md-header a:focus-visible,
.md-header button:focus-visible {
    outline: 2px solid var(--site-link-color);
    outline-offset: 4px;
}

.md-typeset :is(.admonition, details)[class] {
    --site-status: var(--site-info);
    border: 1px solid var(--site-status);
    border-radius: 0.2rem;
    box-shadow: none;
}

.md-typeset :is(.admonition, details):is(.success, .check, .done) { --site-status: var(--site-success); }
.md-typeset :is(.admonition, details):is(.warning, .caution, .attention) { --site-status: var(--site-warning); }
.md-typeset :is(.admonition, details):is(.danger, .failure, .fail, .missing, .error, .bug) { --site-status: var(--site-danger); }

.md-typeset :is(.admonition, details) > :is(.admonition-title, summary) {
    background: color-mix(in srgb, var(--site-status) 10%, transparent);
    color: var(--md-default-fg-color);
}

.md-typeset :is(.admonition, details) > :is(.admonition-title, summary)::before {
    background-color: var(--site-status);
}

.md-typeset details > summary::after { color: var(--site-status); }

.md-typeset :is(h1, h2, h3, h4, h5, h6)[id] { scroll-margin-top: 110px; }

.md-code__button { color: var(--site-muted); opacity: 1; }
.md-code__button:is(:hover, :focus-visible) { color: var(--site-link-color); }

[data-md-color-scheme] .md-nav__item :is(.md-nav__link:hover, .md-nav__link--active) {
    color: var(--site-link-color);
    font-weight: bold;
}

/* Syntax colors are defined once per theme above. Keep token specificity
   equal to Material's selectors so its defaults do not override these colors. */
[data-md-color-scheme] .highlight span { color: var(--md-code-fg-color); }
[data-md-color-scheme] .highlight .hll { background-color: var(--site-code-mark); }
[data-md-color-scheme] .highlight :is(.c, .cd, .cm, .c1, .cs) { color: var(--site-code-comment); }
[data-md-color-scheme] .highlight :is(.k, .kd, .kn, .kp, .kr, .kt) { color: var(--site-code-keyword); }
[data-md-color-scheme] .highlight :is(.s, .sb, .sc, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss) { color: var(--site-code-string); }
[data-md-color-scheme] .highlight :is(.m, .mb, .mf, .mh, .mi, .il, .mo) { color: var(--site-code-number); }

/* Terminal boxes */

.highlight.language-console,
pre.language-console-remote {
    position: relative;
    border-radius: 0.4rem;
    border: 1px solid var(--color-gray-6);
    margin: 1rem 0;
    overflow: hidden;
}

/* Title bar */
.highlight.language-console::before,
pre.language-console-remote::before,
.md-typeset .highlight.language-console > .filename {
    display: block;
    height: 1.6rem;
    background: radial-gradient(circle at 0.9rem 0.8rem, var(--site-terminal-dot) 0.3rem, transparent 0.3rem), var(--site-terminal-background);
    border-bottom: 1px solid var(--site-terminal-border);
    color: var(--site-terminal-text);
    font-family: var(--md-code-font-family);
    font-size: 0.65rem;
    line-height: 1.6rem;
    padding: 0 0 0 1.4rem;
}

.highlight.language-console::before {
    content: "localuser@localhost: ~ - Terminal";
}

pre.language-console-remote::before {
    content: "isabell@moondust: ~ - ssh moondust.uberspace.de";
}

/* Code area */
.highlight.language-console code,
pre.language-console-remote code {
    display: block;
    padding: 0.5rem;
    font-family: var(--md-code-font-family);
}

/* Trailing prompt */
pre.language-console-remote code::after {
    content: "\A[isabell@moondust ~]$ ";
    white-space: pre;
    color: var(--md-code-fg-color);
}

.highlight.language-console pre {
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Custom title support */
.md-typeset .highlight.language-console > .filename {
    border-radius: 0;
    font-weight: normal;
    margin: 0;
    position: relative;
}

.highlight.language-console:has(.filename)::before {
    display: none;
}

.highlight.language-console > .filename::before {
    content: "";
    position: absolute;
    top: 0.2rem;
    right: 0.4rem;
    width: 1.2rem;
    height: 1.2rem;
    background-color: var(--site-terminal-text);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b5cf6'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
}

/* Branding and tabbed layout */

.md-header__inner {
    position: relative;
    align-items: center;
    flex-wrap: nowrap;
    min-height: 86px;
}

.md-header .md-search {
    position: absolute;
    top: calc(50% - 22px);
    left: var(--site-search-left);
    right: var(--site-search-right, 4px);
    width: auto;
    padding: 0;
    z-index: 3;
}

#__search ~ .md-header .md-search__inner {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    transform: none;
    transition: none;
    z-index: 1;
    overflow: visible;
}

#__search ~ .md-header .md-search__overlay {
    position: fixed;
    inset: var(--site-search-overlay-top) 0 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: rgb(0 0 0 / 40%);
    transform: none;
}

#__search ~ .md-header .md-search__form { height: 44px; }
#__search ~ .md-header .md-search__form > .md-search__icon { display: none; }
#__search ~ .md-header .md-search__input,
#__search ~ .md-header .md-search__suggest {
    height: 44px;
    padding-left: 0.6rem;
}

#__search ~ .md-header .md-search__output {
    top: 44px;
    bottom: auto;
    width: 100%;
    height: auto;
}

#__search ~ .md-header .md-search__scrollwrap {
    width: 100%;
    height: auto;
    max-height: var(--site-search-height, 70vh);
}

#__search:checked ~ .md-header .md-search__inner {
    animation: site-search-open 180ms ease-out;
}

@keyframes site-search-open {
    from { clip-path: inset(0 100% -100vh 0); }
    to { clip-path: inset(0 0 -100vh 0); }
}

#__search:not(:checked) ~ .md-header .md-search {
    visibility: hidden;
    overflow: hidden;
}

.site-search-trigger {
    position: relative;
    z-index: 4;
    background: transparent;
    color: inherit;
    cursor: pointer;
    justify-content: center;
    min-width: 32px;
}

.site-search-trigger svg {
    width: 20px;
    height: 20px;
}

/* Anchor the fixed-size mascot to the sticky header beside the content grid.
   Narrow viewports naturally crop it instead of shrinking it. */
.site-mascot {
    position: absolute;
    top: 24px;
    left: 0;
    z-index: 5;
    width: max(0px, calc((100% - 61rem) / 2));
    height: 0;
    pointer-events: none;
}

.site-mascot__image {
    display: block;
    position: absolute;
    top: 0;
    right: 16px;
    width: 200px;
    height: auto;
}

[data-md-color-scheme$="-light"] .site-mascot__image {
    filter: drop-shadow(2px 4px 6px rgb(0 0 0 / 10%));
}

/* Match the typography, spacing and colors of uberspace.de's top menu. */
.md-tabs {
    color: var(--color-gray-4);
}

.md-header .md-tabs {
    flex: 1;
    min-width: 0;
    width: auto;
    margin-right: 0.6rem;
}

.md-header .md-tabs > .md-grid {
    margin: 0;
}

.md-tabs__list {
    align-items: center;
    gap: 32px;
    height: 86px;
    padding-inline: 0.4rem;
    overscroll-behavior-x: contain;
}

.md-tabs__item {
    flex-shrink: 0;
    height: auto;
    padding: 0;
}

.md-tabs__link {
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 11px 0;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: "Uberspace Navigation", "Arial Narrow", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    opacity: 1;
    transition: color 150ms ease;
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__link:hover,
.md-tabs__link:focus-visible {
    color: var(--color-white);
}

.md-tabs__item--active > .md-tabs__link {
    border-bottom-color: var(--site-accent-soft);
}

.md-header .md-tabs__list {
    overflow-x: auto;
    scrollbar-width: thin;
}

.md-header .md-tabs__list::-webkit-scrollbar {
    height: 3px;
}

/* Pages without a sidebar use the section tabs instead of an empty drawer. */
.md-sidebar--primary[hidden] {
    display: none;
}

body:has(.md-sidebar--primary[hidden]) .md-header__button[for="__drawer"] {
    display: none;
}

/* Uberspace footer artwork, typography, spacing, and responsive list layout. */
.site-footer {
    position: relative;
    isolation: isolate;
    background: var(--color-gray-9);
    color: var(--color-gray-4);
    font: 16px / 1.66 "Uberspace Body", sans-serif;
}

.site-footer::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../_static/images/footer/stars.svg") top center;
    transform: rotate(180deg);
    content: "";
    pointer-events: none;
}

.site-footer__inner {
    display: grid;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-inline: auto;
    max-width: 61rem;
    padding: 80px 24px;
    text-align: center;
}

.site-footer__brand img {
    display: block;
    width: 120px;
    height: auto;
    margin-inline: auto;
}

.site-footer__slogan {
    margin: 0;
    color: var(--site-accent-soft);
    font: 32px / 1.079 "Uberspace Navigation", "Arial Narrow", sans-serif;
    text-transform: uppercase;
}

.site-footer__slogan span {
    white-space: nowrap;
}

.site-footer-nav {
    display: grid;
    justify-content: center;
    align-items: start;
    gap: 32px;
}

.site-footer-nav__group {
    display: grid;
    grid-template-columns: 24px auto;
    gap: 8px;
    text-align: left;
}

.site-footer-nav__icon {
    width: 24px;
    height: 24px;
    margin-top: -4px;
    background-color: var(--color-gray-9);
}

.site-footer-nav__column {
    margin: 0;
    padding: 0 0 0 8px;
    border-left: 2px solid var(--color-gray-2);
    list-style: none;
}

.site-footer-nav a {
    display: block;
    color: inherit;
}

.site-footer-nav a:hover,
.site-footer-nav a[aria-current="page"] {
    color: var(--color-white);
}

.site-footer-palette {
    display: grid;
    justify-items: start;
    margin-top: 0.5rem;
}

.site-footer-palette label:not([hidden]) {
    display: flex;
    align-items: center;
    min-height: 44px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.site-footer-palette label[hidden] {
    display: none;
}

.site-footer-palette label:hover { color: var(--color-white); }

.site-footer-palette input:focus-visible + label {
    outline: 2px solid var(--site-accent-soft);
    outline-offset: 3px;
}

/* Landing pages */

.site-landing > h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.site-landing > h1 .headerlink {
    display: none;
}

.site-landing :target {
    scroll-margin-top: 110px;
}

.md-typeset .grid.cards.site-paths {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin: 1rem 0;
}

.md-typeset .grid.cards.site-paths > ul > li {
    display: flex;
    flex-direction: column;
    padding: 0.8rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-top: 3px solid var(--site-accent);
    border-radius: 0.5rem;
    background: var(--md-code-bg-color);
    box-shadow: none;
}

.md-typeset .grid.cards.site-paths > ul > li > p {
    margin: 0;
}

.md-typeset .grid.cards.site-paths > ul > li > hr {
    margin: 0.6rem 0;
}

.md-typeset .grid.cards.site-paths > ul > li > p:last-child {
    margin-top: auto;
    padding-top: 0.7rem;
}

.md-typeset .grid.cards.site-paths .md-button {
    width: 100%;
    padding: 0.5em 0.8em;
    text-align: center;
    border-radius: 0.25rem;
}

/* Responsive layout (Material breakpoints). */

@media screen and (min-width: 45em) {
    .site-footer-nav {
        grid-template-columns: repeat(4, max-content);
        gap: 16px;
    }
}

@media screen and (min-width: 76.25em) {
    .site-footer__inner {
        grid-template-columns: auto auto auto;
        justify-content: space-between;
    }

    /* Enclose the menu so the sticky sidebar stops above the footer. */
    .md-sidebar--primary {
        height: auto;
    }

    .md-sidebar--primary .md-sidebar__scrollwrap {
        /* Override Material's inline height, which shrinks near the footer.
           Reserve the header, main margin and sidebar padding. */
        height: auto !important;
        max-height: calc(100dvh - 86px - 3.9rem);
    }

    .md-nav--primary > .md-nav__title {
        display: none;
    }
}

@media screen and (max-width: 76.234375em) {
    .md-tabs {
        display: block;
    }
}

@media screen and (max-width: 44.984375em) {
    #__search:checked ~ .md-header .md-tabs__item:not(:has(.site-search-trigger)) {
        display: none;
    }

    .md-header__inner {
        min-height: 50.5px;
        padding-block: 0;
    }
    .md-header .md-tabs {
        margin-right: 0;
    }
    .md-tabs__list {
        gap: 6px;
        height: 50.5px;
        padding-inline: 0.2rem;
    }
    .md-tabs__link {
        font-size: 18px;
    }
    .md-header__button:not(.md-logo) {
        margin: 0;
        padding: 0.2rem;
    }

    .md-typeset :is(h1, h2, h3, h4, h5, h6)[id] { scroll-margin-top: 66.5px; }

    .site-landing :target { scroll-margin-top: 66.5px; }
    .md-typeset .grid.cards.site-paths { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 22em) {
    .md-tabs__list {
        gap: 4px;
    }
    .md-tabs__link {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #__search:checked ~ .md-header .md-search__inner { animation: none; }
}