/* Vars */
:root {
    --info: #a9d9f9;
    --primary: #265bec;
    --secondary: #d6425e;
    --danger: #eb4e4e;
    --on-danger: white;

    --gray1: #a1a1a1;
    --gray2: #f9f9f9;

    --md-book-like-width: 800px;

    --br-1: 4px;

    --sp-0: 2px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 16px;
}

/* Global tags */
body {
    font-family:
        et-book, Palatino, "Palatino Linotype", "Palatino LT STD",
        "Book Antiqua", Georgia, serif;
    margin: 0;
    padding: 0;
}

a {
    color: var(--primary);
}
a:active,
a:hover,
a:enabled {
    color: var(--secondary);
}

/* Container */
@media (min-width: 992px) {
    #container {
        display: flex;
        gap: var(--sp-3);
    }

    #container #toc {
        width: 15%;
    }

    #container #content {
        width: 85%;
    }
}
#container #content {
    background-image:
        linear-gradient(to right, var(--gray2) 1px, transparent 1px),
        linear-gradient(to bottom, var(--gray2) 1px, transparent 1px);
    background-size: calc(var(--sp-3) * 2) calc(var(--sp-3) * 2);
    padding: var(--sp-2);
}

/* TOC */
#container #toc ul {
    list-style-type: none;
    padding: var(--sp-2);
}
#container #toc ul li {
    padding: var(--sp-0);
}

/* Content header */
#container #content-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
}

/* Content */
#container #content img,
#container #content p,
#container #content pre.shiki,
#container #content .alert,
#container #content .uc-panel-card,
#container #content .katex-display {
    max-width: var(--md-book-like-width); /* White-listing elements as tables must take the whole width for instance */
}
#container #content pre.shiki {
    padding: var(--sp-2);
    text-wrap: wrap;
    word-break: break-word;
}
#container #content table th,
#container #content table td {
    max-width: 400px;
    padding: var(--sp-1);
    text-wrap: wrap;
    word-break: break-word;
}
#container #content .alert {
    padding: var(--sp-2);
}
#container #content .alert-info {
    background-color: var(--info);
}
#container #content .description {
    font-size: 1.4em;
}
#container #content > .katex-display {
    display: block;
}
#container #content .katex-html {
    display: none;
}
#container #content .metadata {
    color: var(--gray1);
}

/* UC */
.uc-panel-card-body {
    display: flex;
    gap: var(--sp-2);
}
.uc-panel-card-body-uc-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.uc-panel-card-body-uc-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.uc-panel-card-body-uc-form-field-control-default {
    min-width: 200px;
}
.uc-panel-card-body-uc-form-field-desc {
    color: var(--gray1);
}
.uc-panel-card-body-uc-form-field-err {
    color: var(--danger);
}
.uc-panel-card-body-uc-form-field-label {
    display: block;
    font-weight: medium;
}
.uc-panel-card-body-uc-output {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--sp-2);
    max-height: 300px;
    overflow: auto;
}
.uc-panel-card-body-uc-output-err {
    background-color: var(--danger);
    border-radius: var(--br-1);
    color: var(--on-danger);
    padding: var(--sp-1);
}
.uc-panel-card-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}