/* Colors */
body {
    /* Color used for border color (header/footer separation, titles, …) */
    --main-color: #f57c13;
    /* Color used for text in header and footer */
    --dimmed-color: #667080;
    --dimmed-color-darker-10: #585858;

    --dark-color: #282621;
    --white-color: #ffffff;

    --medium-spacing: 16px;
    --small-spacing: 8px;

    --secondary-color: #e3e6eb;
    --info-color: #1aacd8;
    --success-color: #1aa350;
    --danger-color: #e04b4b;

    /* tlp-colors */
    --inca-silver-primary: #5d5d5d;
    --inca-silver-secondary: #cacaca;
    --inca-silver-border: #a5a5a5;
    --inca-silver-text: #525252;

    --chrome-silver-primary: #8f8f8f;
    --chrome-silver-secondary: #dcdcdc;
    --chrome-silver-border: #b7b7b7;
    --chrome-silver-text: #5f5f5f;

    --firemist-silver-primary: #c5c5c5;
    --firemist-silver-secondary: #f3f3f3;
    --firemist-silver-border: #c9c9c9;
    --firemist-silver-text: #6f6f6f;

    --red-wine-primary: #a10202;
    --red-wine-secondary: #f7a9a9;
    --red-wine-border: #da6d70;
    --red-wine-text: #842f2f;

    --fiesta-red-primary: #f02727;
    --fiesta-red-secondary: #f9d1d1;
    --fiesta-red-border: #f7a0a0;
    --fiesta-red-text: #b70d0d;

    --coral-pink-primary: #ff8a8a;
    --coral-pink-secondary: #fff2f2;
    --coral-pink-border: #f1c9c9;
    --coral-pink-text: #bf4747;

    --teddy-brown-primary: #9a600d;
    --teddy-brown-secondary: #e2c59b;
    --teddy-brown-border: #b38d57;
    --teddy-brown-text: #774a0a;

    --clockwork-orange-primary: #f18e06;
    --clockwork-orange-secondary: #ffddae;
    --clockwork-orange-border: #ffc16c;
    --clockwork-orange-text: #945600;

    --graffiti-yellow-primary: #ffd300;
    --graffiti-yellow-secondary: #fff7d0;
    --graffiti-yellow-border: #f5d01b;
    --graffiti-yellow-text: #8a6c00;

    --army-green-primary: #5f8347;
    --army-green-secondary: #b4d49f;
    --army-green-border: #86ab65;
    --army-green-text: #385f1e;

    --neon-green-primary: #6abf1d;
    --neon-green-secondary: #d8efc4;
    --neon-green-border: #94c765;
    --neon-green-text: #137900;

    --acid-green-primary: #b9e45d;
    --acid-green-secondary: #f3fdde;
    --acid-green-border: #c4e6a5;
    --acid-green-text: #567d00;

    --sherwood-green-primary: #009465;
    --sherwood-green-secondary: #a1dcc9;
    --sherwood-green-border: #28c4a0;
    --sherwood-green-text: #006545;

    --ocean-turquoise-primary: #28c4a0;
    --ocean-turquoise-secondary: #cbf5ea;
    --ocean-turquoise-border: #6be0c5;
    --ocean-turquoise-text: #00775c;

    --surf-green-primary: #75e4bf;
    --surf-green-secondary: #eefdf8;
    --surf-green-border: #90e0cd;
    --surf-green-text: #1b805e;

    --deep-blue-primary: #0480bf;
    --deep-blue-secondary: #acd8ef;
    --deep-blue-border: #4eb9f1;
    --deep-blue-text: #005f90;

    --lake-placid-blue-primary: #1ebade;
    --lake-placid-blue-secondary: #d4f7ff;
    --lake-placid-blue-border: #83daef;
    --lake-placid-blue-text: #007792;

    --daphne-blue-primary: #87dbef;
    --daphne-blue-secondary: #eaf9fd;
    --daphne-blue-border: #8deaff;
    --daphne-blue-text: #007a96;

    --plum-crazy-primary: #7c2db3;
    --plum-crazy-secondary: #d2abec;
    --plum-crazy-border: #a075bf;
    --plum-crazy-text: #6a14a7;

    --ultra-violet-primary: #a44ee1;
    --ultra-violet-secondary: #edd4ff;
    --ultra-violet-border: #dab7f3;
    --ultra-violet-text: #8b21d6;

    --lilac-purple-primary: #ce91fa;
    --lilac-purple-secondary: #f6eaff;
    --lilac-purple-border: #ddc0f3;
    --lilac-purple-text: #8e4cbd;

    --panther-pink-primary: #c42887;
    --panther-pink-secondary: #f9b8e0;
    --panther-pink-border: #e886c3;
    --panther-pink-text: #9a1d69;

    --peggy-pink-primary: #e560b2;
    --peggy-pink-secondary: #ffdcf2;
    --peggy-pink-border: #e8b7d6;
    --peggy-pink-text: #c5007a;

    --flamingo-pink-primary: #edacd4;
    --flamingo-pink-secondary: #ffeff5;
    --flamingo-pink-border: #ffd0e1;
    --flamingo-pink-text: #b7438a;
}

.tlp-swatch-inca-silver {
    --primary-color: var(--inca-silver-primary);
    --secondary-color: var(--inca-silver-secondary);
    --border-color: var(--inca-silver-border);
    --text-color: var(--inca-silver-text);
}
.tlp-swatch-chrome-silver {
    --primary-color: var(--chrome-silver-primary);
    --secondary-color: var(--chrome-silver-secondary);
    --border-color: var(--chrome-silver-border);
    --text-color: var(--chrome-silver-text);
}
.tlp-swatch-firemist-silver {
    --primary-color: var(--firemist-silver-primary);
    --secondary-color: var(--firemist-silver-secondary);
    --border-color: var(--firemist-silver-border);
    --text-color: var(--firemist-silver-text);
}
.tlp-swatch-red-wine {
    --primary-color: var(--red-wine-primary);
    --secondary-color: var(--red-wine-secondary);
    --border-color: var(--red-wine-border);
    --text-color: var(--red-wine-text);
}
.tlp-swatch-fiesta-red {
    --primary-color: var(--fiesta-red-primary);
    --secondary-color: var(--fiesta-red-secondary);
    --border-color: var(--fiesta-red-border);
    --text-color: var(--fiesta-red-text);
}
.tlp-swatch-coral-pink {
    --primary-color: var(--coral-pink-primary);
    --secondary-color: var(--coral-pink-secondary);
    --border-color: var(--coral-pink-border);
    --text-color: var(--coral-pink-text);
}
.tlp-swatch-teddy-brown {
    --primary-color: var(--teddy-brown-primary);
    --secondary-color: var(--teddy-brown-secondary);
    --border-color: var(--teddy-brown-border);
    --text-color: var(--teddy-brown-text);
}
.tlp-swatch-clockwork-orange {
    --primary-color: var(--clockwork-orange-primary);
    --secondary-color: var(--clockwork-orange-secondary);
    --border-color: var(--clockwork-orange-border);
    --text-color: var(--clockwork-orange-text);
}
.tlp-swatch-graffiti-yellow {
    --primary-color: var(--graffiti-yellow-primary);
    --secondary-color: var(--graffiti-yellow-secondary);
    --border-color: var(--graffiti-yellow-border);
    --text-color: var(--graffiti-yellow-text);
}
.tlp-swatch-army-green {
    --primary-color: var(--army-green-primary);
    --secondary-color: var(--army-green-secondary);
    --border-color: var(--army-green-border);
    --text-color: var(--army-green-text);
}
.tlp-swatch-neon-green {
    --primary-color: var(--neon-green-primary);
    --secondary-color: var(--neon-green-secondary);
    --border-color: var(--neon-green-border);
    --text-color: var(--neon-green-text);
}
.tlp-swatch-acid-green {
    --primary-color: var(--acid-green-primary);
    --secondary-color: var(--acid-green-secondary);
    --border-color: var(--acid-green-border);
    --text-color: var(--acid-green-text);
}
.tlp-swatch-sherwood-green {
    --primary-color: var(--sherwood-green-primary);
    --secondary-color: var(--sherwood-green-secondary);
    --border-color: var(--sherwood-green-border);
    --text-color: var(--sherwood-green-text);
}
.tlp-swatch-ocean-turquoise {
    --primary-color: var(--ocean-turquoise-primary);
    --secondary-color: var(--ocean-turquoise-secondary);
    --border-color: var(--ocean-turquoise-border);
    --text-color: var(--ocean-turquoise-text);
}
.tlp-swatch-surf-green {
    --primary-color: var(--surf-green-primary);
    --secondary-color: var(--surf-green-secondary);
    --border-color: var(--surf-green-border);
    --text-color: var(--surf-green-text);
}
.tlp-swatch-deep-blue {
    --primary-color: var(--deep-blue-primary);
    --secondary-color: var(--deep-blue-secondary);
    --border-color: var(--deep-blue-border);
    --text-color: var(--deep-blue-text);
}
.tlp-swatch-lake-placid-blue {
    --primary-color: var(--lake-placid-blue-primary);
    --secondary-color: var(--lake-placid-blue-secondary);
    --border-color: var(--lake-placid-blue-border);
    --text-color: var(--lake-placid-blue-text);
}
.tlp-swatch-daphne-blue {
    --primary-color: var(--daphne-blue-primary);
    --secondary-color: var(--daphne-blue-secondary);
    --border-color: var(--daphne-blue-border);
    --text-color: var(--daphne-blue-text);
}
.tlp-swatch-plum-crazy {
    --primary-color: var(--plum-crazy-primary);
    --secondary-color: var(--plum-crazy-secondary);
    --border-color: var(--plum-crazy-border);
    --text-color: var(--plum-crazy-text);
}
.tlp-swatch-ultra-violet {
    --primary-color: var(--ultra-violet-primary);
    --secondary-color: var(--ultra-violet-secondary);
    --border-color: var(--ultra-violet-border);
    --text-color: var(--ultra-violet-text);
}
.tlp-swatch-lilac-purple {
    --primary-color: var(--lilac-purple-primary);
    --secondary-color: var(--lilac-purple-secondary);
    --border-color: var(--lilac-purple-border);
    --text-color: var(--lilac-purple-text);
}
.tlp-swatch-panther-pink {
    --primary-color: var(--panther-pink-primary);
    --secondary-color: var(--panther-pink-secondary);
    --border-color: var(--panther-pink-border);
    --text-color: var(--panther-pink-text);
}
.tlp-swatch-peggy-pink {
    --primary-color: var(--peggy-pink-primary);
    --secondary-color: var(--peggy-pink-secondary);
    --border-color: var(--peggy-pink-border);
    --text-color: var(--peggy-pink-text);
}
.tlp-swatch-flamingo-pink {
    --primary-color: var(--flamingo-pink-primary);
    --secondary-color: var(--flamingo-pink-secondary);
    --border-color: var(--flamingo-pink-border);
    --text-color: var(--flamingo-pink-text);
}

/* Cover page */
.document-title {
    font-size: 20pt;
    border-top: 1pt solid var(--main-color);
    border-bottom: 1pt solid var(--main-color);
    margin-top: 10cm;
    padding: 4rem;
    text-align: center;
}

/* Font size */
body {
    font-size: 12pt;
}

h1 { font-size: 18pt; }
h2 { font-size: 16pt; }
h3 { font-size: 14pt; }
h4 { font-size: 13pt; }
h6 { font-size: 12pt; }

.section-description {
    h1 { font-size: 13pt; }
    h2 { font-size: 12.5pt; }
    h3 { font-size: 12pt; }
    h4 { font-size: 11.5pt; }
    h6 { font-size: 11pt; }
}

h1, h2, h3, h4, h5, h6 {
    font-family: system-ui, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Header & footer */
.document-header-space, .document-header {
    height: 40px;
}

.document-footer-space, .document-footer {
    height: 40px;
}

.document-header-space {
    padding-bottom: 20px;
}

.document-footer-space {
    padding-top: 20px;
}

.document-header, .document-footer {
    position: fixed;
    display: flex;
    justify-content: center;
    inset: auto 0;
}

.document-header {
    top: 0;
    align-items: flex-start;
    border-bottom: 1px solid var(--main-color);
}

.document-footer {
    bottom: 0;
    align-items: flex-end;
    border-top: 1px solid var(--main-color);
}

.custom-header-content {
    color: var(--dimmed-color);
    font-size: 9pt;
}

.custom-footer-content {
    color: var(--dimmed-color);
    font-size: 9pt;
    font-style: italic;
}

/* Table of content */
.table-of-contents > h1 {
    border-bottom: 1pt solid var(--main-color);
    text-align: center;
}

/* Sections content */
.document-content > ol {
    list-style: none;
    padding: 0;
    counter-reset: section;
}

.document-section {
    break-before: auto;
    counter-increment: section;
}

h1.section-title {
    border-bottom: 1pt solid var(--main-color);
}

.section-title {
    &::before {
        display: inline;
        content: counter(section) ". ";
    }

    &.section-title-with-delegated-numbering::before {
        display: none;
        content: unset;
    }
}

/* General style */
body {
    overflow: visible !important;
    margin: 0;
    word-break: break-word
}

a:link, a:visited {
    color: #00c;
    font-weight: bold;
    text-decoration: underline;
}

.document-page {
    break-after: page;
    display: table-row-group;
}

table {
    border-collapse: collapse;
    border: 1pt solid black;
    border-bottom: 0;
}

td, th {
    border-right: 1pt solid black;
    border-bottom: 1pt solid black;
    padding: 2px 4px;
}

th {
    background-color: #dddddd;
    font-weight: bold;
}

img {
    max-width: 100%;
    page-break-inside: avoid;
}

.document-section ul {
    list-style-type: disc;
}

.document-section :is(ol, ul, menu, dir) ul {
    list-style-type: circle;
}

.document-section :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul {
    list-style-type: square;
}

.document-grid-4-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin: var(--medium-spacing) 0 0;
    overflow-wrap: normal;
    gap: var(--small-spacing);

    > .document-grid-element-full-row {
        grid-column-start: span 4;
    }
}

.document-label {
    font-weight: bold;
}

tlp-relative-date {
    display: block;
    margin: var(--medium-spacing) 0 0 0;
}

.document-item-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.document-list-item-inline {
    display: inline-flex;
    align-items: center;
    align-self: center;
    white-space: nowrap;
}

.document-list-item-inline > .document-avatar-mini,
.document-list-item-inline > .document-color-bubble {
    margin: 0 5px 0 0;
}

.document-list-item-inline:not(:last-child)::after {
    content: ",\0000A0";
}

.document-list-item-with-color-bubble, .document-list-item-with-avatar {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

.document-color-bubble {
    content: " ";
    display: flex;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

.document-badge-outline, .document-cross-ref-badge {
    display: inline-block;
    padding: 4px var(--small-spacing);
    font-size: .75rem;
    font-weight: 600;
    line-height: .75rem;
    white-space: nowrap;
    background-color: var(--secondary-color);
    color: var(--text-color);
}

.document-cross-ref-badge {
    border-radius: 15px;
    border: 1px solid var(--border-color);
}

.document-badge-outline, .document-badge {
    border-radius: 3px;
}

.document-badge {
    padding: 4px var(--small-spacing);
    font-size: .75rem;
    font-weight: 600;
    line-height: .75rem;
    white-space: nowrap;
    color: var(--white-color);
}

.document-badge-success {
    background-color: var(--success-color);
}

.document-badge-info {
    background-color: var(--info-color);
}

.document-badge-danger {
    background-color: var(--danger-color);
}

.document-avatar-mini {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
}

.document-artifact-link-table-status-cell {
    text-align: right;
}

.document-artifact-link-row {
    border: 1pt solid var(--dimmed-color);
}

.parent-artifact-link:has(+ :not(.parent-artifact-link)) {
    border-bottom-width: 3pt;
}

.document-link-type {
    width: 110px;
    flex-shrink: 0;
}

.document-xref {
    flex: auto;
}

.document-artifact-link-row-anchor {
    display: flex;
    gap: 6px;
    align-items: center;
}

.document-artifact-link-row-anchor:link, .document-artifact-link-row-anchor:visited {
    text-decoration: none;
    color: var(--dark-color);
    font-weight: normal;
}

.document-artifact-link-project {
    margin: 2px 0 0;
    color: var(--dimmed-color);
    font-size: 0.65rem;
}

.document-steps {
    display: flex;
    flex-direction: column;
    gap: var(--small-spacing);
}

.document-step {
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    line-height: 20px;
    gap: var(--small-spacing);
}

.document-step-rank {
    padding: 0 6px;
    border: 1px solid var(--main-color);
    border-radius: 10px;
    color: var(--main-color);
}

.document-step-definition {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px 0;
}

.document-step-description,
.document-step-expected {
    > p:first-child {
        margin-top: unset;
    }

    > p:last-child {
        margin-bottom: unset;
    }
}

.document-step-results {
    display: grid;
    grid:
        "icon label" auto
        ". expect" auto / 16px auto;
    gap: 5px;
}

.document-step-arrow {
    align-self: center;
}

.document-step-expected {
    grid-area: expect;
}
