@import url('https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300..700&family=Overpass:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    color-scheme: dark;

    --bg: #111111;
    --header: #2e2f41;
    --border-bg: #222122;
    --viewer-bg: #2a2a2a;
    --primary: #F4F4F4;
    --secondary-light: #CCCCCC;
    --secondary: #999999;
    --secondary-dark: #888888;
    --tertiary-midlight: #555555; 
    --tertiary-light: #666666;
    --tertiary: #444444;
    --quaternary: #333333;
    --danger: #FE4445;
    --accent: #388FF0;
    --accent-light: #76b0f8;
    --accent-lighter: #dae7fa;

    --page-bg: white;
    --page-primary: var(--bg);
    /* table lines and code borders: lighter than the text */
    --page-line: #c4c4c4;
    --page-code-bg: #f3f3f1;
}

html, body {
    margin: 0;
}
* {
    box-sizing: border-box;
}

html {
    font-family: 'Overpass', Arial, sans-serif;
    font-size: 13px;
    background: var(--bg);
    color: var(--primary);
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    height: 100svh;
}

.flex {
    display: flex;
    align-items: center;
}
.flex.column {
    flex-direction: column;
}
.grow {
    flex-grow: 1;
}

.primary {
    color: var(--primary);
}
.secondary {
    color: var(--secondary);
}
.secondary-dark {
    color: var(--secondary-dark);
}
.tertiary-light {
    color: var(--tertiary-light);
}
.tertiary {
    color: var(--tertiary);
}
.quaternary {
    color: var(--quaternary);
}
.accent {
    color: var(--accent);
}
.danger {
    color: var(--danger);
}

.upper {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.light {
    font-weight: 400;
}
strong, h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}
.overflow-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

input {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
    margin: 0;
}
input:focus {
    outline: none;
}

header {
    display: flex;
    align-items: center;
    font-size: .9rem;
    width: 100%;
    border-bottom: 1px solid var(--border-bg);
    padding: 0.5rem 1.5rem;
}
header.gap1 {
    gap: 1.5rem;
}
header.gap2 {
    gap: 2.5rem;
    padding: 0.35rem 1.5rem;
}
.header-logo {
    height: 1em;
}

.vertical-div {
    background: var(--border-bg);
    height: 1.5em;
    width: 1px;
    flex-shrink: 0;
}

.search {
    display: flex;
    font-size: 1rem;
    align-items: center;
    gap: 0.8em;
    border: 1px solid var(--quaternary);
    padding: 0 0.8em;
    height: 2.5rem;
    min-width: 12em;
    white-space: nowrap;
}
.search .search-icon {
    height: 1em;
    flex-shrink: 0;
}
.search .search-icon img {
    height: 1em;
}
/* while there's something in the search box, the magnifying glass turns into a button that clears it */
.search .search-clear,
.search:has(input:not(:placeholder-shown)) .search-glass {
    display: none;
}
.search:has(input:not(:placeholder-shown)) .search-clear {
    display: block;
}
.search:not(:has(input:not(:placeholder-shown))) .search-icon {
    cursor: text;
}
.search input {
    border: none;
    background: transparent;
    color: var(--primary);
    letter-spacing: inherit;
    width: 9em;
}
.search input::placeholder {
    color: var(--tertiary);
}
.search button {
    border: none;
    padding: 0;
    color: var(--tertiary-light);
}

mark.search-highlight {
    background: var(--accent-lighter);
    color: var(--bg);
}
mark.search-highlight-active {
    background: var(--bg);
    color: var(--page-bg);
}

.clf {
    font-weight: bold;
    padding: 0.4em 0.8em;
}
.clf.b {
    background: rgba(254, 183, 67, 0.1);
    color: #FEB743;
    border: 1px solid rgba(254, 183, 67, 0.25);
}

img[src*="#icon"] {
    width: 1.25em;
    height: 1.25em;
    vertical-align: text-bottom;
}

a {
    text-decoration: none;
}

button {
    background: transparent;
    border: 1px solid currentColor;
    font-family: inherit;
    font-size: inherit;
    padding: 0.8em 1.5em;
    font-weight: bold;
    letter-spacing: inherit;
    font-size: inherit;
    height: 2.5rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.1s;
    touch-action: manipulation;
}
button:disabled {
    opacity: 0.25;
    cursor: default;
}

main {
    position: relative;
    display: flex;
    width: 100%;
    flex-grow: 1;
    overflow: hidden;
}

.leave-button {
    transition: background-color 100ms;
}
.leave-button:hover {
    background-color: rgba(254,68,69,0.08);
}
.leave-button::after {
    content: "Leave"
}

aside {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(24%, 320px);
    flex-shrink: 0;
    overflow: hidden;
    height: 100%;
}
aside > div {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 1.25em;
}
aside h2.upper {
    font-size: 1rem;
    margin: 0;
}
aside h1.upper {
    font-size: 1.5rem;
    margin: 0;
    margin-top: 0.5rem;
}
.progress-bar {
    height: 2px;
    background: #1e1e1e;
    margin: 0.5em 0;
}
.progress-bar-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.3s ease;
}
.progress-label {
    font-size: 0.8rem;
    color: var(--tertiary);
    display: flex;
    justify-content: space-between;
    letter-spacing: 0.05em;
    gap: 1em;
}

nav {
    position: relative;
    border-top: 1px solid var(--border-bg);
    overflow: scroll;
    padding: 1.25em;
    padding-right: 0;
}
nav ol {
    margin: 0;
    padding: 0;
    padding-left: 1em;
}
nav > ol {
    padding-left: 0;
}
nav li:has(.hv1) > ol {
    padding-left: 2.25em;
}
nav li {
    list-style-type: none;
}
nav li > div {
    display: flex;
    gap: 1ch;
    justify-content: space-between;
    padding: 0.4rem 0;
}
nav a {
    flex-grow: 1;
    color: var(--tertiary-midlight);
    transition: color 100ms;
    font-size: 0.85em;
    display: flex;
    gap: 0.75rem;
}
/* collapsed sections still show the way to the page being read (without being toggled open, so
   they're collapsed again once it's left) */
nav li:has(> div > .dropdown-button.toggled):not(:has(ol a.selected)) > ol {
    display: none;
}
nav > ol:first-child > li:first-child > a {
    padding-top: 0;
}
nav .dropdown-button {
    border: none;
    padding: 0;
    height: unset;
    font-weight: 300;
    font-size: .8rem;
    color: var(--tertiary-light);
    width: 2.5rem;
    justify-content: center;
    flex-shrink: 0;
    transition: color 100ms;
}
nav .dropdown-button:hover {
    color: var(--secondary);
}
nav .dropdown-button::after {
    content: "∧"
}
nav .dropdown-button.toggled {
    color: var(--primary);
}
nav .dropdown-button.toggled::after {
    content: "∨"
}
nav a:has(.hv1) {
    color: var(--tertiary-light);
}
nav .hv1 {
    display: flex;
    gap: inherit;
    font-size: 1.1rem;
    font-weight: 600;
}
nav .hv2 {
    font-size: 1rem;
}
nav .number {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
nav .hv1 > .number {
    color: var(--accent);
    font-size: 1rem;
}
/* unnumbered pages before the first section (like the introduction) have an invisible "00",
   so their names line up with the section names */
nav > ol > li > div > a:not(.hv1) {
    gap: inherit;
}
nav .number.placeholder {
    visibility: hidden;
    font-size: 1rem;
    font-weight: 600;
}
nav li:has(.selected) > div > a {
    color: var(--secondary-light);
}
nav li > div > a:hover {
    color: var(--secondary-light);
}
nav li > div > a.selected, nav li > div > a.selected:hover {
    color: var(--accent);
    pointer-events: none;
}
#navPageMarker {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    background: var(--accent);
    transition: height 0.3s ease, top 0.3s ease, opacity 0.3s;
}
#navPageMarker.hidden {
    display: block;
    opacity: 0;
}

#sideToggleButton {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: none;
    background: var(--bg);
    border: 1px solid var(--quaternary);
    color: var(--secondary);
    font-size: 2em;
    font-weight: normal;
    border-radius: 50%;
    z-index: 2;
    display: none;
}

@media (max-width: 900px) {
    aside {
        width: 0;
    }
    aside.toggled {
        background-color: var(--bg);
        position: absolute;
        width: 100%;
        z-index: 2;
    }
    #sideToggleButton {
        display: block;
    }
}

.viewer {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-grow: 1;
    background: var(--viewer-bg);
}
footer {
    display: flex;
    gap: 1.25em;
    align-items: center;
    justify-content: center;
    height: fit-content;
    flex-shrink: 0;
    background: var(--bg);
    border-top: 1px solid var(--border-bg);
    padding: 0.5rem 1.5rem;
    white-space: nowrap;
}
footer .page-indicator {
    display: flex;
    gap: 1ch;
    align-items: center;
}
footer button {
    border: 1px solid var(--quaternary);
    color: var(--tertiary-light);
    letter-spacing: 0.05em;
    transition: color 0.1s;
}
footer button:hover {
    color: var(--secondary);
}
footer input {
    border: 1px solid var(--quaternary);
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-align: center;
    width: 3em;
    padding: 0.3em;
    font-weight: 700;
}
footer input:focus {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
}
footer input::-webkit-inner-spin-button,
footer input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.hidden {
    display: none;
}
.page.hidden {
    display: block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

#book {
    flex-grow: 1;
    position: relative;
    overflow: scroll;
    display: flex;
    flex-direction: column;

    --page-height: 0px;
}
#book:focus {
    outline: none
}

.page {
    position: relative;
    margin: 2.5rem auto;
    width: 50rem;
    height: var(--page-height);
    max-width: calc(100% - 5rem);
    flex-shrink: 0;
    flex-grow: 0;
    overflow: hidden;
    /* nothing inside a page changes the layout outside it, so splitting one page doesn't make the
       browser lay out the whole book again */
    contain: strict;
    background: var(--page-bg);
    color: var(--page-primary);
    color-scheme: light;
    container-type: inline-size;
    /* an explicit line height, since "normal" changes with font size and would lay pages out differently on small screens */
    line-height: 1.25;

    --default-line-height: 1.5em;
    --h1-size: 2em;
    --h2-size: 1.75em;
    --h3-size: 1.5em;
    --h4-size: 1.25em;
    --h5-size: 1em;
    --h6-size: 0.75em;
}
.page::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/res/doc_template/pulp.jpg);
    background-size: cover;
    opacity: .5;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* page contents are laid out at one fixed size and scaled to fit the page, so line breaks
   and page breaks are exactly the same on every screen */
.page-content {
    --page-layout-width: 650px;
    --rem: calc(0.022 * var(--page-layout-width));
    --default-padding: calc(5.5 * var(--rem)) calc(4 * var(--rem));

    position: relative;
    font-size: var(--rem);
    padding: var(--default-padding);
    width: var(--page-layout-width);
    height: calc(var(--page-layout-width) * 4 / 3);
    transform: scale(var(--page-scale, 1));
    transform-origin: 0 0;
    overflow: hidden;
    contain: strict;
}
/* paragraphs, list items and table cells share one line height (tables of contents keep their own) */
.page-content p,
.page-content :not(.toc) > li,
.page-content th,
.page-content td {
    line-height: var(--default-line-height);
}
.page-content p,
.page-content ul:not(.toc),
.page-content ol {
    margin: 0.75em 0;
}
/* headings keep the default space above them; below, h3-h6 get half the default */
.page-content h3 { margin-bottom: 0.5em; }
.page-content h4 { margin-bottom: 0.665em; }
.page-content h5 { margin-bottom: 0.835em; }
.page-content h6 { margin-bottom: 1.165em; }
.page-content a {
    color: var(--accent);
    text-decoration: underline;
}
.page-content p:nth-child(2),
.page-content h1:nth-child(2),
.page-content h2:nth-child(2),
.page-content h3:nth-child(2),
.page-content h4:nth-child(2),
.page-content h5:nth-child(2),
.page-content h6:nth-child(2) {
    margin-top: 0;
}
.page-content h1 {
    font-size: var(--h1-size);
}
.page-content h2 {
    font-size: var(--h2-size);
    background-color: var(--header);
    color: var(--page-bg);
    padding: 0 calc(0.7 * var(--rem));
    padding-top: calc(0.56 * var(--rem));
}
.page-content h3 {
    font-size: var(--h3-size);
    color: var(--header);
}
.page-content h4 {
    font-weight: normal;
    font-size: var(--h4-size);
    color: var(--header);
}
.page-content h5 {
    font-size: var(--h5-size);
}
.page-content h6 {
    font-size: var(--h6-size);
}

.page-content figure {
    margin: 2em 0;
    text-align: center;
}
.page-content figcaption {
    font-style: italic;
    margin-top: 1em;
    font-size: 0.9em;
}
.page-content figure img {
    width: 100%;
    height: 100%;
}
.page-content a:has(img) {
    cursor: zoom-in;
    margin: auto;
    display: block;
    line-height: 0;
    max-height: 20em;
}

.page-content pre:has(code) {
    overflow: scroll;
}
/* where a table is split across pages, its column lines run on past the split and fade out.
   the rows drawing them take up no space (they overhang the table instead), so splitting a table
   doesn't change how much of it fits on a page */
.page-content tr.table-continues td,
.page-content tr.table-continued td {
    position: relative;
    height: 0;
    padding: 0;
    box-shadow: none;
}
.page-content tr.table-continues td::before,
.page-content tr.table-continued td::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0.1em;
    height: 2em;
    background: linear-gradient(to bottom, var(--page-line), transparent);
}
.page-content tr.table-continued td::before {
    top: auto;
    bottom: 0;
    background: linear-gradient(to top, var(--page-line), transparent);
}
.page-content tr.table-continues td:last-child::before,
.page-content tr.table-continued td:last-child::before {
    content: none;
}
/* with a short note at the right, next to the table */
.page-content .table-note {
    position: absolute;
    right: 0;
    white-space: nowrap;
    font-style: italic;
    font-size: 0.85em;
    line-height: 1;
}
.page-content tr.table-continues .table-note {
    top: 0.35em;
}
.page-content tr.table-continued .table-note {
    bottom: 0.35em;
}

/* images that follow one another sit side by side */
.page-content .figure-row {
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
    margin: 2em 0;
}
/* each image's share of the row follows its aspect ratio, so they all come out the same height */
.page-content .figure-row figure {
    flex: var(--ratio, 1) 1 0;
    min-width: 0;
    margin: 0;
}
.page-content figure .video {
    cursor: zoom-in;
    display: block;
    margin: auto;
    max-height: 20em;
    line-height: 0;
}
.page-content figure video {
    width: 100%;
    height: 100%;
}
.page-content code,
.page-content pre:has(code) {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85em;
    background: var(--page-code-bg);
    box-shadow: inset 0 0 0 0.08em var(--page-line);
    border-radius: 0.3em;
}
.page-content code {
    padding: 0.1em 0.35em;
}
.page-content pre:has(code) {
    padding: 0.8em 1em;
    line-height: 1.45;
}
.page-content pre code {
    font-size: 1em;
    background: none;
    box-shadow: none;
    padding: 0;
}
/* code blocks marked wrap (```wrap) break long lines instead of scrolling */
.page-content pre.wrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* level scripts (```c3script or ```js) are highlighted, with line numbers */
.page-content pre.script code {
    counter-reset: line;
}
.page-content pre.script .line::before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    width: 2ch;
    margin-right: 1.25em;
    text-align: right;
    color: #a3a39e;
    user-select: none;
}
.page-content .hljs-keyword,
.page-content .hljs-literal {
    color: #1f5fbf;
}
.page-content .hljs-string {
    color: #2f7d32;
}
.page-content .hljs-number {
    color: #b5561c;
}
.page-content .hljs-comment {
    color: #8a8a85;
    font-style: italic;
}
.page-content .hljs-title.function_ {
    color: #7a3fb0;
}
.page-content .hljs-title.class_,
.page-content .hljs-built_in {
    color: #0e7490;
}

.breadcrumbs {
    font-size: 0.8em;
    position: absolute;
    top: calc(2.8 * var(--rem));
    text-transform: uppercase;
}
.breadcrumbs a {
    font-weight: 700;
    text-decoration: none;
}

.enter-from-left {
    z-index: 1;
}
.exit-to-left, .exit-to-right,
.enter-from-left, .enter-from-right {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}
.exit-to-left {
    animation: exit-to-left 300ms ease-in-out;
}
.exit-to-right {
    animation: exit-to-right 300ms ease-in-out;
}
.enter-from-left {
    animation: enter-from-left 300ms;
}
.enter-from-right {
    animation: enter-from-right 300ms;
}
@keyframes exit-to-left {
    0% {
        visibility: visible;
        opacity: 0.5;
        transform: translate(calc(-50% - 2em), 0);
        rotate: 0;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 0);
        rotate: -1deg;
    }
}
@keyframes exit-to-right {
    0% {
        visibility: visible;
        opacity: 0.5;
        transform: translate(calc(-50% + 2em), 0);
        rotate: 1deg;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 0);
        rotate: 0;
    }
}
@keyframes enter-from-left {
    0% {
        visibility: visible;
        transform: translate(calc(-50% - 2em), 0);
        rotate: -1deg;
    }
    100% {
        transform: translate(-50%, 0);
        rotate: 0;
    }
}
@keyframes enter-from-right {
    0% {
        visibility: visible;
        transform: translate(calc(-50% + 2em), 0);
        rotate: 1deg;
    }
    100% {
        transform: translate(-50%, 0);
        rotate: 0;
    }
}
@media (max-width: 770px) {
    .hide-when-medium {
        display: none;
    }
}
@media (max-width: 450px) {
    #book {
        position: relative;
        justify-content: center;
        overflow: hidden;
    }
    .page {
        max-width: calc(100% - 3rem);
    }
    .page.hidden {
        margin: 0;
        top: 50%;
        left: 1.5rem;
        transform: translate(0, -50%);
    }
    .search input {
        width: 5em;
    }
    .hide-when-small {
        display: none;
    }
    .exit-to-left, .exit-to-right,
    .enter-from-left, .enter-from-right {
        position: absolute;
        margin: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    @keyframes exit-to-left {
        0% {
            visibility: visible;
            opacity: 0.5;
            rotate: 0;
        }
        100% {
            opacity: 0;
            rotate: -1deg;
        }
    }
    @keyframes exit-to-right {
        0% {
            visibility: visible;
            opacity: 0.5;
            rotate: 1deg;
        }
        100% {
            opacity: 0;
            rotate: 0;
        }
    }
    @keyframes enter-from-left {
        0% {
            visibility: visible;
            transform: translate(calc(-50% - 2em), -50%);
            rotate: -1deg;
        }
        100% {
            transform: translate(-50%, -50%);
            rotate: 0;
        }
    }
    @keyframes enter-from-right {
        0% {
            visibility: visible;
            transform: translate(calc(-50% + 2em), -50%);
            rotate: 1deg;
        }
        100% {
            transform: translate(-50%, -50%);
            rotate: 0;
        }
    }
}
@media (max-width: 500px) {
    header {
        justify-content: space-between;
        padding: 0.5rem 1rem;
    }
    header.gap1 {
        gap: 1em;
    }
    header.gap2 {
        padding: 0.35rem 1rem;
    }
    .search {
        flex-grow: 1;
    }
    .search input {
        flex-grow: 1;
    }
    .hide-when-smaller {
        display: none;
    }
}
@media (max-width: 400px) {
    .leave-button {
        padding: 0.5em 1em;
    }
    .leave-button::after {
        content: "X";
    }
}

/* page templates */

.section-title::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/res/doc_template/handbook-z_poly-page1.svg);
    background-repeat: no-repeat;
}
.section-title {
    color: var(--page-bg);
}
.section-title .toc,
.section-title:has(.toc) p {
    max-width: 50%;
}
.section-title .toc a {
    color: inherit;
}
.section-title:has(.toc) .page-content {
    padding: 10em 5em;
}
.section-title:has(.toc) .page-content h1 {
    font-size: 5em;
    margin: 0;
    font-weight: 800;
    line-height: 1;
}
.section-title:has(.toc) .page-content p {
    font-style: italic;
    margin-bottom: 1.5em;
}
.section-title .breadcrumbs {
    right: 5em;
}
.section-title .breadcrumbs a {
    color: inherit;
}

/* page components */

.toc {
    list-style-type: none;
    padding: 0;
    font-size: 0.8em;
}
.toc li {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 0.75em;
}
.toc li::after {
    content: attr(data-page);
}
.toc a {
    text-decoration: none;
}

.task-list {
    list-style-type: none;
    padding-left: 2em;
}
.task-list-item {
    display: flex;
    gap: 0.5em;
    align-items: flex-start;
}
.task-list-item input {
    cursor: pointer;
}

.page-content table {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
}
.page-content th {
    font-weight: 700;
    background: var(--accent-lighter);
}
/* cell lines are inset shadows rather than borders: browsers round borders to whole pixels,
   which makes tables proportionally taller on small screens */
.page-content th, td {
    box-shadow: inset -0.1em -0.1em 0 var(--page-line);
    padding: .3em .5em;
}
.page-content th:last-child, td:last-child {
    box-shadow: inset 0 -0.1em 0 var(--page-line);
}

.page-content .preserve-spacing p {
    margin: 0;
}
.page-content .preserve-spacing {
    white-space: pre;
}
.page-content .preserve-spacing br {
    display: none;
}

.note-yellow, .note-blue, .page-content a:has(img) {
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
}
.note-yellow, .note-blue {
    margin: 1.25em 0;
    padding: 1.5em;
    padding-top: 3.5em;
    padding-bottom: 2.5em;
    position: relative;
    z-index: 1;
    font-size: calc(0.9 * var(--rem));
}
.note-yellow::before, .note-blue::before {
    content: "";
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 2em;
}
.note-yellow::after, .note-blue::after {
    content: "";
    position: absolute;
    bottom: 1.5em;
    right: 1.5em;
    background-image: url(/res/logos/z-corp_symbolmark.svg);
    width: 3.5em;
    height: 1.5em;
    background-repeat: no-repeat;
    background-position: bottom right;
}
.note-yellow::before {
    background-color: #f1b756;
}
.note-blue::before {
    background-color: #7fb0ee;
}
.note-blue {
    background: #9ecdff;
}
.note-yellow {
    background: #f5c97e;
}
.note-yellow p, .note-blue p {
    margin: 0;
}

.page-content ul {
    list-style-type: "•";
}
.page-content li {
    padding-left: .75em;
}

/* bespoke pages */

[data-url="/"] .page-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
[data-url="/"] .title-header {
    padding: 3.5em 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75em;
}
[data-url="/"] .title-classified {
    color: var(--danger);
    font-weight: 900;
    text-transform: uppercase;
}
[data-url="/"] .title-tag::before {
    content: "C";
    background: var(--danger);
    color: #911c14;
    padding: .3em .5em;
}
[data-url="/"] .title-tag div {
    background: #eaeaea;
    width: fit-content;
    padding: .3em .5em;
}
[data-url="/"] .title-warning {
    background: #fdf1dc;
    padding: 1em;
    width: 100%;
    font-size: 0.8em;
}
[data-url="/"] .title-title {
    margin-top: 1em;
}
[data-url="/"] .title-title h2 {
    background-color: transparent;
    color: var(--accent-light);
    font-size: 1em;
}
[data-url="/"] .title-title h1,
[data-url="/"] .title-edition,
[data-url="/"] .title-warning {
    color: #f2ba5a;
}
[data-url="/"] .title-title h1 {
    font-size: 3.5em;
    text-align: left;
    line-height: 1.1em;
    margin: 0;
}
[data-url="/"] .title-subtitle {
    margin-top: 15%;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}
[data-url="/"] .title-edition {
    font-weight: 700;
}
[data-url="/"] .title-graphic {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
[data-url="/"] .title-logo {
    position: absolute;
    bottom: 2.5em;
    right: 3.5em;
    height: 8.5em;
}
[data-url="/"] .title-quote {
    position: absolute;
    bottom: 3.5em;
    left: 7em;
    color: var(--page-bg);
    font-weight: 700;
}

[data-url="/development-handbook-for-builders%E2%84%A2"]::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/res/doc_template/handbook-z_poly-page2.svg);
    background-repeat: no-repeat;
}
[data-url="/development-handbook-for-builders%E2%84%A2"] .page-content {
    padding-top: calc(4.5 * var(--rem));
    color: var(--page-bg);
    text-align: justify;
    font-size: calc(0.7 * var(--rem));
}
[data-url="/development-handbook-for-builders%E2%84%A2"] .breadcrumbs {
    font-size: inherit;
}
[data-url="/development-handbook-for-builders%E2%84%A2"] .page-content a {
    color: inherit;
}
[data-url="/development-handbook-for-builders%E2%84%A2"] .preserve-spacing:last-of-type {
    position: absolute;
    bottom: 5em;
    color: black;
    font-size: calc(0.6 * var(--rem));
}

[data-url="/404"] p:first-child {
    margin-top: 0;
}

[data-url="/glossary"] .page-content {
    padding-bottom: 5em !important;
}
[data-url="/glossary"].vis-contd .page-content {
    padding: 5em !important;
}
[data-url="/glossary"]::before {
    top: -48.5%;
}
[data-url="/glossary"] .toc {
    color: black;
}
/* start the list below the blue background */
[data-url="/glossary"]:not(.vis-contd) .toc {
    margin-top: 10em;
}
[data-url="/glossary"].vis-contd::before {
    background-image: none;
}
/* a section that was just navigated to */
.page-content .section-target {
    animation: section-target 1.5s ease-out;
}
@keyframes section-target {
    from {
        background-color: var(--accent-lighter);
    }
}