@import url("https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap");

/*
 * Website-matched presentation for the PreTeXt edition.
 * Content and document structure remain entirely in the .ptx sources.
 */
:root,
:root:not(.dark-mode) {
    --base-content-width: 700px;
    --content-padding: 56px;
    --site-toolbar-height: 42px;
    --site-toolbar-safe-area: 0px;
    --site-toolbar-offset: calc(var(--site-toolbar-height) + var(--site-toolbar-safe-area));
    --page-color: #f6f3ee;
    --content-background: rgba(246, 243, 238, 0.97);
    --page-border-color: #d2cbc0;
    --doc-title-color: #315f80;
    --byline-color: #53616a;
    --banner-background: rgba(246, 243, 238, 0.97);
    --navbar-background: rgba(246, 243, 238, 0.96);
    --footer-background: #ebe6de;
    --toc-background: rgba(246, 243, 238, 0.96);
    --tocitem-background: transparent;
    --toc-border-color: #d2cbc0;
    --toc-text-color: #53616a;
    --toclevel1-background: transparent;
    --toclevel1-text-color: #34434d;
    --toclevel2-background: transparent;
    --toclevel2-text-color: #53616a;
    --toclevel3-background: transparent;
    --toclevel3-text-color: #53616a;
    --tocitem-active-background: #e5e1da;
    --tocitem-active-text-color: #1f4763;
    --tocitem-active-border-color: #9db2c0;
    --tocitem-highlight-background: #ebe6de;
    --tocitem-highlight-text-color: #1f4763;
    --tocitem-highlight-border-color: #d2cbc0;
    --body-text-color: #1f2c35;
    --body-title-color: #24313a;
    --summary-link-background: #ebe6de;
    --summary-link-text-color: #315f80;
    --summary-link-hover-background: #ded9d0;
    --summary-link-hover-text-color: #1f4763;
    --link-text-color: #315f80;
    --link-active-text-color: #1f4763;
    --link-background: transparent;
    --knowl-link-color: #315f80;
    --knowl-background: #efebe4;
    --knowl-border-color: #c8c0b5;
    --block-body-background: rgba(235, 230, 222, 0.48);
    --block-border-color: #b8c5cd;
    --block-head-color: #24313a;
    --button-background: #ebe6de;
    --button-text-color: #34434d;
    --button-border-color: #d2cbc0;
    --button-hover-background: #ded9d0;
    --button-hover-text-color: #1f4763;
    --dropdown-background: #f6f3ee;
    --dropdown-border-color: #d2cbc0;
    --dropdown-text-color: #34434d;
    --dropdown-hover-background: #ebe6de;
    --dropdown-hover-text-color: #1f4763;
    --font-body: "STIX Two Text", Georgia, Cambria, "Times New Roman", Times, serif;
    --font-headings: "STIX Two Text", Georgia, Cambria, "Times New Roman", Times, serif;
    --primary-color: #315f80;
    --secondary-color: #667a68;
}

:root.dark-mode {
    --page-color: #172027;
    --content-background: rgba(23, 32, 39, 0.98);
    --page-border-color: #394750;
    --doc-title-color: #a8cfea;
    --byline-color: #c2c9cd;
    --banner-background: rgba(23, 32, 39, 0.98);
    --navbar-background: rgba(23, 32, 39, 0.98);
    --footer-background: #222e35;
    --toc-background: rgba(23, 32, 39, 0.98);
    --tocitem-background: transparent;
    --toc-border-color: #394750;
    --toc-text-color: #c2c9cd;
    --toclevel1-background: transparent;
    --toclevel1-text-color: #e6e0d8;
    --toclevel2-background: transparent;
    --toclevel2-text-color: #c2c9cd;
    --toclevel3-background: transparent;
    --toclevel3-text-color: #c2c9cd;
    --tocitem-active-background: #293740;
    --tocitem-active-text-color: #d8ebf8;
    --tocitem-active-border-color: #64849a;
    --tocitem-highlight-background: #222e35;
    --tocitem-highlight-text-color: #d8ebf8;
    --tocitem-highlight-border-color: #394750;
    --body-text-color: #f4efe8;
    --body-title-color: #f4efe8;
    --summary-link-background: #222e35;
    --summary-link-text-color: #a8cfea;
    --summary-link-hover-background: #2b3942;
    --summary-link-hover-text-color: #d8ebf8;
    --link-text-color: #a8cfea;
    --link-active-text-color: #d8ebf8;
    --knowl-link-color: #a8cfea;
    --knowl-background: #202b32;
    --knowl-border-color: #465761;
    --block-body-background: rgba(34, 46, 53, 0.78);
    --block-border-color: #526a79;
    --block-head-color: #f4efe8;
    --button-background: #222e35;
    --button-text-color: #e7e1d9;
    --button-border-color: #394750;
    --button-hover-background: #2b3942;
    --button-hover-text-color: #d8ebf8;
    --dropdown-background: #172027;
    --dropdown-border-color: #394750;
    --dropdown-text-color: #e7e1d9;
    --dropdown-hover-background: #222e35;
    --dropdown-hover-text-color: #d8ebf8;
    --primary-color: #a8cfea;
    --secondary-color: #a9b9aa;
}

body.pretext {
    background-color: var(--page-color);
    background-image:
        linear-gradient(30deg, color-mix(in srgb, var(--primary-color) 2.6%, transparent) 1px, transparent 1px),
        linear-gradient(150deg, color-mix(in srgb, var(--secondary-color) 2.2%, transparent) 1px, transparent 1px);
    background-position: 0 0, 18px 10px;
    background-size: 44px 76px;
    font-family: var(--font-body);
    font-size: 1.12rem;
    font-kerning: normal;
    font-optical-sizing: auto;
    font-variant-ligatures: common-ligatures contextual;
    line-height: 1.68;
    text-rendering: optimizeLegibility;
}

/* Keep the keyboard skip link fully offscreen, regardless of text size.
 * Reveal it immediately on focus in the same palette as the thesis.
 * Its inset also keeps the focus outline clear of notches and screen edges.
 */
body.pretext > a.assistive {
    --skip-link-top: calc(0.75rem + env(safe-area-inset-top, 0px));
    --skip-link-left: calc(0.75rem + env(safe-area-inset-left, 0px));
    --skip-link-right: calc(0.75rem + env(safe-area-inset-right, 0px));
    position: fixed;
    top: var(--skip-link-top);
    left: var(--skip-link-left);
    box-sizing: border-box;
    max-width: calc(100% - var(--skip-link-left) - var(--skip-link-right));
    min-height: 44px;
    padding: 0.625rem 1rem;
    border: 1px solid var(--page-border-color);
    border-radius: 2px;
    background: var(--page-color);
    color: var(--link-text-color);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    text-decoration: none;
    box-shadow: none;
    outline: none;
    transform: translateY(calc(-100% - var(--skip-link-top) - 4px));
    transition: none;
    z-index: 10000;
}

body.pretext > a.assistive:focus {
    top: var(--skip-link-top);
    transform: none;
    outline: 2px solid var(--link-text-color);
    outline-offset: 2px;
    transition: none;
}

::selection {
    color: var(--page-color);
    background: var(--link-text-color);
}

.ptx-page,
.ptx-masthead .ptx-banner,
.ptx-navbar .ptx-navbar-contents {
    max-width: 1280px;
}

.ptx-masthead {
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--page-border-color);
}

.ptx-masthead .ptx-banner {
    min-height: 112px;
    padding: 24px 32px;
}

.ptx-masthead .title-container {
    padding-left: 0;
    font-size: clamp(1.45rem, 2.4vw, 2.05rem);
    letter-spacing: -0.015em;
}

.ptx-masthead .title-container .heading {
    font-weight: 600;
    line-height: 1.18;
}

.ptx-masthead .byline {
    margin-top: 0.35rem;
    font-size: 0.62em;
}

.ptx-navbar {
    height: var(--site-toolbar-height);
    border-color: var(--page-border-color);
    background: var(--navbar-background);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Real TikZ paths inherit the surrounding mathematical text colour.
 * Preserve legible labels on small screens with local, keyboard-accessible
 * scrolling, just like wide display mathematics, instead of shrinking text.
 */
.ptx-content .image-box.tex-diagram-box {
    width: 100%;
    max-width: 100%;
    margin: 1.25em 0;
}

.ptx-content .tex-diagram-scroll {
    max-width: 100%;
    overflow-x: auto;
    padding: 0.25em;
    box-sizing: border-box;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.ptx-content svg.tex-diagram {
    display: block;
    width: 20.5em;
    max-width: none;
    height: auto;
    margin-inline: auto;
    background: transparent;
    color: inherit;
}

.ptx-content .tex-diagram-scroll:focus-visible {
    outline: 2px solid var(--link-text-color);
    outline-offset: 2px;
}

@media print {
    .ptx-content .tex-diagram-scroll {
        overflow: visible;
    }

    .ptx-content svg.tex-diagram {
        max-width: 100%;
        color: #000;
    }
}

/* Navigation reads as text on the page, not a row of filled tabs.
 * Scope the variables so hover/open states remain flat in both themes.
 */
.ptx-navbar,
.ptx-content-footer {
    --button-background: transparent;
    --button-hover-background: transparent;
    --button-border-color: transparent;
}

.ptx-navbar .ptx-navbar-contents,
.ptx-navbar .treebuttons,
.ptx-navbar .nav-other-controls {
    background: transparent;
}

.ptx-navbar .button,
.ptx-content-footer .button {
    min-height: 40px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 1px;
}

.ptx-navbar .button:hover:not(.disabled) .name,
.ptx-navbar .button.open .name,
.ptx-content-footer .button:hover:not(.disabled) .name {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

.ptx-navbar .toc-toggle {
    width: 296px;
}

.ptx-sidebar {
    top: var(--site-toolbar-height);
    flex: 0 0 296px;
    border-right: 1px solid var(--toc-border-color);
}

.ptx-toc {
    top: var(--site-toolbar-height);
    height: calc(100vh - var(--site-toolbar-height));
    padding: 0.7rem 0;
    font-size: 0.91rem;
}

.ptx-toc .toc-title-box > .internal {
    padding-top: 0.34em;
    padding-bottom: 0.34em;
}

.ptx-main {
    min-width: 0;
}

.ptx-page > .ptx-main > .ptx-content {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 48px 56px 78px;
    overflow-wrap: break-word;
}

/* Keep wide mathematics and tables scrollable within the reading column. */
.ptx-content :is(.displaymath, .tabular-box) {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.ptx-content-footer {
    max-width: 820px;
    margin: 0 auto;
    padding-right: 56px;
    padding-left: 56px;
}

.ptx-content :is(h1, h2, h3, h4, h5, h6),
.ptx-content .heading {
    font-family: var(--font-headings);
    color: var(--body-title-color);
    letter-spacing: -0.012em;
}

.ptx-content h1.heading {
    font-size: clamp(2rem, 4vw, 2.7rem);
    font-weight: 600;
    line-height: 1.16;
    overflow-wrap: anywhere;
}

.ptx-content h2.heading {
    font-weight: 600;
}

.ptx-content :is(.para, p, li) {
    line-height: var(--ptx-content-line-height, 1.68);
}

.ptx-content a {
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.16em;
    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}

.ptx-content a:hover {
    text-decoration-color: currentColor;
}

:is(a, button, input):focus-visible {
    outline: 2px solid var(--link-text-color);
    outline-offset: 3px;
    border-radius: 4px;
}

.ptx-navbar .button:focus-visible,
.ptx-content-footer .button:focus-visible {
    outline: 2px solid var(--link-text-color);
    outline-offset: -4px;
    border-radius: 0;
}

.ptx-content :is(.theorem-like, .definition-like, .assemblage-like, .remark-like, .example-like) {
    border-left: 3px solid var(--block-border-color);
    border-radius: 0 6px 6px 0;
    background: var(--block-body-background);
    box-shadow: none;
}

.ptx-content .proof-like {
    border-left-color: var(--page-border-color);
}

/* End every proof with a solid QED square, including expanded knowls.
 * Target the proof article, not its details wrapper, to avoid duplicates.
 * A solid border creates a filled square without depending on a font glyph
 * or printed background colours.  currentColor follows light/dark mode.
 */
.ptx-content article:is(.proof, .hiddenproof)::after {
    content: "";
    display: block;
    clear: both;
    box-sizing: content-box;
    width: 0;
    height: 0;
    margin: 0.75em 0 0.15em auto;
    padding: 0;
    border: 0.3em solid currentColor;
    border-radius: 0;
    background: none;
}

@media print {
    .ptx-content article:is(.proof, .hiddenproof)::after {
        color: #000;
    }
}

.ptx-content .knowl-output {
    border-radius: 6px;
    box-shadow: none;
}

.ptx-content .summary-links {
    --summary-link-background: transparent;
    --summary-link-hover-background: transparent;
}

.ptx-content .summary-links a {
    border: 0;
    border-bottom: 1px solid var(--page-border-color);
    border-radius: 0;
    box-shadow: none;
}

.autopermalink a {
    opacity: 0.55;
}

/* Retain the original Calligra dedication and its two centered lines.
 * The web edition uses 28pt lettering (about 12.5% larger than \huge).
 * The SVG is compiled from TeX with the original 5.5-inch text width;
 * the surrounding page space adapts to the browser viewport.
 */
#front-dedication {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: clamp(28rem, calc(100svh - 20rem), 50rem);
}

#front-dedication > h1.heading {
    margin: 0;
    border: 0;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

#front-dedication > .image-box {
    flex: none;
    width: 100%;
    max-width: 5.5in;
    margin: auto !important;
    padding-block: 4rem;
}

#front-dedication .autopermalink {
    display: none;
}

#front-dedication img {
    background: transparent;
    cursor: default;
}

:root.dark-mode #front-dedication img {
    filter: invert(1);
}

@media screen and (max-width: 936px) {
    .ptx-masthead .ptx-banner {
        min-height: 96px;
        padding: 18px 28px;
    }

    .ptx-page > .ptx-main > .ptx-content,
    .ptx-content-footer {
        max-width: 780px;
    }
}

@media screen and (max-width: 800px) {
    :root,
    :root:not(.dark-mode) {
        --site-toolbar-height: 48px;
        --site-toolbar-safe-area: env(safe-area-inset-bottom, 0px);
    }

    body.pretext {
        padding-bottom: var(--site-toolbar-offset);
        font-size: 1.06rem;
    }

    .ptx-navbar {
        top: auto;
        bottom: 0;
        height: var(--site-toolbar-offset);
        padding-bottom: var(--site-toolbar-safe-area);
    }

    .ptx-navbar .ptx-navbar-contents {
        max-width: 100%;
        gap: 0;
    }

    .ptx-navbar .button,
    .ptx-content-footer .button {
        min-width: 44px;
        min-height: 44px;
    }

    .ptx-navbar :is(.toc-toggle, .ptx-search-box, .nav-other-controls) {
        flex: 1 1 0;
        width: auto;
        min-width: 44px;
    }

    .ptx-navbar .treebuttons {
        flex: 3 1 0;
        gap: 0;
    }

    .ptx-navbar :is(.ptx-search-widget, .ptx-search-button, .ptx-readability-options-button) {
        width: 100%;
    }

    #ptx-search-dialog,
    #ptx-readability-options-popup {
        top: auto;
        bottom: var(--site-toolbar-offset);
        width: calc(100% - 16px);
        min-width: 0;
        max-width: 600px;
        max-height: calc(100vh - var(--site-toolbar-offset) - 16px);
        max-height: calc(100dvh - var(--site-toolbar-offset) - 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .ptx-search-box .ptx-search-dialog-controls {
        min-height: 44px;
        flex-shrink: 0;
    }

    .ptx-search-box .ptx-search-terms {
        min-width: 0;
        font-size: 1rem;
    }

    .ptx-sidebar {
        top: auto;
        bottom: var(--site-toolbar-offset);
        width: min(20rem, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
    }

    .ptx-toc {
        top: auto;
        height: auto;
        max-height: 80vh;
        max-height: min(80dvh, calc(100dvh - var(--site-toolbar-offset) - 16px));
    }

    .ptx-page > .ptx-main > .ptx-content {
        padding: 34px 28px 64px;
    }

    .ptx-content-footer {
        padding-right: 28px;
        padding-left: 28px;
    }
}

@media screen and (max-width: 480px) {
    .ptx-masthead .ptx-banner {
        min-height: 68px;
        padding: 14px 18px;
    }

    .ptx-masthead .title-container {
        font-size: 1.02rem;
    }

    .ptx-page > .ptx-main > .ptx-content {
        padding-right: 20px;
        padding-left: 20px;
    }

    .ptx-content-footer {
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media screen and (max-height: 500px) and (max-width: 800px) {
    #front-dedication {
        min-height: 18rem;
    }

    #front-dedication > .image-box {
        padding-block: 2rem;
    }
}

@media print {
    body.pretext {
        background: #ffffff;
    }

    #front-dedication {
        min-height: 8.5in;
    }

    :root.dark-mode #front-dedication img {
        filter: none;
    }
}