/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ GLOBAL VARIABLES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* To allow JS to parse calc() set on this variable via getComputedStyle() */
@property --spacing-target-top {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}

:root {
    --width-sidebar: 280px;
    --height-mobile-header: 50px;
    --height-tooltip-min: 39px;  /* static value based on current text size/padding settings */
    --spacing-primary: 30px;
    --spacing-intermediate: 20px;
    --spacing-secondary: 15px;
    --spacing-minor: 5px;
    --spacing-lightbox: var(--spacing-primary);
    --spacing-target-top: var(--spacing-primary);
    --border-width: 2px;
    --border-width-thin: 1px;
    --radius-primary: 5px;
    --radius-secondary: 3px;
    --radius-full: 100px;
    --radius-circle: 100%;
    --primary-button-diameter: 38px;
    --secondary-button-diameter: 30px;

    --color-link-bg-opacity: 0.12;
    --color-query-dim: hsl(0,0%,53%);

    --font-sans: Kibur, "Segoe UI", sans-serif;
    --font-size-base: 16px;
    --font-size-medium: 20px;
    --font-size-large: 28px;
    --font-size-small: 80%;
    --font-line-height: 1.8em;
    --font-weight-base: 400;
    --font-weight-semibold: 500;
    --font-weight-bold: 700;

    --timing-bezier-1: cubic-bezier(0.19,1,0.22,1); /* easeOutExpo */
    --timing-bezier-2: cubic-bezier(0.95,0.05,0.795,0.035); /* easeInExpo */

    --header-graphic-default: url("/assets/images/header-graphic-default.png");
    --header-graphic-second: url("/assets/images/header-graphic-2.png");
}

:root {
    --dark-theme-bg-page: hsl(240, 5%, 17%);
    --dark-theme-bg-primary: hsl(240, 4%, 21%);
    --dark-theme-bg-subtle: hsl(240, 6%, 26%);
    --dark-theme-bg-subtle-alt: hsl(240, 5%, 29.4%);
    --dark-theme-bg-input: hsl(240, 8%, 15%);
    --dark-theme-bg-code: var(--dark-theme-bg-input);
    --dark-theme-bg-list-hover: hsl(240, 7%, 14%);
    --dark-theme-bg-tooltip: hsl(234, 8%, 10%);
    --dark-theme-color-primary: hsl(0,0%,90%);
    --dark-theme-color-secondary: hsl(231, 3%, 72%);
    --dark-theme-color-accent: #d88d31;
    --dark-theme-color-accent-hover: hsl(33, 80%, 66%);
    --dark-theme-color-accent-foreground: #171717;
    --dark-theme-color-link: hsl(212,99%,73%);
    --dark-theme-color-link-hover: hsl(209,95%,92%);
    --dark-theme-color-code: hsl(207, 43%, 90%);
    --dark-theme-color-border: hsl(240,5%,30%);
    --dark-theme-color-buttons: var(--dark-theme-bg-subtle);
    --dark-theme-color-buttons-hover: hsl(240, 6%, 31%);
    --dark-theme-color-buttons-inset: var(--dark-theme-color-buttons);
    --dark-theme-color-important: hsl(154,65%,32%);

    --dark-theme-color-shadow: hsla(0,0%,0%,.2);

    --dark-theme-filter-button-active: brightness(0.8);


    --light-theme-bg-page: hsl(235, 5%, 76%);
    --light-theme-bg-primary: hsl(0, 0%, 90.5%);
    --light-theme-bg-subtle: hsl(0, 0%, 95.23%);
    --light-theme-bg-subtle-alt: hsl(0, 0%, 97.6%);
    --light-theme-bg-input: hsl(225, 7%, 86%);
    --light-theme-bg-code: hsl(234, 18%, 96%);
    --light-theme-bg-code-inset: hsl(234, 9%, 90%); /* exclusive to light theme */
    --light-theme-bg-list-hover: hsl(240, 5%, 90%);
    --light-theme-bg-tooltip: hsl(240, 5%, 96%);
    --light-theme-color-primary: hsl(0, 0%, 5%);
    --light-theme-color-secondary: hsl(231, 5%, 42%);
    --light-theme-color-accent: hsl(33, 85%, 62%);
    --light-theme-color-accent-hover: hsl(33, 100%, 70%);
    --light-theme-color-accent-foreground: var(--dark-theme-color-accent-foreground);
    --light-theme-color-link: hsl(217, 65%, 58%);
    --light-theme-color-link-hover: hsl(217, 100%, 72%);
    --light-theme-color-code: hsl(207, 6%, 31%);
    --light-theme-color-border: hsla(229, 16%, 78%, .8);
    --light-theme-color-buttons: var(--light-theme-bg-subtle);
    --light-theme-color-buttons-hover: hsl(0, 0%, 100%);
    --light-theme-color-buttons-inset: var(--light-theme-bg-input);
    --light-theme-color-important: hsl(154, 61%, 61%);

    --light-theme-color-shadow: hsla(230, 26%, 61%, .3);

    --light-theme-filter-button-active: brightness(0.9);
}

body, body.theme-dark {
    --bg-page: var(--dark-theme-bg-page);
    --bg-primary: var(--dark-theme-bg-primary);
    --bg-subtle: var(--dark-theme-bg-subtle);
    --bg-subtle-alt: var(--dark-theme-bg-subtle-alt);
    --bg-input: var(--dark-theme-bg-input);
    --bg-code: var(--dark-theme-bg-code);
    --bg-list-hover: var(--dark-theme-bg-list-hover);
    --bg-tooltip: var(--dark-theme-bg-tooltip);
    --color-primary: var(--dark-theme-color-primary);
    --color-secondary: var(--dark-theme-color-secondary);
    --color-accent: var(--dark-theme-color-accent);
    --color-accent-hover: var(--dark-theme-color-accent-hover);
    --color-accent-foreground: var(--dark-theme-color-accent-foreground);
    --color-link: var(--dark-theme-color-link);
    --color-link-hover: var(--dark-theme-color-link-hover);
    --color-code: var(--dark-theme-color-code);
    --color-border: var(--dark-theme-color-border);
    --color-buttons: var(--dark-theme-color-buttons);
    --color-buttons-hover: var(--dark-theme-color-buttons-hover);
    --color-buttons-inset: var(--dark-theme-color-buttons-inset);
    --color-important: var(--dark-theme-color-important);
    --color-shadow: var(--dark-theme-color-shadow);

    --shadow-primary: 0 2px 20px 0 var(--color-shadow);
    --shadow-secondary: 0 2px 10px 0 var(--color-shadow);
    --filter-shadow-secondary: drop-shadow(0 2px 5px var(--color-shadow));

    --filter-button-active: var(--dark-theme-filter-button-active);
}

body.theme-light {
    --bg-page: var(--light-theme-bg-page);
    --bg-primary: var(--light-theme-bg-primary);
    --bg-subtle: var(--light-theme-bg-subtle);
    --bg-subtle-alt: var(--light-theme-bg-subtle-alt);
    --bg-input: var(--light-theme-bg-input);
    --bg-code: var(--light-theme-bg-code);
    --bg-code-inset: var(--light-theme-bg-code-inset);
    --bg-list-hover: var(--light-theme-bg-list-hover);
    --bg-tooltip: var(--light-theme-bg-tooltip);
    --color-primary: var(--light-theme-color-primary);
    --color-secondary: var(--light-theme-color-secondary);
    --color-accent: var(--light-theme-color-accent);
    --color-accent-hover: var(--light-theme-color-accent-hover);
    --color-accent-foreground: var(--light-theme-color-accent-foreground);
    --color-link: var(--light-theme-color-link);
    --color-link-hover: var(--light-theme-color-link-hover);
    --color-code: var(--light-theme-color-code);
    --color-border: var(--light-theme-color-border);
    --color-buttons: var(--light-theme-color-buttons);
    --color-buttons-hover: var(--light-theme-color-buttons-hover);
    --color-buttons-inset: var(--light-theme-color-buttons-inset);
    --color-important: var(--light-theme-color-important);
    --color-shadow: var(--light-theme-color-shadow);

    --filter-button-active: var(--light-theme-filter-button-active);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ GENERAL ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

* {
    -webkit-tap-highlight-color: transparent; /* disable the blue highlight color on touch events on Webkit/Chromium */
}

*,::before,::after {
    box-sizing: border-box;
}

/* Overriding redundant properties in original stylesheet */
html,body {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Invisible psuedo-element just to extend body bounds for JS click dismissal purposes */
body::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Text selection */
::-moz-selection { background: var(--color-accent); color: var(--color-accent-foreground); }
::selection      { background: var(--color-accent); color: var(--color-accent-foreground); }

h1, h2, h3, h4, h5, h6 {
    color: var(--color-primary);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
}

h1, h2,
.header-title-desktop {
    letter-spacing: -0.01em;
}

h2, h3, h4 {
    margin-top: var(--spacing-primary);
}

/* For whatever reason various headings are doubly bold */
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
    font-weight: inherit;
}

code, pre,
strong,
th {
    color: inherit;
}

a,
table td:last-child, /* wrap words only in right-most cells, since otherwise if applied to all `td` has some unexpectedly narrow columns with certain tables */
code, pre,
#git-wiki-content > p,
.infobox {
    word-break: break-word;
    overflow-wrap: break-word;
}

table,
code, pre,
.caption,
.git-wiki-page-list li a,
.index.small,
.infobox ul {
    font-size: var(--font-size-small);
    line-height: var(--font-line-height);
}

/* Code */
code,
pre {
    background: var(--bg-code);
    color: var(--color-code);
}

code {
    padding: var(--spacing-minor);
    border-radius: var(--radius-secondary);
}

pre {
    border: none;
    border-radius: var(--radius-secondary);
}

pre code {
    background: inherit;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

/* To avoid recursive font size decreases and for restoring font-size when parent set to `0`. `0.8` to match `80%` of `--font-size-small` */
table table *,
pre code,
table pre,
.tooltip {
    font-size: calc(var(--font-size-base) * 0.8);
}

/* Rouge syntax highlighting */
.highlight {
    background-color: inherit; /* default stylesheet override */
}
#git-wiki-content .highlight {
    background-color: var(--bg-code);
    border-radius: var(--radius-primary);
}

/* Links */
a,
a > code /* for inline code which is also linked */
{
    color: var(--color-link);
}

a:hover,
a:active,
a:hover > code,
a:active > code {
    color: var(--color-link-hover);
}

a.broken-link {
    color: red !important;
}

/* Horizontal line */
hr {
    height: var(--border-width);
    background: var(--color-border);
    margin: calc(var(--spacing-minor) * 2) 0 var(--spacing-intermediate) 0;
    clear: both;
}

blockquote,
.index {
    background: var(--bg-subtle);
    color: var(--color-primary);
    font-style: inherit;
    padding: var(--spacing-intermediate) var(--spacing-intermediate) 1px; /* `1px` allows only margin from last child item. `0` OTOH causes no padding at all, collapsing child items margin. */
    border-radius: var(--radius-primary);
    border-left: none;
    margin-bottom: var(--spacing-intermediate);
}

/* Effectively auto add line breaks for list notes and code blocks to avoid having to do so manually */
li > blockquote,
li > pre, /* for virtual page code blocks */
li > .highlighter-rouge /* the container element for code blocks added by Jekyll */
{
    margin-top: var(--spacing-secondary);
}

input {
    background: var(--bg-input);
    color: var(--color-primary);
    padding: var(--spacing-minor) var(--spacing-secondary);
    border: none;
    border-radius: var(--radius-primary);
}

input:focus {
    outline: none;
    box-shadow: 0px 0px 0 2px var(--color-border);
}

li::marker {
    color: var(--color-secondary);
}

/* Tables */
table {
    max-width: 100%;
    display: block; /* required for `overflow` to have any effect. Has side-effect of not expanding tables to full width of container if content shorter. Would require wrapper to fix. */
    overflow: auto; /* enable scrollbars when tables exceed max container width */
}

/* Override default behavior with this class, to fill width of page. Use judiciously, such as if tables have only two columns and wanting a more cohesive appearance. */
table.stretch {
    display: table;
}

th, td {
    border-bottom: var(--border-width-thin) solid var(--color-border);
}

td {
    background: var(--bg-subtle);
}

tr:nth-child(even) td {
    background: var(--bg-subtle-alt);
}

td:last-child {
    min-width: 65px; /* to not break very short words if the th heading is also very short (causing the column to be too narrow otherwise) */
}

html {
    scroll-behavior: smooth;
}

body {
    max-width: 1280px;
    background-color: var(--bg-page);
    color: var(--color-primary);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-base);
    line-height: var(--font-line-height);
    padding: var(--spacing-primary);
    margin: var(--spacing-primary) auto calc(var(--spacing-primary) * 2) auto;
    transition: max-width 150ms ease-out;
}

/* Class added via Javascript */
body.expanded-width-true {
    max-width: 100%;
}

body.expanded-width-instant {
    transition: none; /* disable so on page load it's immediately wide */
}

.clear {
    clear: both;
}

/* Optically match color of icons using `--color-secondary` to text color */
li::marker,
.content-button::before,
.iconed::before,
#git-wiki-content a[href^="http"]::before {
    opacity: 0.88; /* to optically match color of text. Same for all icons using `--color-secondary` */
}

:target {
    scroll-margin-top: var(--spacing-target-top); /* set distance that fragment identifier links should be from viewport top */
}

.hidden-generic {
    display: none !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ TOOLTIPS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.tooltip {
    --offset-y: 10px;
    --max-width-open: 210px;
    width: max-content;
    min-height: var(--height-tooltip-min);
    background: var(--bg-tooltip);
    color: var(--color-secondary);
    font-weight: var(--font-weight-base);
    line-height: calc(var(--font-line-height) * 1.25); /* to normalize regardless of inherited differences */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    cursor: default;
    padding: var(--spacing-minor) var(--spacing-secondary);
    border-radius: var(--radius-primary);
    filter: var(--filter-shadow-secondary); /* to conform to entire shape of element, including pseudo-element */
    position: fixed;
    top: calc(var(--offset-y) + var(--top));
    left: var(--left);
    z-index: 5;
    pointer-events: none; /* otherwise (for ::before at least) will block :active styling */
    transform: translateX(-50%); /* center element to fixed coord */
    transition: opacity 100ms ease-out, margin 100ms ease-in;
}

.tooltip.offset-add {
    --offset-y: 12px; /* for `.primary-button` butttons, mainly to align toolbar buttons more pleasantly with search box edge */
}

.tooltip.hidden {
    opacity: 0;
    margin-top: 10px;
}

.tooltip.visible {
    opacity: 1;
    margin-top: 5px;
}

/* Tooltip/overflow menu pop-up */
.tooltip.menu {
    max-width: 150px; /* workaround as unit-less values can't be used with transitions */
    max-height: var(--height-tooltip-min);
    user-select: none; /* prevent text selection */
    transition: max-width 150ms ease-in-out, max-height 200ms ease-out, opacity 150ms ease-out, margin 150ms ease-in, transform 200ms;
}

.tooltip.menu::before {
    --height: 8px;
    width: 20px;
    height: var(--height);
    background: var(--bg-tooltip);
    content: '';
    display: block;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* triangle */
    position: absolute;
    top: 0;
    transition: top 200ms ease-out, transform 200ms;
}

.tooltip.menu.tooltip-menu-open::before {
    top: calc(-1 * var(--height));
    transform: translateX(var(--menu-open-offset));
}

.tooltip.menu > div {
    flex-basis: 100%; /* force wrapping top-level children */
}

.tooltip.menu.tooltip-menu-open {
    max-width: var(--max-width-open);
    max-height: 300px;
    pointer-events: all;
    padding-bottom: var(--spacing-secondary);
    transform: translateX(calc(-50% - var(--menu-open-offset)));
}

.tooltip.menu .menu-content {
    width: 0;
    height: 0;
    opacity: 0;
    margin-top: var(--spacing-minor);
    position: relative;
    top: 5px;
    transition: width 150ms ease-in-out, height 200ms ease-out, opacity 150ms ease-in, top 150ms ease-in; /* timing functions of dimensions to match parent */
}

.tooltip.menu.tooltip-menu-open .menu-content {
    width: 100%;
    height: 100%;
    opacity: 1;
    top: 0;
}

.tooltip.menu hr {
    background: var(--bg-primary);
    margin: var(--spacing-secondary) 0;
}

.tooltip.menu .menu-button {
    width: 100%;
    border-radius: var(--radius-full);
    border: var(--border-width) solid var(--color-buttons-inset);
}

.tooltip.menu .menu-button.standalone:not(:last-child) {
    margin-bottom: calc(var(--spacing-minor) * 2);
}

.tooltip.menu .menu-button:hover {
    border-color: var(--color-border);
}

.tooltip.menu .menu-button:active,
.tooltip.menu .menu-button.active {
    border-color: var(--color-accent);
}

.tooltip.menu .menu-button a {
    width: 100%;
    height: calc(var(--height-tooltip-min) - (var(--border-width) * 2));
    color: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
    cursor: pointer;
}

.tooltip.menu .menu-button .iconed.label {
    display: inline-flex;
    align-items: center;
}

/* Radio buttons */
.tooltip.menu .menu-radio {
    display: flex;
    gap: var(--spacing-minor);
}

.tooltip.menu .menu-radio ~ .menu-radio {
    margin-top: calc(var(--spacing-minor) * 2);
}

.tooltip.menu .menu-radio .active {
    position: relative;
}

/* Active setting badge indicator */
.tooltip.menu .menu-radio .menu-button::before,
.tooltip.menu .menu-radio .menu-button::after {
    width: 18px;
    height: 18px;
    background: var(--color-accent);
    content: '';
    display: block;
    opacity: 0;
    border-radius: var(--radius-circle);
    position: absolute;
    top: calc(-1 * var(--border-width) - 3px);
    right: calc(-1 * var(--border-width));
    transform: scale(0);
    transform-origin: 50% 50%;
    transition: transform 200ms var(--timing-bezier-1);
    z-index: 1;
}

.tooltip.menu .menu-radio .menu-button::before {
    box-shadow: var(--shadow-secondary);
}

.tooltip.menu .menu-radio .menu-button::after {
    background: var(--color-accent-foreground);
    transition: opacity 200ms var(--timing-bezier-1);
}

.tooltip.menu .menu-radio .menu-button.active::before,
.tooltip.menu .menu-radio .menu-button.active::after {
    transform: scale(1);
    opacity: 1;
}

/* Buttons - Graphic/image-based */
.tooltip.menu .graphic-button::before {
    width: 100%;
    height: 100%;
    background-color: var(--color-accent);
    background-repeat: no-repeat;
    content: '';
    display: block;
    border-radius: var(--radius-full);
}

.tooltip.menu .header-graphic-switcher-default .graphic-button::before {
    background-image: var(--header-graphic-default);
    background-size: 80px; /* using absolute rather than relative units to avoid scaling when menu toggled */
    background-position: 1px -26px;
}

.tooltip.menu .header-graphic-switcher-second .graphic-button::before {
    background-image: var(--header-graphic-second);
    background-size: 115px;
    background-position: -30px -17px;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BUTTONS: PRIMARY ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.tools-button,
.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.primary-button {
    width: var(--primary-button-diameter);
    height: var(--primary-button-diameter);
    cursor: pointer;
    border: none;
    border-radius: var(--radius-circle);
    box-shadow: var(--shadow-secondary);
}

.primary-button.secondary,
.ib-primary-button.secondary {
    width: var(--secondary-button-diameter);
    height: var(--secondary-button-diameter);
}

.primary-button,
.primary-button:active,
.primary-button:active:hover {
    background: var(--color-buttons);
}

.primary-button:hover {
    background: var(--color-buttons-hover);
}

.primary-button:active {
    filter: var(--filter-button-active);
}

.primary-button.iconed::before {
    pointer-events: none; /* otherwise (for ::before at least) will block :active styling */
}

/* Buttons - icons. Named such so they can also be reused in documentation */
.primary-button.iconed::before,
.icon-toolbar.iconed::before {
    width: 24px;
    height: 24px;
    background: var(--color-secondary);
    content: '';
    display: block;
}

/* For use on buttons above bg-subtle backgrounds to provide more contrast */
.primary-button.contrast:not(:active) {
    background: var(--bg-subtle-alt);
}

.primary-button.contrast:hover:not(:active) {
    filter: brightness(1.1);
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ EDITING TOOLBAR ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#tools-buttons {
    text-align: inherit !important; /* override due to default CSS using inline styles */
    display: flex;
    flex-flow: column;
}

/* Buttons */
.git-wiki-tools {
    width: 100%;
    display: flex;
    flex-flow: wrap;
    align-items: baseline;
    justify-content: flex-end;
    list-style: none;
    padding-left: 0; /* override some inherited value */
    position: absolute;
    top: -25px;
    right: var(--spacing-primary);
}

/* HTML/classes modified via custom `page_actions.html` */
.tools-button {
    padding: 0;
    margin: 0 var(--spacing-minor) calc(var(--spacing-minor) * 2) 0;
    z-index: 3; /* so tooltip doesn't dip below search box when :active */
}

.tools-button.prose.new {
    margin-left: var(--spacing-secondary);
}

/* For buttons with icon + text label */
.tooltip.menu .iconed.label::before {
    margin-right: var(--spacing-minor);
}

.tooltip.menu .iconed.label.dim::before {
    opacity: 0.5; /* dim icon to attract less attention. Made for delete button */
}

.tooltip.menu .menu-radio .menu-button.active::after {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-badge-tick");
    mask-image: url("/assets/images/ui.svg#icons-badge-tick");
}

.icon-toolbar.icon-add::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-editing-add");
    mask-image: url("/assets/images/ui.svg#icons-editing-add");
}

.icon-toolbar.icon-edit::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-editing-edit");
    mask-image: url("/assets/images/ui.svg#icons-editing-edit");
}

.icon-toolbar.icon-history::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-editing-history");
    mask-image: url("/assets/images/ui.svg#icons-editing-history");
}

.icon-toolbar.icon-source::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-editing-source");
    mask-image: url("/assets/images/ui.svg#icons-editing-source");
}

.icon-toolbar.icon-expand::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-page-expand-expand");
    mask-image: url("/assets/images/ui.svg#icons-page-expand-expand");
}

body.expanded-width-true .icon-toolbar.icon-expand::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-page-expand-contract");
    mask-image: url("/assets/images/ui.svg#icons-page-expand-contract");
}

.icon-toolbar.icon-overflow::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-overflow-menu");
    mask-image: url("/assets/images/ui.svg#icons-overflow-menu");
}

.icon-toolbar.icon-themes-dark::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-themes-dark");
    mask-image: url("/assets/images/ui.svg#icons-themes-dark");
}

.icon-toolbar.icon-themes-light::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-themes-light");
    mask-image: url("/assets/images/ui.svg#icons-themes-light");
}

.icon-toolbar.icon-delete::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-editing-delete");
    mask-image: url("/assets/images/ui.svg#icons-editing-delete");
}

/* Buttons - Prose.io */
.tools-button.prose .primary-button,
.tools-button.prose .primary-button:active,
.tools-button.prose .primary-button:active:hover,
#git-wiki-content .iconed.icon-toolbar.prose::before /* for documentation */
{
    background: var(--color-accent);
}

.tools-button.prose .primary-button:hover {
    background: var(--color-accent-hover);
}

.tools-button.prose .primary-button.iconed::before {
    background: var(--color-accent-foreground);
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SEARCH BOX ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.git-wiki-search {
    --clear-width: 28px;
    position: relative;
    margin-bottom: calc(var(--spacing-primary) - var(--spacing-minor));
}

.search-input-mirror-wrapper {
    --extra-padding: 0px;
    --pad-right: calc(var(--spacing-secondary) + var(--clear-width) + var(--extra-padding));
    --pad-left: var(--spacing-secondary);
    width: calc(100% - var(--pad-right) - var(--pad-left));
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
    margin: 0 var(--pad-right) 0 var(--pad-left);
    cursor: text;
}

/* Is now the search field background fill */
.search-input-mirror-wrapper::before {
    width: 100%;
    height: 100%;
    background: var(--bg-input);
    content: '';
    border-radius: var(--radius-primary);
    position: absolute; /* aligns to .git-wiki-search so that it's full width */
    left: 0;
    top: 0;
    z-index: 3;
}

.search-input-mirror,
#search-input {
    grid-column: 1;
    grid-row: 1;
    padding: var(--spacing-minor) 0;
    position: relative;
    z-index: 3;
}

.search-input-mirror {
    color: var(--color-primary);
    white-space: pre; /* otherwise multiple spaces will be collapsed */
    pointer-events: none;
    translate: var(--trans-x, 0px) 0;
}

.search-input-mirror-token {
    position: relative;
}

.search-input-mirror-token.token-negated {
    color: var(--color-query-dim);
}

.search-input-mirror-token.token-value[data-operator]::before,
.search-input-mirror-token.key-prefix.token-value::before {
    width: calc(100% + 2px);
    height: calc(100% + 4px);
    background: var(--color-secondary);
    content: '';
    display: inline-block;
    opacity: 0.1;
    border-radius: 3px;
    position: absolute;
    top: -2px;
    left: -1px;
    z-index: -1;
}

.search-input-mirror .placeholder {
    opacity: 0.55; /* matches default input placeholder style */
}

.search-input-peripheral.filters-active ~ .search-input-mirror-wrapper {
    --extra-padding: calc(var(--filters-counter-width) + var(--spacing-minor)); /* inline CSS var set via JS */
}

#search-input {
    width: calc(var(--input-width, 100%) - var(--pad-right) - var(--pad-left)); /* JS sets the absolute width of the full visual input field so drag-selection scrolling can sync between input and mirror */
    background: transparent;
    color: transparent;
    caret-color: var(--color-primary);
    font: inherit;
    border: 0;
    outline: none;
}

/* Styling when JS disabled/briefly before JS init kicks in (while direct descendant of root container) */
.git-wiki-search-js > #search-input {
    width: 100%;
    background: var(--bg-input);
    color: inherit;
    padding: var(--spacing-minor) var(--spacing-secondary);
}

#search-input:focus {
    box-shadow: none;
}

.search-input-peripheral {
    --offset-top: 0px;
    display: flex;
    position: absolute;
    top: calc(var(--spacing-minor) + var(--offset-top));
    right: calc(var(--spacing-secondary) - 7px); /* to match text padding of input while still having extra clickable area of button */
    z-index: 4;
    pointer-events: none;
}

.search-input-peripheral:not(.filters-active) .search-filters-counter,
.search-clear-query {
    opacity: 0;
}

.search-filters-counter,
.search-filter-button {
    height: 100%;
    color: var(--color-primary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    line-height: 100%;
    white-space: nowrap;
    cursor: pointer;
    padding: var(--spacing-minor) calc(var(--spacing-minor) * 2);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-full);
}

.search-filters-counter {
    display: flex;
    margin-right: var(--spacing-minor);
    position: relative;
    top: 1px; /* to align with clear query button */
    right: 0;
    transition: opacity 150ms, right 150ms;
    pointer-events: none;
}

/* For search results page where pre-filled input value will appear but no transition needed for counter */
.search-input-peripheral.clear-instant .search-filters-counter {
    transition: none;
}

.search-filters-counter::after {
    background: var(--color-secondary);
    color: var(--bg-input);
    font-size: 90%;
    content: attr(data-counter);
    display: inline-block;
    opacity: 0.8;
    padding: 0 var(--spacing-minor);
    border-radius: var(--radius-full);
    margin-left: var(--spacing-minor);
}

.search-filter-button {
    z-index: 1;
}

.search-input-peripheral:not(.clear) .search-filters-counter {
    right: calc(-1 * var(--clear-width));
}

.search-input-peripheral .search-filters-counter {
    right: 0;
}

.search-input-peripheral.filters-active .search-filters-counter,
.search-filter-button,
.search-input-peripheral.clear .search-clear-query,
#suggestions-wrapper .search-filter-actions-wrapper.show-expansion-toggle .search-filter-actions-expand {
    opacity: 0.5;
}

.search-filter-button.active,
.search-filter-button:hover,
.search-filter-button:active {
    opacity: 1;
    color: var(--color-secondary);
    border-color: var(--color-border);
}

.search-filter-button:active {
    border-color: var(--color-buttons-active);
}

.search-filter-button:active,
.search-filter-button.active {
    background: var(--color-buttons-hover);
    color: var(--color-secondary);
    border-color: var(--color-buttons-hover);
}

.search-filter-button.active:hover,
.search-filter-button.active:active {
    background: var(--color-buttons-hover);
    border-color: var(--color-buttons-hover);
}

.search-filter-button:active,
.search-filter-button.active:active {
    filter: var(--filter-button-active);
}

.search-clear-query {
    width: var(--clear-width);
    height: var(--clear-width);
    background: var(--color-primary);
    cursor: pointer;
    padding: 0;
    opacity: 0;
    border: none; /* override default button styling */
    -webkit-mask-image: url("/assets/images/ui.svg#icons-searchbox-clear");
    mask-image: url("/assets/images/ui.svg#icons-searchbox-clear");
    -webkit-mask-position: 2px 2px;
    mask-position: 2px 2px;
    pointer-events: none;
    transition: opacity 250ms var(--timing-bezier-1);
}

.search-input-peripheral.clear .search-filter-button {
    right: 0;
}

.search-input-peripheral.clear .search-clear-query {
    pointer-events: auto;
}

.search-input-peripheral.clear .search-clear-query:hover {
    opacity: 1;
}

.search-input-peripheral.clear .search-clear-query:active {
    filter: var(--filter-button-active);
}

#suggestions-wrapper {
    --results-cont-padding-outer: 5px;
    width: calc(100% + var(--results-cont-padding-outer) * 2);
    background: var(--bg-tooltip);
    overflow: hidden;
    opacity: 0;
    border-radius: calc(var(--radius-primary) * 2);
    padding: calc(var(--search-input-height) + (var(--results-cont-padding-outer) * 2)) var(--spacing-minor) var(--spacing-minor); /* input height var set via JS */
    box-shadow: var(--shadow-secondary);
    position: absolute;
    top: calc(-1 * var(--results-cont-padding-outer));
    left: calc(-1 * var(--results-cont-padding-outer));;
    transition: opacity 150ms ease-out;
    pointer-events: none;
    z-index: 2;
}

/* Only show when input field focused or list clicked */
#suggestions-wrapper.visible {
    opacity: 1;
    pointer-events: auto;
}

#suggestions-wrapper .search-filter-actions-wrapper {
    --padding-bottom: var(--spacing-secondary);
    display: grid;
    grid-template-columns: min-content 1fr; /* <label width> <filter list width> */
    grid-auto-rows: auto;
    gap: 0 var(--spacing-secondary); /* horizontal only gaps */
    padding: calc(var(--spacing-secondary) - var(--spacing-minor)) var(--spacing-minor) var(--padding-bottom);
}

#suggestions-wrapper.empty-query .search-filter-actions-wrapper {
    --padding-bottom: calc(var(--spacing-minor) * 2);
}

/* Horizontal dividers, which allow for semi-opaque color variables if wanted */
.search-suggestions-item-wrapper::after,
#suggestions-wrapper .search-filter-actions-wrapper::after {
    height: var(--border-width-thin);
    background: var(--bg-list-hover); /* using this instead of the border color var (with 0.5 opacity) to make hiding on highlighted items less obvious, as it matches the hover background */
    content: '';
    display: block;
}

#suggestions-wrapper .search-filter-actions-wrapper::after {
    margin-top: var(--spacing-secondary);
    grid-column: 1 / -1; /* span both grid columns */
}

#suggestions-wrapper.empty-query .search-filter-actions-wrapper::after {
    display: none;
}

#suggestions-wrapper .search-filter-actions-label {
    color: var(--color-secondary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    display: block;
    padding-left: var(--spacing-minor);
}

#suggestions-wrapper .search-filter-actions-list {
    --gradient: linear-gradient(90deg,hsl(0, 0%, 0%) calc(100% - (var(--clear-width) + 20px)), hsla(0,0%,0%,0) calc(100% - var(--clear-width)), hsla(0,0%,0%,0) 100%); /* fixed pixel width gradient stop fade on right side */
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-minor);
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    position: relative;
    top: calc(var(--border-width) / 2);
}

#suggestions-wrapper .search-filter-actions-list li {
    height: min-content;
    display: flex; /* fixes border clipping from parent container in Firefox when list expanded */
}

#suggestions-wrapper .search-filter-actions-list .hidden {
    display: none;
}

#suggestions-wrapper .search-filter-actions-wrapper.show-expansion-toggle .search-filter-actions-list {
    -webkit-mask-image: var(--gradient);
    mask-image: var(--gradient);
}

#suggestions-wrapper .search-filter-actions-wrapper.expand-filters .search-filter-actions-list {
    flex-wrap: wrap;
}

#suggestions-wrapper .search-filter-actions-wrapper.expand-filters .search-filter-actions-list li {
    width: 100%; /* force full width so the expanded visual state persists even if viewport resized wider (otherwise with enough width buttons would return back to inline visual state despite contract icon remaining) */
}

#suggestions-wrapper .search-filter-actions-expand {
    width: var(--clear-width);
    height: var(--clear-width);
    background: var(--color-primary);
    opacity: 0;
    cursor: pointer;
    -webkit-mask-image: url("/assets/images/ui.svg#icons-search-filters-expand");
    mask-image: url("/assets/images/ui.svg#icons-search-filters-expand");
    position: absolute;
    right: calc(var(--spacing-secondary) - (var(--spacing-minor) / 2)); /* to align to clear query icon */
    transition: opacity 150ms;
    z-index: 2;
}

#suggestions-wrapper .search-filter-actions-wrapper.expand-filters .search-filter-actions-expand {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-search-filters-contract");
    mask-image: url("/assets/images/ui.svg#icons-search-filters-contract");
}

.suggestions-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Horizontal divider */
.search-suggestions-item-wrapper::after {
    width: calc(100% - var(--spacing-minor) * 2);
    position: relative;
    left: var(--spacing-minor);
}

.search-suggestions-item-wrapper:nth-last-of-type(-n+1)::after {
    display: none;
}

/* Hide on hover/highlight/active, for both prior sibling and current item */
.search-suggestions-item-wrapper:has(+ li:hover)::after,
.search-suggestions-item-wrapper:has(+ li.highlight)::after,
.search-suggestions-item-wrapper:hover::after,
.search-suggestions-item-wrapper.highlight::after {
    opacity: 0;
}

.search-suggestions-item {
    width: 100%;
    height: 100%;
    min-height: 4em;
    color: var(--color-primary);
    display: grid;
    grid-template-columns: 1fr minmax(57%, 1fr);
    grid-template-rows: repeat(1,1fr);
    gap: var(--spacing-secondary);
    padding: var(--spacing-minor) calc(var(--spacing-minor) * 2);
    border-radius: var(--radius-primary);
    position: relative; /* position text above background pseudo-element */
}

.search-suggestions-item-wrapper:hover .search-suggestions-item,
.search-suggestions-item-wrapper.highlight .search-suggestions-item {
    color: currentColor;
    background: var(--bg-list-hover);
}

.search-suggestions-item-wrapper:active .search-suggestions-item,
.search-suggestions-item-wrapper.active .search-suggestions-item {
    background: var(--color-accent);
    color: var(--color-accent-foreground);
}

.search-suggestions-title-wrapper,
.search-suggestions-matches-wrapper {
    display: flex;
    flex-direction: column;
}

.search-suggestions-title-wrapper {
    justify-content: flex-start; /* align to top of result container so any results not part of a section with non-wrapping titles match style of those that do */
}

.search-suggestions-matches-wrapper {
    --more-matches-width: 30px; /* fallback value, between 1 and 2 digit width so during label initialization/resizes the mask width basis has something to default to before the JS obtains the true width */
    list-style: none;
    justify-content: center; /* align children vertically to parent */
    margin: 0;
    padding: 0;
}

.search-suggestions-matches-wrapper.labels-only {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-minor);
}

.search-suggestions-match {
    display: flex;
    align-items: center;
    position: relative;
}

.search-suggestions-match-string {
    width: 100%;
    line-height: 2;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
}

.search-suggestions-match.has-more-matches .search-suggestions-match-string {
    --gradient: linear-gradient(90deg,hsl(0, 0%, 0%) calc(100% - ((var(--more-matches-width) + 10px) + 10px)), hsla(0,0%,0%,0) calc(100% - (var(--more-matches-width) + 10px)), hsla(0,0%,0%,0) 100%);
    -webkit-mask-image: var(--gradient);
    mask-image: var(--gradient);
}

.search-suggestions-matches-more {
    padding: calc(var(--spacing-minor) / 2) var(--spacing-minor);
    position: absolute;
    right: var(--border-width-thin);
}

.search-suggestions-matches-more,
.search-more-matches-label {
    color: var(--color-primary);
    font-size: calc(var(--font-size-small) * 0.9);
    font-weight: var(--font-weight-semibold);
    line-height: 100%;
    display: inline-block;
    opacity: 0.5;
    border-radius: var(--radius-primary);
}

.search-more-matches-label {
    width: max-content;
    height: min-content;
    padding: var(--spacing-minor);
    padding-left: calc(var(--spacing-minor) * 1.3);
}

.search-suggestions-matches-more,
.search-more-matches-label,
.search-more-matches-label::after {
    outline: var(--border-width-thin) solid var(--color-border);
}

.search-more-matches-label:not(.has-counter) {
    padding: calc(var(--spacing-minor) * 1.5); /* to match `.has-counter` extra padding due to pseudo-element */
}

.search-more-matches-label.has-counter::after {
    content: attr(data-counter);
    display: inline-block;
    padding: calc(var(--spacing-minor) / 2) var(--spacing-minor);
    border-radius: var(--radius-secondary);
    margin-left: var(--spacing-minor);
}

.search-secondary-string {
    color: var(--color-secondary);
    font-size: var(--font-size-small);
    opacity: 0.6;
}

.search-suggestions-path {
    line-height: 1.5; /* for wrapped paths */
    margin-bottom: 4px;
}

.search-suggestions-item-wrapper:active .search-secondary-string,
.search-suggestions-item-wrapper.active .search-secondary-string,
.search-suggestions-item-wrapper:active .search-more-matches-label,
.search-suggestions-item-wrapper.active .search-more-matches-label,
.search-suggestions-item-wrapper:active .search-more-matches-label.has-counter::after,
.search-suggestions-item-wrapper.active .search-more-matches-label.has-counter::after,
.search-suggestions-item-wrapper:active .search-suggestions-matches-more,
.search-suggestions-item-wrapper.active .search-suggestions-matches-more {
    color: currentColor;
    outline-color: currentColor;
}

/* Non-result below-search/filters elements */
#suggestions-wrapper .search-no-results-wrapper {
    height: 60px;
    color: var(--color-secondary);
    font-weight: var(--font-weight-semibold);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(-1 * (var(--spacing-minor) * 2)); /* to offset margin from filters actions container, which is unnecessary for this non-clickable element */
}

.search-show-all-results {
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-show-all-results-string {
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--spacing-minor);
}

.search-show-all-results-string::after {
    width: 16px;
    height: 16px;
    background: currentColor;
    content: '';
    display: inline-block;
    opacity: 0.8; /* to optically match color of text */
    -webkit-mask-image: url("/assets/images/ui.svg#icons-search-show-all-arrow");
    mask-image: url("/assets/images/ui.svg#icons-search-show-all-arrow");
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MAIN CONTENT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

body > .wrapper {
    max-width: 2000px;
    min-height: calc(100vh - var(--spacing-primary) * 4);
    background: var(--bg-primary);
    display: flex;
    flex-flow: row;
    border-radius: var(--radius-primary);
    padding: var(--spacing-primary);
    box-shadow: var(--shadow-primary);
    position: relative;
}

.git-wiki-page {
    min-width: 60%; /* so flex-basis works as expected */
    flex: 1 1 auto;
    padding-left: 0;
    margin: 0 0 50px 0;
}

/* Virtual pages */
.vp-content .page-heading,
.vp-content .tag-list-tag,
.vp-content #git-wiki-content {
    transition: opacity 250ms;
}

.vp-content.first-load:not(.loaded) .page-heading,
.vp-content.first-load:not(.loaded) .tag-list-tag,
.vp-content.first-load:not(.loaded) #git-wiki-content {
    opacity: 0;
}

.vp-content:not(.first-load) .page-heading,
.vp-content:not(.first-load) .tag-list-tag,
.vp-content:not(.first-load) #git-wiki-content {
    opacity: 1;
}

.vp-content.first-load:not(.loaded) #git-wiki-content {
    max-height: 100vh; /* prevent long pages creating long scrollbar on initial load */
    overflow: hidden;
}

.vp-content:not(.first-load) #git-wiki-content {
    max-height: 100%;
    overflow: inherit;
}


/* Breadcrumb links */
.breadcrumb-list {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    display: flex;
    flex-wrap: wrap;
    margin: -4px 0 calc(var(--spacing-secondary) - 4px); /* offsets to align to regular heading area */
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.breadcrumb-item:not(:last-child)::after {
    width: 12px;
    height: 16px;
    background: var(--color-border);
    content: '';
    display: inline-block;
    -webkit-mask-image: url("/assets/images/ui.svg#icons-breadcrumb");
    mask-image: url("/assets/images/ui.svg#icons-breadcrumb");
    margin: 0 5px;
}

.breadcrumb-item > a {
    color: inherit;
    opacity: 0.4;
}

.breadcrumb-item > a:hover,
.breadcrumb-item > a:active {
    color: var(--color-link);
    opacity: 1;
}

.breadcrumb-item > a:active {
    color: var(--color-link-hover);
}

/* Page heading, category tag list */
.page-heading-wrapper {
    position: relative;
}

.page-heading {
    word-break: break-word;
    margin-bottom: var(--spacing-secondary);
}

.page-heading-wrapper.is-featured .page-heading {
    padding-right: calc(var(--primary-button-diameter) + var(--spacing-intermediate));
}

.page-featured-indicator {
    width: var(--primary-button-diameter);
    height: var(--primary-button-diameter);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    overflow: hidden;
    border-radius: var(--radius-circle);
    position: absolute;
    top: calc(-1 * var(--spacing-minor) / 2); /* to align more centrally to top heading line */
    right: 0;
}

.page-featured-indicator::before {
    width: 100%;
    height: 100%;
    background: var(--color-link);
    content: '';
    display: block;
    opacity: var(--color-link-bg-opacity);
    grid-row: 1;
    grid-column: 1;
}

.page-featured-indicator::after {
    width: 24px;
    height: 24px;
    background: var(--color-link);
    content: '';
    display: block;
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
    -webkit-mask-image: url("/assets/images/ui.svg#icons-star");
    mask-image: url("/assets/images/ui.svg#icons-star");
}

.page-featured-indicator:hover::after {
    background: var(--color-link-hover);
}

#tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-minor);
    align-items: center;
    margin-bottom: var(--spacing-intermediate);
}

.tag-list-heading {
    margin-right: var(--spacing-minor);
}

.tag-list-tag {
    height: min-content;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    line-height: initial;
    display: inline-flex;
    overflow: hidden;
    padding: var(--spacing-minor) calc(var(--spacing-minor) * 2);
    border-radius: var(--radius-full);
    position: relative;
}

/* Background */
.tag-list-tag::before {
    width: 100%;
    height: 100%;
    background: var(--color-link);
    content: '';
    display: block;
    opacity: var(--color-link-bg-opacity);
    position: absolute;
    top: 0;
    left: 0;
}

/* Buttons */
.content-button {
    background: var(--color-buttons);
    display: flex;
    align-items: center;
    outline: none;
    list-style-type: none;
    cursor: pointer;
    padding: var(--spacing-minor) var(--spacing-secondary);
    border-radius: var(--radius-primary);
    box-shadow: var(--shadow-secondary);
    margin-bottom: var(--spacing-secondary);
    transition: background 150ms ease-out; /* so when cursor clicks then moves away the background shift isn't so jarring. Toolbar editing icons don't need this since tooltip essentially provides similar effect. */
}

.content-button::before {
    width: 24px;
    height: 24px;
    background: var(--color-secondary);
    content: '';
    display: inline-block;
    margin: 0 6px 0 calc(-1 * var(--spacing-minor));
    /* Insert mask-image via selector-specific properties */
}

.content-button,
.content-button:hover,
.content-button:active {
    color: inherit;
}

.content-button:hover {
    background: var(--color-buttons-hover);
}

.content-button:active {
    filter: var(--filter-button-active);
}

.content-button.file-download {
    background: var(--color-accent);
    color: var(--color-accent-foreground);
    display: inline-flex;
}

.content-button.file-download::before {
    background: var(--color-accent-foreground);
    flex-shrink: 0;
    -webkit-mask-image: url("/assets/images/ui.svg#icons-download-file");
    mask-image: url("/assets/images/ui.svg#icons-download-file");
}

.content-button.file-download:hover {
    background: var(--color-accent-hover);
}

.content-button.file-download:hover:active,
.content-button.file-download:active {
    background: var(--color-accent);
    filter: var(--filter-button-active);
}

/* Spoiler boxes */
details summary {
    cursor: pointer;
}

details:not([open]) summary {
    margin-bottom: 0; /* Chromium includes the summary margin when closed, while Firefox doesn't, so this normalizes both */
}

.spoiler {
    margin: var(--spacing-secondary) 0 var(--spacing-secondary);
}

.spoiler > h1,
.spoiler > h2,
.spoiler > h3,
.spoiler > h4,
.spoiler > p {
    padding-left: var(--spacing-minor); /* add slight left padding on first-level paragraph/heading elements to balance better with summary button */
}

summary p {
    margin: 0; /* to disable the margin on the paragraph generated by workaround required for parsing the Jekyll spoiler includes */
}

summary + p {
    display: none; /* hide the unnecessary, empty paragraph generated by the workaround for the include */
}

summary::marker,
summary::-webkit-details-marker {
    display: none; /* hide default icon */
}

.spoiler summary::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-spoiler-expand");
    mask-image: url("/assets/images/ui.svg#icons-spoiler-expand");
}

.spoiler[open] > .content-button::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-spoiler-contract");
    mask-image: url("/assets/images/ui.svg#icons-spoiler-contract");
}

/* Table of contents */
#git-wiki-toc {
    background: var(--bg-subtle);
    overflow-y: auto;
    padding: var(--spacing-secondary);
    padding-left: calc(var(--spacing-secondary) * 2.5);
    border-radius: var(--radius-primary);
    margin: -45px 0 var(--spacing-primary);  /* top margin to cover default 'Contents:' text */
    position: relative; /* raise above default 'Contents:' text */
}

#git-wiki-toc ol {
    margin-bottom: var(--spacing-minor);
}

.toc-toggle {
    margin: 0 0 var(--spacing-secondary);
}

.toc-toggle:not([open]),
.toc-toggle summary {
    margin-bottom: var(--spacing-primary);
}

.toc-toggle .content-button::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-toc");
    mask-image: url("/assets/images/ui.svg#icons-toc");
}

/* Split/divide list elements vertically into two columns */
ol.split,
ul.split,
ol.index,
ul.index,
.index.full-width li > ol,
.index.full-width li > ul {
    columns: 2;
    column-gap: var(--spacing-primary);
}

.split > li, .index > li,
.split > li ol, .index > li ol,
.split > li ul, .index > li ul {
    break-inside: avoid-column;
}

/* .index = for use on lists for index/category pages */
.index {
    clear: both;
}

/* Handle single first-level lists differently by adding columns to child list instead */
.index.full-width {
    columns: 1;
}

.index h1,
.index h2,
.index h3,
.index h4 {
    font-size: var(--font-size-medium);
    letter-spacing: 0;
    margin-top: 0;
    margin-bottom: var(--spacing-secondary);
    position: relative; /* for anchoring heading fragment identifier button */
}

/* To decrease size and be more discreet */
.index.small {
    font-weight: var(--font-weight-semibold);
}

.index.small h1,
.index.small h2,
.index.small h3,
.index.small h4 {
    font-size: var(--font-size-base);
}

.index,
.index li {
    list-style: none;
}

.index ol:last-child,
.index ul:last-child {
    margin-bottom: calc(var(--spacing-minor) * 2);
}

.index > li li {
    break-inside: avoid;
    margin-bottom: var(--spacing-minor);
}

.index a {
    width: 100%; /* make links clickable across entire list item area */
    display: inline-block;
}

/* Acts as first-level heading underlines/margin */
.index > li > ol,
.index > li > ul {
    padding: var(--spacing-secondary);
    border-top: var(--border-width) solid var(--color-border);
    margin-top: var(--spacing-secondary);
}

/* For sub-items to links (such as descriptions/notes) */
.index > li > ul li ul {
    padding-left: var(--spacing-intermediate);
}

.index > li > ul li ul *:not(a) {
    color: var(--color-secondary);
}

.index > li > ul li ul a {
    display: inline;
}

/* Heading fragment identifier links (added via JS) */
.heading-frag-id-link,
.index .heading-frag-id-link,
.reversefootnote /* if I could find the part of the Kramdown Ruby class affecting this HTML I could add some CSS classes but otherwise adding it as a selector here */
{
    width: 32px;
    height: 32px;
    background: var(--color-buttons);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-secondary);
    margin: -2px 0 0 calc(var(--spacing-minor) * 2);
    position: absolute;
    transition: opacity 250ms var(--timing-bezier-1);
}

.index .heading-frag-id-link {
    background: var(--color-buttons-hover);
    margin-top: 0;
    transform: translateY(-5px); /* alternative to `top` since Chromium ignores `break-inside: avoid` on absolutely positioned elements */
}

h2.heading-with-frag-id .heading-frag-id-link {
    margin-top: 0;
}

.heading-with-frag-id:hover .heading-frag-id-link,
.footnotes li:hover .reversefootnote {
    opacity: 1;
}

.heading-frag-id-link:hover,
.reversefootnote:hover {
    background: var(--color-buttons-hover);
}

.heading-frag-id-link:active,
.reversefootnote:active {
    filter: var(--filter-button-active);
}

.heading-frag-id-link::before,
.reversefootnote::before {
    width: 16px;
    height: 16px;
    background: var(--color-secondary);
    content: '';
    display: block;
    -webkit-mask-image: url("/assets/images/ui.svg#icons-heading-frag-id");
    mask-image: url("/assets/images/ui.svg#icons-heading-frag-id");
}

/* Fragment link targets styling (makes it clearer which heading has been linked in scenarios where heading position on page can't align to top of viewport) */
.heading-with-frag-id:target .heading-frag-id-link,
.heading-with-frag-id.vp-frag-pseudo-target .heading-frag-id-link {
    background: var(--color-accent);
    opacity: 1;
}

.heading-with-frag-id:target .heading-frag-id-link::before,
.heading-with-frag-id.vp-frag-pseudo-target .heading-frag-id-link::before {
    background: var(--color-accent-foreground);
}


.heading-with-frag-id:target .heading-frag-id-link:hover,
.heading-with-frag-id.vp-frag-pseudo-target .heading-frag-id-link:hover {
    background: var(--color-accent-hover);
}

.heading-with-frag-id:target .heading-frag-id-link:hover:active,
.heading-with-frag-id.vp-frag-pseudo-target .heading-frag-id-link:hover:active {
    background: var(--color-accent);
}

/* Blockquote special classes styling */
blockquote.stub,
blockquote.needs-revision,
blockquote.note,
blockquote.tip,
blockquote.important,
.spoiler.important .content-button {
    --first-child-margin-top: var(--spacing-minor);
    --top: 2px;
    --color: var(--color-important);
    border-left: var(--border-width) solid var(--color);
    position: relative;
}

blockquote.note,
blockquote.tip {
    --color: var(--color-link);
}

blockquote.stub,
blockquote.needs-revision {
    --color: var(--color-accent);
}

blockquote.stub::before,
blockquote.needs-revision::before,
blockquote.note::before,
blockquote.tip::before,
blockquote.important::before {
    width: 24px;
    height: 24px;
    background: var(--color);
    content: '';
    display: block;
    float: left;
    margin-right: calc(var(--spacing-minor) * 2);
    border-radius: var(--radius-circle);
    position: relative;
    top: var(--top);
}

blockquote.stub::after,
blockquote.needs-revision::after,
blockquote.note::after,
blockquote.tip::after,
blockquote.important::after {
    width: 24px;
    height: 24px;
    background: var(--color-primary);
    content: '';
    display: block;
    mask-position: 3px 3px;
    position: absolute;
    top: calc(var(--spacing-intermediate) + var(--top));
}

blockquote.important::after {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-small-exclamation");
    mask-image: url("/assets/images/ui.svg#icons-small-exclamation");
}

blockquote.note::after,
blockquote.tip::after {
    background: var(--bg-subtle);
    -webkit-mask-image: url("/assets/images/ui.svg#icons-small-note");
    mask-image: url("/assets/images/ui.svg#icons-small-note");
}

blockquote.tip::after {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-small-lightbulb");
    mask-image: url("/assets/images/ui.svg#icons-small-lightbulb");
    mask-position: 3px 4px; /* unfortunately can't just use `mask-position-y` since Chromium lacks support for it */
}

blockquote.stub::after,
blockquote.needs-revision::after {
    background: var(--color-accent-foreground);
    -webkit-mask-image: url("/assets/images/ui.svg#icons-small-text-caret");
    mask-image: url("/assets/images/ui.svg#icons-small-text-caret");
    mask-position: 3px 4px;
}

blockquote.stub::after {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-small-leaf");
    mask-image: url("/assets/images/ui.svg#icons-small-leaf");
    mask-position: 3px 3px;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SPECIAL LAYOUTS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.home-grid-tri-layout {
    container-type: inline-size;
    container-name: home-grid-tri-layout-cont;
    margin: var(--spacing-secondary) auto var(--spacing-intermediate);
}

/* For recent changes widget (first element), about text (second) and random featured widget (third) */
.home-grid-tri-layout .grid {
    min-height: 500px; /* default height if top-right's content doesn't push it taller */
    display: grid;
    gap: var(--spacing-intermediate);
    grid-template-columns: clamp(260px, 40%, 800px) 1fr; /* min (500px) and max (800px) with fluid in-between, for recent changes widget column */
    grid-template-rows: auto 0fr; /* this is non-obvious but the 0fr makes the first element collapse its height (desired behavior) even if it would normally expand to fill its max height, while still allowing it to expand to fill the grid height if the second's height expands. */
    grid-template-areas:
        "a b"
        "a c";
}

.home-grid-tri-layout .grid > :nth-child(1),
.home-grid-tri-layout .grid > :nth-child(2),
.home-grid-tri-layout .grid > :nth-child(3) {
    margin: 0;
}

.home-grid-tri-layout .grid > :nth-child(1) {
    min-height: 400px;
    max-height: none;
    grid-area: a;
}

.home-grid-tri-layout .grid > :nth-child(2) {
    min-height: 100px;
    grid-area: b;
}

.home-grid-tri-layout .grid > :nth-child(3) {
    min-height: 300px;
    grid-area: c;
}

@container home-grid-tri-layout-cont (max-width: 700px) {
    .home-grid-tri-layout .grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "b"
            "a"
            "c";
    }

    .home-grid-tri-layout .grid > :nth-child(1) {
        max-height: 400px;
    }
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PROGRAM/TOOL INFOBOX ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.infobox {
    width: var(--width-sidebar);
    background: var(--bg-subtle);
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    border-radius: var(--radius-primary);
    margin: 0 0 var(--spacing-primary) var(--spacing-primary);
    float: right;
}

.infobox .title {
    width: 100%;
    background: var(--color-accent);
    color: var(--color-accent-foreground);
    text-align: center;
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-minor) var(--spacing-secondary);
}

.infobox ul {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.infobox li {
    display: flex;
    padding: var(--spacing-minor) var(--spacing-secondary);
}

.infobox li:first-child {
    padding-top: calc(var(--spacing-minor) * 2);
}

.infobox li:last-child {
    border-bottom: none;
    padding-bottom: var(--spacing-secondary);
}

.infobox .label {
    font-weight: var(--font-weight-semibold);
    text-align: right;
    flex: 1 1 50%;
    margin-right: var(--spacing-secondary);
}

/* To account for when there are multiple values */
.infobox .value-wrapper {
    display: flex;
    flex: 1 1 75%;
    flex-wrap: wrap;
}

.infobox .value {
    flex-basis: 100%;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ IMAGES/VIDEO/ALIGNMENT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.git-wiki-page .image-wrapper,
.git-wiki-page img,
.git-wiki-page .center,
.git-wiki-page .video-wrapper {
    margin: var(--spacing-secondary) auto var(--spacing-primary);
    display: block;
    border-radius: var(--radius-primary);
    /* To stack above any blockquotes with classes that otherwise due to position relative get a higher stacking order (only relevant if img/video floated) */
    position: relative;
    z-index: 1;
}

.git-wiki-page .image-wrapper,
.git-wiki-page img,
.git-wiki-page .video-wrapper {
    max-height: 850px; /* same width as computed size of default content wrapper, to avoid excessive height when extended width toggle option enabled */
}

.git-wiki-page p.center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.git-wiki-page p.center,
.git-wiki-page p.center .image-wrapper {
    /* If left to inherit 'auto' then justify-content won't have effect */
    margin-left: 0;
    margin-right: 0;
}

/* Useful for index/category page icons or just placing smaller images side-by-side on same row */
.git-wiki-page .inline {
    display: inline-block;
}

.git-wiki-page .image-wrapper.inline:not(:only-child),
.git-wiki-page .inline:not(:only-child) {
    margin-right: var(--spacing-primary);
}

/* Preset max width so users don't have to bother adding dimension attributes if they don't want */
.git-wiki-page .thumb {
    max-height: 500px;
}

.git-wiki-page .thumb:not(.legacy-small) {
    max-width: 50%;
}

.git-wiki-page .thumb.left,
.git-wiki-page .thumb.right,
.git-wiki-page .thumb.legacy-small {
    max-width: 30%;
}

.git-wiki-page .right,
.git-wiki-page .legacy-small {
    max-width: 70%;
    margin-left: var(--spacing-primary);
    float: right;
    clear: right;
}

.git-wiki-page .left {
    max-width: 70%;
    margin-right: var(--spacing-primary);
    float: left;
    clear: left;
}

/* Elements created via Javascript */
.git-wiki-page .image-wrapper {
    display: table;
    clear: both;
}

.git-wiki-page .image-wrapper.inline {
    display: inline-table;
    vertical-align: top; /* align images when side-by-side to their top edge */
}

.git-wiki-page .image-wrapper img {
    max-height: inherit;
    margin: 0;
}

.git-wiki-page .caption {
    color: var(--color-secondary); /* overrides default theme */
    display: table-caption; /* inherits width of remaining elements in parent container if parent set to `display: table` */
    caption-side: bottom; /* by default `table-caption` is placed above so we want it below image */
    margin-top: var(--spacing-secondary);
}

.git-wiki-page .image-wrapper:not(.left):not(.right):not(.legacy-small) .caption {
    text-align: center;
}

/* Video specific */
.git-wiki-page .video-wrapper {
    width: 100%;
    max-width: 1280px; /* to force constrain aspect ratio (incl. controls) */
    text-align: center;
    display: table;
    clear: both;
}

.git-wiki-page .video-wrapper video {
    max-width: 100%;
    max-height: inherit;
}

.git-wiki-page .video-wrapper.iframe-type iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* modern method */
}

.git-wiki-page .video-wrapper.thumb,
.git-wiki-page .video-wrapper.thumb.left,
.git-wiki-page .video-wrapper.thumb.right {
    width: 60%;
    max-width: fit-content; /* override image .thumb styling */
}

.git-wiki-page .video-wrapper.thumb.left,
.git-wiki-page .video-wrapper.thumb.right {
    width: 50%;
}

.git-wiki-page .video-wrapper.has-caption .caption {
    text-align: center;
    margin-top: var(--spacing-minor);
}

.git-wiki-page .video-wrapper.has-caption.left .caption,
.git-wiki-page .video-wrapper.has-caption.right .caption {
    text-align: left;
}

/* For videos manually added as HTML to tables (sans video container) */
table video {
    width: 214px;
    height: auto;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ IMAGES: LIGHTBOX ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.medium-zoom-overlay,
.medium-zoom-image--opened {
    z-index: 99;
}

.medium-zoom-overlay {
    background: var(--bg-page);
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity 500ms;
    will-change: opacity;
}

.medium-zoom--opened .medium-zoom-overlay {
    opacity: 0.8;
    cursor: pointer;
    cursor: zoom-out;
}

.medium-zoom-image {
    cursor: pointer;
    cursor: zoom-in;
    transition: transform 500ms var(--timing-bezier-1); /* Duration gives Javascript lightbox just enough time to avoid overlapping with scrollIntoView(), which would otherwise auto close lightbox thinking a scroll was occurring */
}

.medium-zoom-image--hidden {
    visibility: hidden;
}

.medium-zoom-image--opened {
    cursor: pointer;
    cursor: zoom-out;
    position: relative;
    will-change: transform;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FOOTNOTES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.footnote {
    height: 18px;
    background: var(--color-buttons);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    line-height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 6px;
    border-radius: var(--radius-secondary);
    box-shadow: var(--shadow-secondary);
    margin-left: 2px;
    position: relative;
}

.footnote:hover {
    background: var(--color-buttons-hover);
}

.footnote:active {
    filter: var(--filter-button-active);
}

.footnote:hover,
.footnote:active {
    color: inherit;
}

/* Since Kramdown wraps footnote in parent sup element */
sup[role="doc-noteref"]:target .footnote {
    background: var(--color-accent);
    color: var(--color-accent-foreground);
}

sup[role="doc-noteref"]:target .footnote:hover {
    background: var(--color-accent-hover);
}


sup[role="doc-noteref"]:target .footnote:active {
    filter: var(--filter-button-active)
}

.footnotes ol {
    --list-inset: 40px; /* already the browser default at least in Chromium/FF but made explicit so target pseudo-element offset remains exact */
    padding-inline-start: var(--list-inset);
}

.footnotes li {
    position: relative;
}

.footnotes li:target::before {
    width: var(--border-width);
    height: 100%;
    background: var(--color-accent);
    content: '';
    display: block;
    border-radius: var(--radius-secondary);
    position: absolute;
    left: calc(-1 * var(--list-inset));
}

.reversefootnote {
    width: 22px;
    height: 24px;
    font-size: 0 !important;
    border-radius: var(--radius-secondary);
    margin-left: calc(var(--spacing-minor) / 2);
    position: relative; /* can't be absolute since there can be multiple backlinks if the footnote name used multiple places in the text */
}

.reversefootnote::before {
    width: 12px;
    height: 14px;
    -webkit-mask-image: url("/assets/images/ui.svg#icons-footnotes-backlink");
    mask-image: url("/assets/images/ui.svg#icons-footnotes-backlink");
}

.reversefootnote,
.reversefootnote:hover,
.reversefootnote:active {
    color: transparent; /* hide Kramdown inserted string */
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ SIDEBAR: HEADER GRAPHIC ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Once mobile viewport kicks in the desktop logo element is auto hidden */

.header-graphic-desktop {
    width: 204px;
    height: 204px;
    margin-left: 22px;
    filter: var(--filter-shadow-secondary);
    position: absolute;
    top: -230px;
    z-index: 3;
    transition: transform 250ms ease-out;
}

.header-graphic-desktop:hover {
    transform: rotateZ(-4deg) rotateY(-15deg);
}

.header-graphic-desktop.animate {
    animation: anim-header-graphic-scale 900ms;
}

.header-graphic-desktop-mask,
.header-graphic-desktop-image {
    width: 100%;
    height: 100%;
}

.header-graphic-desktop-mask {
    background-color: var(--color-accent);
    clip-path: circle(50% at 50% 50%);
    transition: background-color 250ms ease-in;
}

.header-graphic-desktop:hover .header-graphic-desktop-mask {
    background-color: var(--color-accent-hover);
}

.header-graphic-desktop.animate .header-graphic-desktop-mask {
    animation: anim-header-graphic-bg-color 900ms;
}

.header-graphic-desktop-image::before,
.header-graphic-desktop-image::after {
    width: 100%;
    height: 100%;
    background-image: var(--header-graphic-to);
    background-size: contain;
    background-repeat: no-repeat;
    content: '';
    display: block;
    position: absolute;
}

.header-graphic-desktop-image::after {
    background-image: var(--header-graphic-from);
    display: none;
}

.header-graphic-desktop-image::before,
.header-graphic-default .header-graphic-desktop-image::before,
#git-wiki-mobile-header a::before,
.header-graphic-default #git-wiki-mobile-header a::before {
    --header-graphic-to: var(--header-graphic-default); /* Javascript will change these variables on click via an inline style, for animation purposes */
}

.header-graphic-second .header-graphic-desktop-image::before,
.header-graphic-second #git-wiki-mobile-header a::before {
    --header-graphic-to: var(--header-graphic-second);
}

.header-graphic-second #git-wiki-mobile-header a::before {
    transform: scale(1.3) translateY(2.5px); /* for a more pleasant visual balance */
}

.header-graphic-desktop-image.animate::before,
.header-graphic-desktop-image.animate::after {
    --gradient: linear-gradient(45deg, #fff 45%, transparent 55%);
    animation: anim-header-graphic-swipe 500ms forwards;
}

.header-graphic-desktop-image.animate::after {
    --gradient: linear-gradient(45deg, transparent 45%, #fff 55%);
    display: block;
}

#git-wiki-mobile-header a.animate::before {
    animation: anim-header-mobile-graphic-swap 500ms;
}

@keyframes anim-header-graphic-scale {
    5%       { transform: scale(1); animation-timing-function: var(--timing-bezier-1); }
    10%,85%  { transform: scale(1.08); }
    90%      { animation-timing-function: var(--timing-bezier-2); }
    90%,100% { transform: scale(1); }
}

@keyframes anim-header-graphic-bg-color {
    0%,30%,70%,100% { background-color: var(--color-accent); }
    50%             { background-color: var(--color-accent-hover); }
}

@keyframes anim-header-graphic-swipe {
    0%,60%,100% {
        -webkit-mask-image: var(--gradient);
        mask-image: var(--gradient);
        -webkit-mask-size: 300% 100%;
        mask-size: 300% 100%;
        -webkit-mask-position: -50% 0;
        mask-position: -50% 0;
    }
    100% {
        -webkit-mask-position: -150% 0;
        mask-position: -150% 0;
    }
}

@keyframes anim-header-mobile-graphic-swap {
    0%,100% {
        background-image: var(--header-graphic-from);
        opacity: 1;
    }
    50.00% {
        background-image: var(--header-graphic-from);
        opacity: 0;
    }
    50.01%,100% {
        background-image: var(--header-graphic-to);
    }
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SIDEBAR, ICONS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#git-wiki-sidebar .view, /* Hide 'View My Github Profile' link */
.page-list-title, .page-list-title + ul, /* Hide 'Pages (Last <n> Updated)' list since date modified Jekyll plugin not allowed by Github Actions (assumes this list is last in sidebar) */
/* Hide site logo (uses alternative) */
.git-wiki-main-logo img,
#git-wiki-mobile-header img[src$="/site-logo.png"] {
    display: none;
}

#git-wiki-sidebar {
    width: auto !important;
    max-width: var(--width-sidebar);
    flex: 1 0 var(--width-sidebar);
    border-right: var(--border-width) solid var(--color-border);
    padding: 0 var(--spacing-primary) 0 0;
    padding-bottom: 0 !important; /* default override */
    margin-right: var(--spacing-primary);
    overflow: unset; /* required for `position: sticky` of child element */
    float: none;
    z-index: 4; /* to match mobile top header in order for hamburger close button to become visible */
}

/* Overriding default theme's additional sidebar selector */
.w3-sidebar {
    background-color: var(--bg-primary);
    height: auto;
}

.header-title-desktop {
    color: var(--color-primary);
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    display: block;
    margin-top: 155px; /* to avoid Paz emblem clipping into top of page when there's only a short scrollbar */
}

/* Scroll sidebar with page */
#git-wiki-sidebar > div {
    --header-graphic-offset: 245px;  /* to account for Paz emblem */
    position: sticky;
    top: var(--header-graphic-offset);
}

/* Make scrollable */
.git-wiki-page-list {
    height: calc(100vh - 350px); /* fixed value is approximate height of site logo area at desktop widths. Requires `height` rather than `max-height` for custom scrollbar Javascript to apply correctly */
}

/* Headings, lists */
.spoiler-sidebar {
    padding: 0 0 calc(var(--spacing-secondary) - (var(--spacing-minor) / 1.5));
    margin-bottom: calc(var(--spacing-secondary) / 1.25);
}

.spoiler-sidebar > .sidebar-heading {
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky; /* for use w/ scrollable sidebar container */
    top: -1px; /* stick to top of container (`-1px` so Javascript observer can detect 'stuck' state change) */
    z-index: 2;
}

.spoiler-sidebar > .sidebar-heading::after {
    width: 16px;
    height: 16px;
    background: var(--color-border);
    content: '';
    display: inline-block;
    opacity: 1;
    -webkit-mask-image: url("/assets/images/ui.svg#icons-spoiler-sidebar-main-expand");
    mask-image: url("/assets/images/ui.svg#icons-spoiler-sidebar-main-expand");
    transition: opacity 250ms var(--timing-bezier-1), background 250ms var(--timing-bezier-1);
}

.spoiler-sidebar[open] > .sidebar-heading::after {
    opacity: 0;
    -webkit-mask-image: url("/assets/images/ui.svg#icons-spoiler-sidebar-main-contract");
    mask-image: url("/assets/images/ui.svg#icons-spoiler-sidebar-main-contract");
}

.spoiler-sidebar > .sidebar-heading:hover::after {
    background: var(--color-secondary);
}

.spoiler-sidebar[open] > .sidebar-heading:hover::after {
    opacity: 1;
}

.spoiler-sidebar > ul:only-of-type,
.spoiler-sidebar > ul:last-child {
    padding-bottom: var(--spacing-minor);
    margin-bottom: 0;
}

.spoiler-sidebar > ul,
.git-wiki-page-list > ul {
    width: 100%;
    margin-top: var(--spacing-minor);
}

.git-wiki-page-list ul {
    padding: 0 0 var(--spacing-secondary);
    margin-bottom: var(--spacing-secondary);
}

.git-wiki-page-list ul ul {
    padding-left: var(--spacing-secondary);
    padding-bottom: 0;
    margin-bottom: 0;
}

.spoiler-sidebar:not(:last-child),
.git-wiki-page-list ul:not(:last-child) {
    border-bottom: var(--border-width) solid var(--color-border);
}

.spoiler-sidebar:last-child,
.git-wiki-page-list > ul:last-child {
    margin-bottom: var(--spacing-minor); /* only relevant for mobile menu */
}

.git-wiki-page-list li {
    break-inside: avoid-column; /* prevents icon mask issue in Chromium */
    display: block;
    position: relative;
}

.git-wiki-page-list li a {
    color: var(--color-secondary);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: flex-start; /* normalizes icon alignment with `section-hierarchy-list` list and when text truncation disabled */
    padding: var(--spacing-minor) calc(var(--spacing-minor) * 2);
    border-radius: var(--radius-primary);
}

.git-wiki-page-list li a:hover,
.git-wiki-page-list li a:active {
    background: var(--bg-subtle);
}

.git-wiki-page-list li a:hover {
    color: var(--color-link);
}

.git-wiki-page-list li a:active {
    color: var(--color-link-hover);
}

.git-wiki-page-list li .label {
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
}

/* Scrolling overflow fades */
.spoiler-sidebar .sidebar-heading::before,
.git-wiki-page-list.has-scrollbar::before,
.git-wiki-page-list.has-scrollbar::after {
    --height: 30px;
    --offset: 2px;
    width: 100%;
    height: var(--height);
    background: linear-gradient(0deg, transparent 0%, var(--bg-primary) 80% 100%);
    content: '';
    display: block;
    opacity: 1;
    position: absolute;
    z-index: 2;
    transition: opacity 250ms var(--timing-bezier-1);
    pointer-events: none;
}

.spoiler-sidebar .sidebar-heading::before {
    opacity: 0;
    top: calc(var(--height) - var(--offset));
    z-index: -2;
}

.git-wiki-page-list.has-scrollbar::before {
    top: 0;
}

.git-wiki-page-list.has-scrollbar::after {
    background: linear-gradient(180deg, transparent 0%, var(--bg-primary) 80% 100%);
    bottom: 0;
}

.spoiler-sidebar .sidebar-heading.stickied::before {
    opacity: 1;
}

.git-wiki-page-list.has-scrollbar.hide-top::before,
.git-wiki-page-list.has-scrollbar.hide-bottom::after {
    opacity: 0;
}

/* Section hierarchy list specific */
.section-hierarchy-list li .label {
    white-space: normal; /* disable text truncation (more useful for docs) */
}

.section-hierarchy-list .current-page > a.iconed,
.section-hierarchy-list .current-page > a.iconed:hover {
    background: var(--color-accent);
    color: var(--color-accent-foreground);
}

.section-hierarchy-list .current-page > a.iconed:hover {
    background: var(--color-accent-hover);
}

.section-hierarchy-list .current-page > a.iconed::before,
.section-hierarchy-list .current-page > a.iconed:hover::before {
    background: var(--color-accent-foreground);
}

.section-hierarchy-list .has-children {
    --spoiler-button-width: 32px;
}

.section-hierarchy-list .has-children > a {
    padding-right: var(--spoiler-button-width);
}

.section-hierarchy-spoiler > .spoiler-button {
    width: var(--spoiler-button-width);
    height: var(--spoiler-button-width);
    position: absolute;
    background: var(--color-border);
    opacity: 1;
    -webkit-mask-image: url("/assets/images/ui.svg#icons-spoiler-sidebar-hierarchy-expand");
    mask-image: url("/assets/images/ui.svg#icons-spoiler-sidebar-hierarchy-expand");
    -webkit-mask-position: 7px 8px;
    mask-position: 7px 8px;
    right: 0;
    top: 0;
    z-index: 1;
    transition: opacity 250ms var(--timing-bezier-1), background 250ms var(--timing-bezier-1);
}

.section-hierarchy-spoiler[open] > .spoiler-button {
    opacity: 0;
    -webkit-mask-image: url("/assets/images/ui.svg#icons-spoiler-sidebar-hierarchy-contract");
    mask-image: url("/assets/images/ui.svg#icons-spoiler-sidebar-hierarchy-contract");
}

.section-hierarchy-spoiler > .spoiler-button:hover {
    background: var(--color-secondary);
}

.section-hierarchy-spoiler[open] > .spoiler-button:hover {
    opacity: 1;
}

.current-page > .section-hierarchy-spoiler > .spoiler-button {
    background: var(--color-accent-foreground);
}

/* Counter badges */
.git-wiki-page-list .count-badge::after {
    max-width: 90px;
    background: var(--bg-subtle);
    color: var(--color-secondary);
    content: attr(data-count); /* assumes this custom HTML attribute has been added to element (using eg. Jekyll) */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 calc(var(--spacing-minor) * 2);
    border-radius: var(--radius-full);
    margin-left: auto;
}

.git-wiki-page-list .count-badge .label {
    margin-right: var(--spacing-minor);
}

/* Icons */
.iconed.icon-sidebar::before,
#git-wiki-content a[href^="https://youtu.be"]::before, #git-wiki-content a[href^="https://www.youtube.com"]::before
 {
    width: 22px; /* icons are based on 16x16px bounds, however for minor optical equivalence some icons reach 18px. Extra width just gives more headroom. */
    height: 22px;
    background: var(--color-secondary);
    content: '';
    display: inline-block;
    flex-shrink: 0; /* prevent parent flexbox scaling from making width smaller if sibling elements grow */
    margin: 0 calc(var(--spacing-minor) - 2px) -2px 0; /* offset to account for increased icon bounds */
    -webkit-mask-position: -2px -2px;
    -webkit-mask-repeat: no-repeat;
    mask-position: -2px -2px;
    mask-repeat: no-repeat;
    position: relative;  /* for when text truncation disabled */
    top: 2px;
}

/* For use in documentation */
#git-wiki-content .iconed.icon-sidebar::before {
    margin: 4px 2px 0;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
}

/* External link icons for certain sites (not embeds) */
#git-wiki-content a[href^="https://youtu.be"]::before, #git-wiki-content a[href^="https://www.youtube.com"]::before
{
    background: currentColor;
    margin-right: 2px;
    position: relative;
    top: 4px;
}

/* External link icons for certain sites - Hide regular external link icon to avoid visual busyness */
#git-wiki-content a[href^="https://youtu.be"], #git-wiki-content a[href^="https://www.youtube.com"] {
    background-image: none;
    padding-right: 0;
}

.git-wiki-page-list li .iconed:hover::before {
    background: var(--color-link);
}

.git-wiki-page-list li .iconed:active::before {
    background: currentColor;
}

.icon-sidebar.icon-diamond::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-sidebar-diamond");
    mask-image: url("/assets/images/ui.svg#icons-sidebar-diamond");
}

.icon-sidebar.icon-open-pages::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-sidebar-open-pages");
    mask-image: url("/assets/images/ui.svg#icons-sidebar-open-pages");
}

.icon-sidebar.icon-package::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-sidebar-package");
    mask-image: url("/assets/images/ui.svg#icons-sidebar-package");
}

.icon-sidebar.icon-tag::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-sidebar-tag");
    mask-image: url("/assets/images/ui.svg#icons-sidebar-tag");
}

.icon-sidebar.icon-text-caret::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-sidebar-text-caret");
    mask-image: url("/assets/images/ui.svg#icons-sidebar-text-caret");
}

.icon-sidebar.icon-curly-brackets::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-sidebar-curly-brackets");
    mask-image: url("/assets/images/ui.svg#icons-sidebar-curly-brackets");
}

.icon-sidebar.icon-lightbulb::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-sidebar-lightbulb");
    mask-image: url("/assets/images/ui.svg#icons-sidebar-lightbulb");
}

.icon-sidebar.icon-globe::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-sidebar-globe");
    mask-image: url("/assets/images/ui.svg#icons-sidebar-globe");
}

.icon-sidebar.icon-discord::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-sidebar-discord");
    mask-image: url("/assets/images/ui.svg#icons-sidebar-discord");
}

.icon-sidebar.icon-nexusmods::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-sidebar-nexusmods");
    mask-image: url("/assets/images/ui.svg#icons-sidebar-nexusmods");
}

.icon-sidebar.icon-tool::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-sidebar-tool");
    mask-image: url("/assets/images/ui.svg#icons-sidebar-tool");
}

.icon-sidebar.icon-youtube::before,
#git-wiki-content a[href^="https://youtu.be"]::before, .git-wiki-page a[href^="https://www.youtube.com"]::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-sidebar-youtube");
    mask-image: url("/assets/images/ui.svg#icons-sidebar-youtube");
}

.icon-sidebar.icon-page::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-sidebar-page");
    mask-image: url("/assets/images/ui.svg#icons-sidebar-page");
}

.icon-sidebar.icon-nodes::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-sidebar-nodes");
    mask-image: url("/assets/images/ui.svg#icons-sidebar-nodes");
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MOBILE ELEMENTS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#git-wiki-mobile-header,
#git-wiki-mobile-header.visible {
    height: var(--height-mobile-header);
    background-color: var(--color-accent);
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 0;
    border-bottom: none;
    box-shadow: var(--shadow-primary);
    top: 0;
    left: 0;
    z-index: 10;
    transform: translateY(0);
    transition: transform 500ms var(--timing-bezier-1),
                box-shadow 300ms;
}

#git-wiki-mobile-header.hidden {
    transform: translateY(calc(-1 * var(--height-mobile-header) - 10px));
    box-shadow: 0 0 0 0 transparent;
}

/* Hamburger menu button */
#git-wiki-mobile-header > button,
#git-wiki-mobile-header > button:hover,
#git-wiki-mobile-header > button:focus {
    color: var(--color-accent-foreground) !important;
    background: none !important;
    outline: none;
}

#git-wiki-sidebar button {
    display: none; /* hide original superfluous button */
}

#git-wiki-mobile-header > button {
    height: var(--height-mobile-header);
    width: 50px;
    font-size: 0 !important;
    text-indent: -999px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

/* `.mobile-menu-closed`/`.mobile-menu-open` classes via custom JS (overriding default JS) */
#git-wiki-mobile-header > button::before,
.mobile-menu-closed #git-wiki-mobile-header > button::before {
    width: 24px;
    height: 24px;
    content: '';
    display: block;
    background: var(--color-accent-foreground);
    -webkit-mask-image: url("/assets/images/ui.svg#icons-hamburger-menu");
    mask-image: url("/assets/images/ui.svg#icons-hamburger-menu");
}

.is-section .mobile-menu-open #git-wiki-mobile-header > button::before,
.mobile-menu-open #git-wiki-mobile-header > button::before {
    -webkit-mask-image: url("/assets/images/ui.svg#icons-hamburger-menu-close");
    mask-image: url("/assets/images/ui.svg#icons-hamburger-menu-close");
}

.is-section #git-wiki-mobile-header > button::before,
.is-section .mobile-menu-closed #git-wiki-mobile-header > button::before {
    width: 30px;
    -webkit-mask-image: url("/assets/images/ui.svg#icons-hamburger-menu-section");
    mask-image: url("/assets/images/ui.svg#icons-hamburger-menu-section");
    translate: 3px 0px;
}

.is-section .mobile-menu-open #git-wiki-mobile-header > button::before {
    translate: 5px 0px; /* slightly offset to be more centered to section-based closed state icon */
}

/* Paz emblem */
#git-wiki-mobile-header a {
    height: 100%;
    color: var(--color-accent-foreground);
    font-size: 19px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    margin: 0 auto;
    position: relative;
    left: -30px; /* to visually center text with graphic */
}

#git-wiki-mobile-header a::before {
    --header-graphic-to: var(--header-graphic-default);
    background-image: var(--header-graphic-to);
    content: '';
    display: inline-block;
    width: var(--height-mobile-header);
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: calc(var(--spacing-minor) * 2);
    transition: transform 200ms;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

footer {
    width: 100%;
    color: var(--color-secondary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    padding-left: 0;
    position: absolute;
    left: 0;
    bottom: calc(-1 * var(--spacing-primary) * 2);
    float: none;
    clear: both;
    z-index: 2;
}

/* Hide extra project footer lines. These only seem to appear in the local testing version though. */
.git-wiki-copyrights > p:not(:last-of-type),
.git-wiki-copyrights small .view {
    display: none;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SEARCH RESULTS PAGE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.search-results-wrapper,
.search-results-filters-list-wrapper,
.search-result-matches-list,
.search-result-tags-list,
.search-results-pagination-wrapper {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-results-query-info-wrapper {
    display: flex;
    gap: var(--spacing-minor);
}

.search-results-query-info-query {
    font-weight: var(--font-weight-semibold);
    font-style: italic;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-minor) 0;
}

.search-results-query-info-token-button {
    display: inline-flex;
    padding: 0 calc(var(--spacing-minor) / 1.5);
    border-radius: var(--radius-secondary);
    cursor: pointer;
    position: relative;
}


.search-results-query-info-token-button:hover .search-results-query-info-token {
    color: var(--color-secondary);
}

.search-results-query-info-token-button.disabled {
    text-decoration: line-through;
}

.search-results-filters-wrapper {
    background: var(--bg-subtle);
    display: flex;
    gap: var(--spacing-secondary);
    padding: var(--spacing-secondary);
    border-radius: var(--radius-primary);
    margin-top: var(--spacing-secondary);
}

.search-results-filters-label {
    color: var(--color-secondary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}

.search-results-filters-list-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-minor);
}

.search-results-filter-item {
    height: min-content;
    display: flex;
}

.search-results-filters-wrapper .search-filter-button {
    z-index: auto;
}

.search-results-filters-wrapper .search-filter-button:not(.active):not(:active):not(:hover) {
    color: var(--color-secondary);
    opacity: 0.75;
}

/* Clearer :active state for dark theme when filter container has background */
.search-results-filters-wrapper .search-filter-button:active {
    background: var(--color-buttons);
    filter: var(--filter-button-active);
    opacity: 1;
    border-color: var(--color-buttons);
}

.search-results-wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-minor) * 2);
    margin-top: var(--spacing-secondary);
}

/* Items */
.search-result-wrapper {
    background: var(--color-buttons);
    display: grid;
    grid-template-columns: 1fr var(--border-width) minmax(60%, 1fr); /* middle column is for vertical divider */
    gap: var(--spacing-primary);
    overflow: hidden;
    padding: var(--spacing-secondary) var(--spacing-intermediate) calc(var(--spacing-secondary) + var(--spacing-minor)); /* bottom padding is to visually match title's line height extra offset */
    border-radius: var(--radius-primary);
    position: relative; /* to align vertical divider to */
}

.search-result-wrapper.has-image {
    min-height: 150px;
}

.search-result-first-area {
    position: relative;
}

.search-result-second-area {
    grid-column: 3;
}

/* Vertical divider */
.search-result-second-area::before {
    width: var(--border-width);
    height: calc(100% - (var(--spacing-secondary) + var(--spacing-primary)));
    background: var(--bg-primary);
    content: '';
    display: block;
    grid-column: 2;
    border-radius: var(--radius-full);
    position: absolute;
    top: calc((var(--spacing-secondary) + var(--spacing-primary)) / 2);
    left: 0;
}

.search-result-wrapper.has-image .search-result-second-area::before {
    opacity: 0;
}

.search-result-image-wrapper {
    /* All dimensions/offsets based on result container padding offsets */
    --result-width-offset: var(--spacing-primary);
    width: calc(100% + var(--result-width-offset) + var(--spacing-intermediate) + (var(--border-width) / 2));
    height: calc(100% + (var(--spacing-secondary) * 2) + var(--spacing-minor));
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    margin-bottom: var(--spacing-secondary);
    position: absolute;
    top: calc(-1 * var(--spacing-secondary));
    left: calc(-1 * var(--spacing-intermediate));
    z-index: 0;
}

.search-result-image-wrapper::before,
.search-result-image-wrapper::after {
    width: 500px;
    height: 500px;
    background-image: radial-gradient(circle at -60% -80%, var(--color-blue-mid) 45%, transparent 75%);
    content: '';
    display: block;
    position: absolute;
}

.search-result-image-wrapper::after {
    width: 100%;
    background-image: linear-gradient(165deg, var(--color-blue-mid) 20%, transparent 50%);
    background-color: transparent;
    opacity: 0.5;
    mix-blend-mode: hue;
}

.search-result-image {
    width: 100%;
    height: 100%;
    background: var(--color-blue-mid);
    object-fit: cover;
    object-position: top;
    opacity: 0.2;
    mix-blend-mode: soft-light;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Details */
.search-result-title {
    font-size: calc(var(--font-size-medium) * 0.8);
    font-weight: var(--font-weight-semibold);
    display: block;
    position: relative;
}

.search-result-wrapper.has-image .search-result-title {
    color: var(--color-blue-content-light-regular);
    text-shadow: var(--color-blue-content-light-text-shadow);
}

.search-result-wrapper.has-image .search-result-title:hover,
.search-result-wrapper.has-image .search-result-title:active {
    color: var(--color-blue-content-light-hover);
}

.search-result-section-path {
    color: var(--color-secondary);
    font-size: var(--font-size-small);
}

.search-result-wrapper.has-image .search-result-section-path {
    color: var(--color-blue-content-light-regular);
    position: relative;
}

.search-result-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-minor);
}

.search-result-tags-list,
.search-result-tags-list.ib-tags-list {
    margin-top: var(--spacing-minor);
}

.search-result-matches-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-minor) * 2);
}

.search-result-matches-list.labels-only {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-minor);
    padding: calc(var(--spacing-minor) * 2) 0; /* to align more visually with the title */
}

.search-result-match-string,
.search-result-match-more {
    color: var(--color-secondary);
    font-size: var(--font-size-small);
    line-height: var(--font-line-height);
    display: inline-block;
    word-break: break-word;
    overflow-wrap: break-word;
}

.search-result-match-string b {
    color: var(--color-primary); /* increase contrast */
}

.search-result-match-more {
    font-weight: var(--font-weight-semibold);
    margin-top: calc(var(--spacing-minor) * 2);
}

.search-result-matches-wrapper .search-more-matches-label,
.search-result-matches-wrapper .search-more-matches-label.has-counter::after {
    outline: none;
}

.search-result-matches-wrapper .search-more-matches-label {
    color: var(--color-secondary);
    overflow: hidden;
    opacity: 1;
    position: relative;
}

.search-result-matches-wrapper .search-more-matches-label::before {
    width: 100%;
    height: 100%;
    background: var(--color-secondary);
    content: '';
    display: block;
    opacity: 0.1;
    position: absolute;
    top: 0;
    left: 0;
}

.search-result-matches-wrapper .search-more-matches-label.has-counter::after {
    background: var(--color-buttons);
    position: relative;
    z-index: 0; /* prevent ::before overlapping */
}

/* Pagination */
.search-results-pagination-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-minor);
    margin-top: var(--spacing-primary);
}

.search-results-pagination-item {
    color: var(--color-secondary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    line-height: 0;
    cursor: pointer;
    padding: var(--spacing-secondary) calc(var(--spacing-minor) * 2.5);
    border-radius: var(--radius-full);
}

.search-results-pagination-item.active,
.search-results-pagination-item:hover {
    background: var(--color-buttons);
}

.search-results-pagination-item:active {
    background: var(--color-buttons-hover)
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FOR IMAGE BACKGROUND ELEMENTS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Rules placed here to take precedence over other same-specificity classes for the same element */

.ib {
    --color-blue-mid: hsl(217,65%,58%); /* light theme's link color so both themes have consistent hue/brightness */
    --color-blue-border: hsla(216.8, 64.6%, 67.8%,0.8);
    --color-blue-translucent-bg: hsla(217,100%,83%);
    --color-blue-content-light-regular: hsl(0,0%,89%);
    --color-blue-content-light-hover: hsl(0,0%,97%);
    --color-blue-content-light-heading: #fefeff;

    --color-blue-dark: hsl(215.91,55.47%,48.43%);
    --color-blue-darkest: hsl(216.2, 73.9%, 18%); /* for background of text only embed page items on light theme */
    --color-blue-light: hsl(216.55, 100%, 82.94%); /* similar in tone to link hover but not same blue, only used for shuffled page embed highlight progress bar atm */

    --color-blue-content-light-text-shadow: 0 0 1px hsla(0,0%,0%,0.2), 0 1px 2px hsla(0,0%,0%,0.2);
    --color-blue-content-light-icon-shadow: drop-shadow(0 0 1px hsla(0,0%,0%,0.2)) drop-shadow(0 1px 2px hsla(0,0%,0%,0.2));
}

.ib-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-minor) + var(--border-width-thin) * 2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ib-primary-button,
.ib-tag-list-tag {
    outline: var(--border-width-thin) solid var(--color-blue-border);
    backdrop-filter: blur(5px); /* note: causes slightly blurry foreground text on element in Chromium */
}

.ib-tag-list-tag {
    color: var(--color-blue-content-light-regular);
    text-shadow: var(--color-blue-content-light-text-shadow);
}

.ib-primary-button:hover,
.ib-tag-list-tag:hover {
    color: var(--color-blue-content-light-hover);
}

.ib-tag-list-tag:hover,
.ib-tag-list-tag:active {
    outline-width: var(--border-width-thin); /* override of default stylesheet */
}

.ib-tag-list-tag:active {
    color: var(--color-blue-content-light-regular);
}

.ib-primary-button::before,
.ib-tag-list-tag::before {
    background: var(--color-blue-translucent-bg);
    opacity: 0.2;
}

.ib-primary-button:hover::before,
.ib-tag-list-tag:hover::before {
    opacity: 0.25;
    filter: contrast(1.1);
}

.ib-primary-button:active::before,
.ib-tag-list-tag:active::before {
    background: var(--color-blue-mid);
    opacity: 0.2;
}

.ib-primary-button {
    width: var(--primary-button-diameter);
    height: var(--primary-button-diameter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--radius-circle);
    position: relative;
}

.ib-primary-button::before {
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* Icon container used to support drop-shadow() filter to wrap to mask shape */
.ib-primary-button.iconed .icon-wrapper {
    width: 24px;
    height: 24px;
    filter: var(--color-blue-content-light-icon-shadow);
    pointer-events: none;
}

.ib-primary-button.iconed .icon-wrapper::before {
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    background: var(--color-blue-content-light-regular);
}

.ib-primary-button.iconed:hover .icon-wrapper::before {
    background: var(--color-blue-content-light-hover);
}

.ib-primary-button.iconed:active .icon-wrapper::before {
    background: var(--color-blue-content-light-regular);
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ WIDGET INCLUDES (INIT STYLING) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.widget {
    min-height: 200px;
    min-width: 200px;
    margin: var(--spacing-secondary) 0 var(--spacing-intermediate);
    border-radius: var(--radius-primary);
}

.widget.hidden {
    background: var(--bg-subtle);
    display: flex;
    justify-content: center;
    align-items: center;
}

.widget.hidden > * {
    display: none !important;
}

.widget.hidden::before {
    max-width: 50%;
    color: var(--color-secondary);
    content: '';
    display: block;
    animation: anim-widget-delayed-show-meta 2s steps(2, end) forwards; /* essentially just for users with JS disabled, delayed so doesn't appear for users with JS enabled immediately */
}

.widget.hidden.error::before {
    content: attr(data-error);
    animation: none;
}

@keyframes anim-widget-delayed-show-meta {
    0%   { content: ''; }
    100% { content: attr(data-meta-description); }
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 404 PAGE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.pagenotfound-results {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagenotfound-results.loading {
    height: 100px;
    background: var(--color-secondary);
    -webkit-mask-image: url("/assets/images/ui.svg#loading-dots");
    mask-image: url("/assets/images/ui.svg#loading-dots");
}

.pagenotfound-results li a {
    display: block;
    padding: calc(var(--spacing-minor) * 2) var(--spacing-intermediate);
    background: var(--color-buttons);
    border-radius: var(--radius-primary);
    margin: 0 0 var(--spacing-minor);
}

.pagenotfound-results li a:hover,
.pagenotfound-results li a:active {
    background: var(--color-buttons-hover);
}

.pagenotfound-results .redirection a {
    width: 100%;
    padding-left: 130px;
    position: relative;
}

.pagenotfound-results .redirection a::before {
    color: var(--color-secondary);
    content: 'Redirection';
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    display: inline-block;
    line-height: 100%;
    padding: var(--spacing-minor) calc(var(--spacing-minor) * 2);
    border-radius: var(--radius-full);
    border: var(--border-width) solid var(--color-border);
    position: absolute;
    z-index: 1;
    top: calc(var(--spacing-minor) * 2);
    left: var(--spacing-intermediate);
    pointer-events: none;
}

.pagenotfound-results .no-results {
    color: var(--color-secondary);
    text-align: center;
    margin-top: calc(var(--spacing-primary) * 2);
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ THEMES RELATED ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Note: to avoid more copies of code the styling of this section is only active when body has class added via JS (ie: users with JS disabled won't see them) */

/* Code within tables so it's not white-on-white background */
.theme-light table code,
.theme-light blockquote code {
    background: var(--bg-code-inset);
}

/* Code block within blockquote */
.theme-light blockquote > pre, /* for virtual pages */
.theme-light blockquote > .highlighter-rouge > .highlight > pre {
    border: var(--border-width-thin) solid var(--color-border);
}

.theme-light blockquote > pre code,
.theme-light blockquote > .highlighter-rouge > .highlight > pre code {
    background: var(--bg-code);
}

/* Syntax highlighting */
.theme-light #git-wiki-content .hljs span,
.theme-light #git-wiki-content .highlight span {
    filter: brightness(0.75) saturate(1.2);
}

.theme-dark .search-results-filters-wrapper .search-filter-button {
    filter: brightness(1.2);
}

.theme-dark .search-results-filters-wrapper .search-filter-button.active:not(:active) {
    filter: brightness(1.1);
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MEDIA QUERIES - THEMES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Copies of .body blocks from global definitions */
@media (prefers-color-scheme: light) {

    body {
        --bg-page: var(--light-theme-bg-page);
        --bg-primary: var(--light-theme-bg-primary);
        --bg-subtle: var(--light-theme-bg-subtle);
        --bg-subtle-alt: var(--light-theme-bg-subtle-alt);
        --bg-input: var(--light-theme-bg-input);
        --bg-code: var(--light-theme-bg-code);
        --bg-code-inset: var(--light-theme-bg-code-inset);
        --bg-list-hover: var(--light-theme-bg-list-hover);
        --bg-tooltip: var(--light-theme-bg-tooltip);
        --color-primary: var(--light-theme-color-primary);
        --color-secondary: var(--light-theme-color-secondary);
        --color-accent: var(--light-theme-color-accent);
        --color-accent-hover: var(--light-theme-color-accent-hover);
        --color-accent-foreground: var(--light-theme-color-accent-foreground);
        --color-link: var(--light-theme-color-link);
        --color-link-hover: var(--light-theme-color-link-hover);
        --color-code: var(--light-theme-color-code);
        --color-border: var(--light-theme-color-border);
        --color-buttons: var(--light-theme-color-buttons);
        --color-buttons-hover: var(--light-theme-color-buttons-hover);
        --color-buttons-inset: var(--light-theme-color-buttons-inset);
        --color-important: var(--light-theme-color-important);
        --color-shadow: var(--light-theme-color-shadow);

        --filter-button-active: var(--light-theme-filter-button-active);
    }

}

@media (prefers-color-scheme: dark) {

    body {
        --bg-page: var(--dark-theme-bg-page);
        --bg-primary: var(--dark-theme-bg-primary);
        --bg-subtle: var(--dark-theme-bg-subtle);
        --bg-subtle-alt: var(--dark-theme-bg-subtle-alt);
        --bg-input: var(--dark-theme-bg-input);
        --bg-code: var(--dark-theme-bg-code);
        --bg-list-hover: var(--dark-theme-bg-list-hover);
        --bg-tooltip: var(--dark-theme-bg-tooltip);
        --color-primary: var(--dark-theme-color-primary);
        --color-secondary: var(--dark-theme-color-secondary);
        --color-accent: var(--dark-theme-color-accent);
        --color-accent-hover: var(--dark-theme-color-accent-hover);
        --color-accent-foreground: var(--dark-theme-color-accent-foreground);
        --color-link: var(--dark-theme-color-link);
        --color-link-hover: var(--dark-theme-color-link-hover);
        --color-code: var(--dark-theme-color-code);
        --color-border: var(--dark-theme-color-border);
        --color-buttons: var(--dark-theme-color-buttons);
        --color-buttons-hover: var(--dark-theme-color-buttons-hover);
        --color-buttons-inset: var(--dark-theme-color-buttons-inset);
        --color-important: var(--dark-theme-color-important);
        --color-shadow: var(--dark-theme-color-shadow);

        --shadow-primary: 0 2px 20px 0 var(--color-shadow);
        --shadow-secondary: 0 2px 10px 0 var(--color-shadow);
        --filter-shadow-secondary: drop-shadow(0 2px 5px var(--color-shadow));

        --filter-button-active: var(--dark-theme-filter-button-active);
    }

}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MEDIA QUERIES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

}

@media print, screen and (max-width: 992px) {

    :root {
        --spacing-lightbox: var(--spacing-secondary);
        --spacing-target-top: calc(var(--height-mobile-header) + var(--spacing-primary));
        --font-size-base: 15px;
    }

    body {
        margin-top: calc(30px + var(--height-mobile-header));
        padding-left: calc(var(--spacing-primary) * 2);
        padding-right: calc(var(--spacing-primary) * 2);
    }

    .git-wiki-tools {
        justify-content: center;
        right: 0;
    }

    .tools-button.page-width-toggle {
        display: none; /* button unnecessary since page already becomes max width */
    }

    .search-input-peripheral {
        --offset-top: -1px;
    }

    .git-wiki-page .left,
    .git-wiki-page .right,
    .git-wiki-page .legacy-small,
    .git-wiki-page .thumb.left,
    .git-wiki-page .thumb.right,
    .git-wiki-page .thumb.legacy-small {
        max-width: 45%;
    }

    #git-wiki-sidebar {
        width: calc(100% - var(--spacing-minor) * 2) !important;
        max-width: 100%;
        background: var(--bg-tooltip);
        display: block;
        padding-top: var(--spacing-secondary);
        padding-right: 0;
        border: none;
        border-radius: var(--radius-primary);
        margin: 0 var(--spacing-minor);
        position: fixed !important;
        top: calc(var(--height-mobile-header) + var(--spacing-secondary));
        left: 0;
        filter: var(--filter-shadow-secondary);
        transition: max-height 200ms ease-out, opacity 150ms ease-out, top 150ms ease-in;
        z-index: 10;
    }

    #git-wiki-sidebar,
    .mobile-menu-closed #git-wiki-sidebar {
        max-height: 100px;
        opacity: 0;
        top: calc(var(--height-mobile-header) + var(--spacing-minor) * 2);
        pointer-events: none;
    }

    .mobile-menu-open #git-wiki-sidebar {
        max-height: 100vh;
        opacity: 1;
        top: calc(var(--height-mobile-header) + var(--spacing-minor));
        pointer-events: auto;
    }

    /* Copy of tooltip menu pseudo-element styling */
    #git-wiki-sidebar::before {
        --for-icon-offset: 0px;
        --height: 8px;
        width: 20px;
        height: var(--height);
        background: var(--bg-tooltip);
        content: '';
        display: block;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        position: absolute;
        top: 0;
        left: calc(var(--spacing-minor) * 2 + var(--for-icon-offset));
        transition: top 200ms ease-out;
    }

    .is-section #git-wiki-sidebar::before {
        /* To align with hamburger menu icon's close state offset on section pages */
        --for-icon-offset: 2px;
    }

    .mobile-menu-open #git-wiki-sidebar::before {
        top: calc(-1 * var(--height));
    }

    /* Behind menu overlay, like lightbox */
    body > .wrapper::before {
        background: var(--bg-page);
        content: '';
        display: block;
        opacity: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        z-index: 9;
        transition: opacity 500ms;
    }

    body > .wrapper.mobile-menu-open::before {
        opacity: 0.8;
    }

    .mobile-menu-open .git-wiki-page > section {
        pointer-events: none; /* prevent interactable elements being clicked behind menu */
    }

    #git-wiki-sidebar > div {
        position: static;
    }

    .git-wiki-page-list {
        height: calc(100vh - var(--height-mobile-header) - (var(--spacing-primary) * 4));
        padding: 0 var(--spacing-secondary);
    }

    .git-wiki-page-list.has-scrollbar::before,
    .git-wiki-page-list.has-scrollbar::after {
        width: calc(100% - var(--spacing-secondary) * 2);
    }

    .spoiler-sidebar .sidebar-heading::before,
    .git-wiki-page-list.has-scrollbar::before {
        --offset: 5px;
        background: linear-gradient(0deg, transparent 0%, var(--bg-tooltip) 80% 100%);
    }

    .git-wiki-page-list.has-scrollbar::after {
        background: linear-gradient(180deg, transparent 0%, var(--bg-tooltip) 80% 100%);
    }

    .spoiler-sidebar > .sidebar-heading {
        background: var(--bg-tooltip);
    }

    .spoiler-sidebar > ul,
    .git-wiki-page-list > ul {
        columns: 2;
        column-gap: 0;
    }

    .git-wiki-page-list ul:not(:last-child) {
        border-color: var(--bg-primary);
    }

    .git-wiki-page-list li a:hover,
    .git-wiki-page-list li a:active,
    .git-wiki-page-list .count-badge::after {
        background: var(--bg-primary);
    }

    .spoiler-sidebar .section-hierarchy-list {
        columns: 1;
    }

    /* Make sidebar spoiler buttons always visible due to lack of mobile hover */
    .spoiler-sidebar[open] > .sidebar-heading::after,
    .section-hierarchy-spoiler[open] > .spoiler-button {
        opacity: 1;
    }

}

@media print, screen and (max-width: 960px) {

    .git-wiki-page, footer {
        /* Overriding defaults. Remove from original. */
        border: inherit;
        padding: 0;
        margin: 0;
    }

}

@media print, screen and (max-width: 880px) {

    body {
        padding-left: var(--spacing-primary);
        padding-right: var(--spacing-primary);
    }

}

@media print, screen and (max-width: 700px) {

    ol.split,
    ul.split,
    ol.index,
    ul.index,
    .index.full-width li > ol,
    .index.full-width li > ul {
        columns: 1;
    }

    .git-wiki-page .image-wrapper:not(.inline) img:not(.inline), /* won't apply if user has Javascript disabled */
    .git-wiki-page .thumb,
    .git-wiki-page .thumb:not(.legacy-small),
    .git-wiki-page .thumb.left,
    .git-wiki-page .thumb.right,
    .git-wiki-page .video-wrapper.thumb,
    .git-wiki-page .video-wrapper.thumb.left,
    .git-wiki-page .video-wrapper.thumb.right,
    .git-wiki-page .right,
    .git-wiki-page .left,
    .git-wiki-page .legacy-small,
    .git-wiki-page .thumb.legacy-small {
        width: auto;
        max-width: 100%;
        margin: var(--spacing-secondary) auto var(--spacing-primary);
        float: none;
    }

    .git-wiki-page .image-wrapper:not(.inline) img:not(.inline) {
        margin: 0;
    }

    .git-wiki-page .video-wrapper.thumb,
    .git-wiki-page .video-wrapper.thumb.left,
    .git-wiki-page .video-wrapper.thumb.right {
        width: 100%;
    }

    .git-wiki-page .image-wrapper.legacy-small .caption,
    .git-wiki-page .image-wrapper.left .caption,
    .git-wiki-page .image-wrapper.right .caption,
    .git-wiki-page .video-wrapper.has-caption .caption,
    .git-wiki-page .video-wrapper.has-caption.left .caption,
    .git-wiki-page .video-wrapper.has-caption.right .caption {
        text-align: center;
    }

}

@media print, screen and (max-width: 601px) {

    :root {
        --font-size-base: 14px;
    }

    body {
        padding-left: var(--spacing-secondary);
        padding-right: var(--spacing-secondary);
    }

    body > .wrapper {
        padding: var(--spacing-primary) calc(var(--spacing-secondary) * 1.25);
    }

    #git-wiki-mobile-header a {
        left: -15px;
    }

    .iconed.icon-sidebar::before {
        top: 0; /* to align icon w/ new font size */
    }

    .tooltip:not(.tooltip.menu) {
        display: none; /* hide tooltips at narrowest viewports */
    }

    .infobox {
        width: 100%;
        margin: 0 0 var(--spacing-primary);
        float: none;
    }

    .search-result-wrapper {
        gap: var(--spacing-secondary);
        padding: calc(var(--spacing-minor) * 2) var(--spacing-secondary) var(--spacing-secondary);
    }

    .search-result-image-wrapper {
        --result-width-offset: var(--spacing-secondary);
    }

}

@media print, screen and (max-width: 480px) {

    .spoiler-sidebar > ul,
    .git-wiki-page-list > ul {
        columns: 1;
    }

    .search-suggestions-item,
    .search-result-wrapper {
        grid-template-columns: 1fr;
    }

    .search-suggestions-matches-wrapper,
    .search-result-second-area::before {
        display: none;
    }

    .search-result-second-area {
        grid-column: inherit;
    }

    .search-result-wrapper.has-image .search-result-second-area {
        margin-top: var(--spacing-intermediate);
    }

}

@media print, screen and (max-width: 400px) {

    .tools-button .primary-button {
        width: 34px;
        height: 34px;
    }

}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SYNTAX HIGHLIGHTING THEME ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Adapted from this source: https://github.com/brazacz/rouge-themes/blob/main/css/monokai.sublime.css */
/* All font style/weight styling copied from original CSS */

.highlight .gh {
    color: #999999;
}

.hljs-regexp,
.highlight .sr,
.highlight .nb, {
    color: #f6aa11;
}

.highlight .go {
    color: #888888;
}

.highlight .gp {
    color: #555555;
}

.highlight .gu {
    color: #aaaaaa;
}

.hljs-comment, .hljs-doctag,
.highlight .cm,
.highlight .cp,
.highlight .c1,
.highlight .cs,
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
    color: #75715e;
}

.hljs-comment,
.highlight .cd,
.highlight .cm,
.highlight .c1 {
    font-style: italic;
}

.highlight .cp {
    font-weight: bold
}

.hljs-doctag,
.highlight .cs {
    font-weight: bold;
    font-style: italic;
}

.highlight .err {
    color: #960050;
    background-color: rgba(170,101,101,0.2);
}

.highlight .gr,
.highlight .gt {
    color: #960050;
}

.highlight .gd,
.highlight .gi,
.highlight .ge {
    color: #49483e;
}

.hljs-variable, .hljs-literal,
.highlight .kc,
.highlight .kd,
.highlight .kr,
.highlight .no,
.highlight .kt {
    color: #66d9ef;
}

.hljs-keyword, .hljs-literal,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt,
.highlight .k,
.highlight .kv {
    font-weight: bold
}

.hljs-number, .hljs-char.escape_, .hljs-symbol,
.highlight .mf,
.highlight .mh,
.highlight .il,
.highlight .mi,
.highlight .mo,
.highlight .m, .highlight .mb, .highlight .mx,
.highlight .sc,
.highlight .se,
.highlight .ss {
    color: #ae81ff;
}

.hljs-string,
.highlight .sd,
.highlight .s2,
.highlight .sb,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .s1,
.highlight .s, .highlight .sa, .highlight .dl {
    color: #e6db74;
}

.hljs-title,
.highlight .na,
.highlight .nc,
.highlight .nd,
.highlight .ne,
.highlight .nf, .highlight .fm {
    color: #a6e22e;
}

.hljs-title,
.highlight .nc,
.highlight .nd,
.highlight .ne,
.highlight .nf,
.highlight .nl {
    font-weight: bold
}

.hljs-params, .hljs-property,
.highlight .vc,
.highlight .nn,
.highlight .nl,
.highlight .ni,
.highlight .bp,
.highlight .vg,
.highlight .vi,
.highlight .w,
.highlight .n, .highlight .py, .highlight .nx,
.highlight .nv, .highlight .vm {
    color: var(--color-code);
    background-color: none;
}

.hljs-keyword, .hljs-operator,
.highlight .o, .highlight .ow,
.highlight .nt,
.highlight .k, .highlight .kv,
.highlight .kn,
.highlight .kp {
    color: #f92672;
}

.highlight .ge {
    font-style: italic
}

.highlight .gs {
    font-weight: bold
}

.hljs-operator,
.highlight .ow, .highlight .o {
    font-weight: bold
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FONTS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@font-face {
    font-family: Kibur;
    font-style: italic;
    font-weight: 400;
    src:url('/assets/fonts/kibur/regular-italic-range-1.woff2') format('woff2');
    unicode-range: u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116;
}

@font-face {
    font-family: Kibur;
    font-style: italic;
    font-weight: 400;
    src:url('/assets/fonts/kibur/regular-italic-range-2.woff2') format('woff2');
    unicode-range: u+0590-05ff,u+20aa,u+25cc,u+fb1d-fb4f;
}

@font-face {
    font-family: Kibur;
    font-style: italic;
    font-weight: 400;
    src:url('/assets/fonts/kibur/regular-italic-range-3.woff2') format('woff2');
    unicode-range: u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff;
}

@font-face {
    font-family: Kibur;
    font-style: italic;
    font-weight: 400;
    src:url('/assets/fonts/kibur/regular-italic-range-4.woff2') format('woff2');
    unicode-range: u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd;
}

@font-face {
    font-family: Kibur;
    font-style: italic;
    font-weight: 500;
    src:url('/assets/fonts/kibur/medium-italic-range-1.woff2') format('woff2');
    unicode-range: u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116;
}

@font-face {
    font-family: Kibur;
    font-style: italic;
    font-weight: 500;
    src:url('/assets/fonts/kibur/medium-italic-range-2.woff2') format('woff2');
    unicode-range: u+0590-05ff,u+20aa,u+25cc,u+fb1d-fb4f;
}

@font-face {
    font-family: Kibur;
    font-style: italic;
    font-weight: 500;
    src:url('/assets/fonts/kibur/medium-italic-range-3.woff2') format('woff2');
    unicode-range: u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff;
}

@font-face {
    font-family: Kibur;
    font-style: italic;
    font-weight: 500;
    src:url('/assets/fonts/kibur/medium-italic-range-4.woff2') format('woff2');
    unicode-range: u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd;
}

@font-face {
    font-family: Kibur;
    font-style: italic;
    font-weight: 700;
    src:url('/assets/fonts/kibur/bold-italic-range-1.woff2') format('woff2');
    unicode-range: u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116;
}

@font-face {
    font-family: Kibur;
    font-style: italic;
    font-weight: 700;
    src:url('/assets/fonts/kibur/bold-italic-range-2.woff2') format('woff2');
    unicode-range: u+0590-05ff,u+20aa,u+25cc,u+fb1d-fb4f;
}

@font-face {
    font-family: Kibur;
    font-style: italic;
    font-weight: 700;
    src:url('/assets/fonts/kibur/bold-italic-range-3.woff2') format('woff2');
    unicode-range: u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff;
}

@font-face {
    font-family: Kibur;
    font-style: italic;
    font-weight: 700;
    src:url('/assets/fonts/kibur/bold-italic-range-4.woff2') format('woff2');
    unicode-range: u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd;
}

@font-face {
    font-family: Kibur;
    font-style: normal;
    font-weight: 400;
    src:url('/assets/fonts/kibur/regular-range-1.woff2') format('woff2');
    unicode-range: u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116;
}

@font-face {
    font-family: Kibur;
    font-style: normal;
    font-weight: 400;
    src:url('/assets/fonts/kibur/regular-range-2.woff2') format('woff2');
    unicode-range: u+0590-05ff,u+20aa,u+25cc,u+fb1d-fb4f;
}

@font-face {
    font-family: Kibur;
    font-style: normal;
    font-weight: 400;
    src:url('/assets/fonts/kibur/regular-range-3.woff2') format('woff2');
    unicode-range: u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff;
}

@font-face {
    font-family: Kibur;
    font-style: normal;
    font-weight: 400;
    src:url('/assets/fonts/kibur/regular-range-4.woff2') format('woff2');
    unicode-range: u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd;
}

@font-face {
    font-family: Kibur;
    font-style: normal;
    font-weight: 500;
    src:url('/assets/fonts/kibur/medium-range-1.woff2') format('woff2');
    unicode-range: u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116;
}

@font-face {
    font-family: Kibur;
    font-style: normal;
    font-weight: 500;
    src:url('/assets/fonts/kibur/medium-range-2.woff2') format('woff2');
    unicode-range: u+0590-05ff,u+20aa,u+25cc,u+fb1d-fb4f;
}

@font-face {
    font-family: Kibur;
    font-style: normal;
    font-weight: 500;
    src:url('/assets/fonts/kibur/medium-range-3.woff2') format('woff2');
    unicode-range: u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff;
}

@font-face {
    font-family: Kibur;
    font-style: normal;
    font-weight: 500;
    src:url('/assets/fonts/kibur/medium-range-4.woff2') format('woff2');
    unicode-range: u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd;
}

@font-face {
    font-family: Kibur;
    font-style: normal;
    font-weight: 700;
    src:url('/assets/fonts/kibur/bold-range-1.woff2') format('woff2');
    unicode-range: u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116;
}

@font-face {
    font-family: Kibur;
    font-style: normal;
    font-weight: 700;
    src:url('/assets/fonts/kibur/bold-range-2.woff2') format('woff2');
    unicode-range: u+0590-05ff,u+20aa,u+25cc,u+fb1d-fb4f;
}

@font-face {
    font-family: Kibur;
    font-style: normal;
    font-weight: 700;
    src:url('/assets/fonts/kibur/bold-range-3.woff2') format('woff2');
    unicode-range: u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff;
}

@font-face {
    font-family: Kibur;
    font-style: normal;
    font-weight: 700;
    src:url('/assets/fonts/kibur/bold-range-4.woff2') format('woff2');
    unicode-range: u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CUSTOM SCROLLBAR ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.git-wiki-page-list,
.ss-content {
    /* Hide default scrollbar */
    -ms-overflow-style: none; /* for Edge */
    scrollbar-width: none; /* for Firefox */
    overflow: visible; /* required if wanting to keep absolutely positioned scrollbar outside container */
    position: relative; /* to make absolutely positioned scrollbar attach to it */
}

/* Hide default scrollbar - For Chromium */
.git-wiki-page-list::-webkit-scrollbar,
.ss-content::-webkit-scrollbar {
    display: none;
}

.ss-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    float: left;
    position: relative;
    z-index: 1;
}

.ss-content {
    height: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: scroll;
    padding: 0;
}

.ss-content.rtl {
    width: 100%;
    right: auto;
}

.ss-scroll {
    background: var(--color-buttons);
    width: 9px;
    opacity: 0;
    border-radius: var(--radius-full);
    position: absolute;
    top: 0;
    right: calc(-1 * var(--spacing-intermediate));
    z-index: 2;
    transition: opacity 250ms var(--timing-bezier-1), background 250ms linear;
}

.ss-hidden {
    display: none;
}

/* Only display scrollbar at all times when a section is present and expanded */
.ss-container.has-section .ss-scroll:not([style^="height: 100%"]),
.ss-container:hover .ss-scroll:not([style^="height: 100%"]),
.ss-container:active .ss-scroll:not([style^="height: 100%"]) {
    opacity: 1;
}

.ss-scroll.ss-grabbed {
    background: var(--color-buttons-hover);
}

body.ss-grabbed {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}