/* The Manifold look (docs/manifold-look.md) for the modding docs, layered over
   mdBook's chrome.css and general.css. Tokens are in css/variables.css.

   Square corners; depth from 1px edges only (raised: edge_hi top, edge_sh bottom;
   sunken: well fill, edge_sh outline, edge_hi bottom lip); brass only for state;
   spacing on a 4px grid; Source Sans 3 / Source Code Pro. */

*,
*::before,
*::after {
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html {
    font-family: var(--body-font);
    color: var(--m-text);
    background-color: var(--m-panel);
    scrollbar-color: var(--m-edge-hi) var(--m-panel);
}

body {
    font-size: 1.6rem; /* 16px: game-menu density for reading */
    line-height: 1.5;  /* 24px */
}

::selection {
    background-color: var(--m-brass);
    color: var(--m-brass-ink);
}

:focus-visible {
    outline: 1px solid var(--m-brass) !important;
    outline-offset: 1px;
}

/* --- Menu bar: a title strip on `bg` --------------------------------------- */

#mdbook-menu-bar,
#mdbook-menu-bar.bordered {
    background-color: var(--m-bg);
    border-block-start: 1px solid var(--m-edge-hi);
    border-block-end: 1px solid var(--m-edge-sh);
    box-sizing: border-box;
    height: var(--menu-bar-height);
    align-items: center;
    gap: 8px;
    padding: 0 8px;
}

.menu-title {
    font-family: var(--body-font);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--m-text);
    text-align: start;
    flex: 1;
    margin: 0;
    padding: 0 8px;
    letter-spacing: 0;
}

.left-buttons,
.right-buttons {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 8px;
}

/* Raised icon buttons: raised fill, edge_hi top, edge_sh bottom and outline. */
#mdbook-menu-bar .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    color: var(--m-text-dim);
    background-color: var(--m-raised);
    border: 1px solid var(--m-edge-sh);
    border-block-start-color: var(--m-edge-hi);
}

#mdbook-menu-bar .icon-button:hover {
    color: var(--m-text);
    background-color: var(--m-hover);
    border-block-start-color: #6a775e;
}

#mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper #mdbook-sidebar-toggle,
html.sidebar-visible #mdbook-sidebar-toggle {
    /* Pressed: inverted bevel on `well`, brass icon. */
    background-color: var(--m-well);
    color: var(--m-brass);
    border-color: var(--m-edge-sh);
    border-block-end-color: var(--m-edge-hi);
}

/* --- Sidebar: a `panel` with an edge_sh separator --------------------------- */

.sidebar {
    background-color: var(--m-panel);
    color: var(--m-text-dim);
    border-inline-end: 1px solid var(--m-edge-sh);
    font-size: 1.4rem;
}

.sidebar .sidebar-scrollbox {
    padding: 8px 0 16px;
}

.chapter {
    line-height: 2.4rem;
    margin: 0;
    padding: 0;
}

.chapter li {
    margin: 0;
}

.chapter li.part-title {
    /* Group label: 11px bold uppercase, +0.08em tracking. */
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--m-text-dim);
    margin: 16px 0 4px;
    padding: 0 16px;
}

.chapter li.chapter-item {
    line-height: 2.4rem;
    margin-block-start: 0;
}

.chapter-link-wrapper {
    display: flex;
}

.chapter li a,
.chapter li .chapter-link-wrapper > a {
    display: block;
    flex: 1;
    padding: 4px 16px;
    color: var(--m-text-dim);
    text-decoration: none;
    border-block: 1px solid transparent;
}

.chapter ol.section li a {
    padding-inline-start: 32px;
}

.chapter li a:hover {
    color: var(--m-text);
    background-color: var(--m-raised);
    border-block-start-color: var(--m-edge-hi);
    border-block-end-color: var(--m-edge-sh);
}

/* The current page: brass fill, brass_ink text. */
.chapter li a.active,
.chapter li a.active:hover {
    color: var(--m-brass-ink);
    background-color: var(--m-brass);
    border-block-color: var(--m-brass);
    font-weight: 600;
}

.chapter li a.chapter-fold-toggle {
    flex: 0 0 auto;
    padding: 4px 12px;
    color: var(--m-text-dim);
}

.chapter li a.active + a.chapter-fold-toggle {
    color: var(--m-brass-ink);
    background-color: var(--m-brass);
}

.sidebar-resize-handle .sidebar-resize-indicator {
    background-color: var(--m-edge-hi);
}

/* mdBook's on-page heading list in the sidebar */
.on-this-page,
.header-in-summary,
.chapter li.header-item a {
    color: var(--m-text-dim);
}

/* --- Content ----------------------------------------------------------------- */

.content {
    padding: 0 var(--page-padding);
}

.content main {
    max-width: var(--content-max-width);
    padding-block: 16px 32px;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    font-family: var(--body-font);
    color: var(--m-text);
    letter-spacing: 0;
}

.content h1 { font-size: 2.8rem; line-height: 3.6rem; font-weight: 700; margin: 16px 0 16px; }
.content h2 { font-size: 2.2rem; line-height: 2.8rem; font-weight: 600; margin: 40px 0 12px;
              padding-block-end: 8px; border-block-end: 1px solid var(--m-edge-sh); }
.content h3 { font-size: 1.8rem; line-height: 2.4rem; font-weight: 600; margin: 32px 0 8px; }
.content h4,
.content h5,
.content h6 { font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; margin: 24px 0 8px; }

.content a.header,
.content a.header:visited {
    color: inherit;
    text-decoration: none;
}

.content p,
.content li {
    color: var(--m-text);
}

.content strong {
    font-weight: 700;
}

/* Links: `info`, underlined so they differ from text by more than hue. */
.content a,
.content a:visited,
.content a > .hljs {
    color: var(--m-info);
    text-decoration: underline;
    text-decoration-color: rgba(143, 179, 217, 0.5);
    text-underline-offset: 2px;
}

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

/* Inline code: sunken on `well`. */
:not(pre) > code,
:not(pre) > .hljs,
:not(pre):not(a) > .hljs {
    font-family: var(--mono-font);
    color: var(--m-text);
    background-color: var(--m-well);
    border: 1px solid var(--m-edge-sh);
    padding: 0 4px;
    overflow-wrap: break-word;
}

/* Code in headings and the sidebar reads as part of the title, not a field. */
.content h1 code,
.content h2 code,
.content h3 code,
.content h4 code,
.sidebar code {
    background-color: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: 0.92em;
}

/* Code blocks: sunken on `well`, edge_hi bottom lip. */
pre {
    background-color: var(--m-well);
    border: 1px solid var(--m-edge-sh);
    border-block-end-color: var(--m-edge-hi);
    padding: 12px 16px;
    margin: 16px 0;
}

pre > code,
pre > .hljs,
pre code.hljs {
    background-color: transparent;
    padding: 0;
    font-size: 1.4rem;
    line-height: 2rem;
}

pre > .buttons {
    top: 4px;
    right: 4px;
}

pre > .buttons button {
    color: var(--m-text-dim);
    background-color: var(--m-raised);
    border: 1px solid var(--m-edge-sh);
    border-block-start-color: var(--m-edge-hi);
}

pre > .buttons button:hover {
    background-color: var(--m-hover);
}

/* Tables: edge_sh rules, a `bg` header strip; wide tables scroll inside their wrapper. */
.table-wrapper {
    overflow-x: auto;
    margin: 16px 0;
}

table {
    border-collapse: collapse;
    margin: 0;
    font-size: 1.5rem;
    line-height: 2.2rem;
}

table thead th,
table thead td {
    background-color: var(--m-bg);
    color: var(--m-text);
    font-weight: 600;
    text-align: start;
}

table td,
table th {
    border: 1px solid var(--m-edge-sh);
    padding: 4px 8px;
    vertical-align: top;
}

/* A table written without a header row gets an empty header strip: hide it. */
table thead:not(:has(th:not(:empty))) {
    display: none;
}

table tbody tr:nth-child(2n) {
    background-color: transparent;
}

/* Quotes and callouts: an etched frame on `bg`, never a coloured left border.
   Callout titles take a status colour only because they carry status. */
blockquote,
.blockquote-tag {
    background-color: var(--m-bg);
    color: var(--m-text);
    border: 1px solid var(--m-edge-sh);
    border-block-end-color: var(--m-edge-hi);
    border-inline-start: 1px solid var(--m-edge-sh);
    margin: 16px 0;
    padding: 8px 16px;
}

.blockquote-tag-title {
    font-weight: 700;
}

kbd {
    font-family: var(--mono-font);
    color: var(--m-text);
    background-color: var(--m-raised);
    border: 1px solid var(--m-edge-sh);
    border-block-start-color: var(--m-edge-hi);
    padding: 2px 4px;
    line-height: 1.6rem;
}

hr {
    border: 0;
    border-block-start: 1px solid var(--m-edge-sh);
    border-block-end: 1px solid var(--m-edge-hi);
}

/* Previous / next chapter */
.nav-chapters {
    color: var(--m-text-dim);
    font-size: 2.4rem;
}

.nav-chapters:hover {
    color: var(--m-text);
    background-color: var(--m-raised);
}

.mobile-nav-chapters {
    color: var(--m-text-dim);
    background-color: var(--m-raised);
    border: 1px solid var(--m-edge-sh);
    border-block-start-color: var(--m-edge-hi);
}

.mobile-nav-chapters:hover {
    color: var(--m-text);
    background-color: var(--m-hover);
}

/* Keyboard help popup */
#mdbook-help-popup {
    background-color: var(--m-panel);
    color: var(--m-text);
    border: 1px solid var(--m-edge-sh);
    border-block-start-color: var(--m-edge-hi);
}

/* --- Search: Pagefind UI in the menu bar ------------------------------------- */

.manifold-search {
    position: relative;
    width: clamp(160px, 32vw, 360px);
    --pagefind-ui-scale: 0.75;
    --pagefind-ui-primary: var(--m-text);
    --pagefind-ui-text: var(--m-text);
    --pagefind-ui-background: var(--m-well);
    --pagefind-ui-border: var(--m-edge-sh);
    --pagefind-ui-tag: var(--m-raised);
    --pagefind-ui-border-width: 1px;
    --pagefind-ui-border-radius: 0;
    --pagefind-ui-image-border-radius: 0;
    --pagefind-ui-font: var(--body-font);
}

.manifold-search .pagefind-ui__form::before {
    background-color: var(--m-text-dim);
    opacity: 1;
}

.manifold-search .pagefind-ui__search-input {
    height: 32px;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--m-text);
    background-color: var(--m-well);
    border: 1px solid var(--m-edge-sh);
    border-block-end-color: var(--m-edge-hi);
    padding-inline-start: 32px;
}

.manifold-search .pagefind-ui__search-input::placeholder {
    color: var(--m-text-dim);
    opacity: 1;
}

.manifold-search .pagefind-ui__search-clear {
    height: 30px;
    top: 1px;
    right: 1px;
    font-size: 1.3rem;
    color: var(--m-text-dim);
    background-color: var(--m-well);
}

.manifold-search .pagefind-ui__search-clear:hover {
    color: var(--m-text);
}

/* Results open as a dropdown panel below the menu bar. */
.manifold-search .pagefind-ui__drawer {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    width: min(640px, calc(100vw - 16px));
    max-height: calc(100vh - var(--menu-bar-height) - 24px);
    overflow-y: auto;
    padding: 4px 16px 16px;
    background-color: var(--m-panel);
    border: 1px solid var(--m-edge-sh);
    border-block-start-color: var(--m-edge-hi);
    z-index: 200;
    text-align: start;
}

.manifold-search .pagefind-ui__message {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--m-text-dim);
    padding: 8px 0 4px;
    height: auto;
}

.manifold-search .pagefind-ui__result {
    padding: 12px 0;
    border-block-start: 1px solid var(--m-edge-sh);
}

.manifold-search .pagefind-ui__result-link,
.manifold-search .pagefind-ui__result-link:visited {
    color: var(--m-info);
    font-weight: 600;
    text-decoration: none;
}

.manifold-search .pagefind-ui__result-link:hover {
    text-decoration: underline;
}

.manifold-search .pagefind-ui__result-title {
    font-size: 1.5rem;
}

.manifold-search .pagefind-ui__result-excerpt {
    font-size: 1.4rem;
    color: var(--m-text-dim);
}

.manifold-search mark {
    background-color: var(--m-brass);
    color: var(--m-brass-ink);
    font-weight: 600;
    padding: 0 2px;
}

.manifold-search .pagefind-ui__button {
    height: 32px;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--m-text);
    background-color: var(--m-raised);
    border: 1px solid var(--m-edge-sh);
    border-block-start-color: var(--m-edge-hi);
}

.manifold-search .pagefind-ui__button:hover {
    background-color: var(--m-hover);
    border-block-start-color: #6a775e;
}

/* --- Phones --------------------------------------------------------------------- */

@media only screen and (max-width: 720px) {
    .menu-title {
        display: none;
    }

    .right-buttons {
        flex: 1;
        justify-content: flex-end;
    }

    .manifold-search {
        width: 100%;
    }

    .content h1 { font-size: 2.4rem; line-height: 3.2rem; }
    .content h2 { font-size: 2rem; line-height: 2.8rem; }
}