body {
    position: relative;
}

a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.hero-logo {
    max-height: 120px;
}

.section-style-1 {
    background-color: var(--section-1-bg);
    color: var(--section-1-fg);
}

@media (min-width: 1400px) {
  main > .container-xxl, main > .container-xl, main > .container-lg, main > .container-md, main > .container-sm, main > .container {
    max-width: 95% !important;
  }
}

.section-style-2 {
    background-color: var(--section-2-bg);
    color: var(--section-2-fg);
}

.section-style-3 {
    background-color: var(--section-3-bg);
    color: var(--section-3-fg);
}

.odin-menu {
    min-height: 59px;
}

.odin-footer {
    background-color: #343a40 !important;
    color: var(--bs-light);
    min-height: 292px;
}

#TableOfContents ul {
    list-style: none;
    padding: 0;
}

#TableOfContents li:not(:last-child) {
    margin-bottom: 0.25rem;
}

#TableOfContents li > ul {
    padding-left: 1.0rem;
    padding-top: 0.1rem;
    padding-right: 0.1rem;
}

#TableOfContents a {
    font-family: var(--bs-font-sans-serif);
    font-size: 0.75rem;
    font-weight: 400;
    color: inherit;
}

#TableOfContents {
    color: var(--bs-primary);
}

#TableOfContents li {
    transition: color 50ms, border-left 50ms;
    transition-timing-function: linear;
}

#TableOfContents li.active {
    color: var(--bs-secondary);
    font-weight: bold;
    border-left: 2px solid;
    padding: 0px 0px 0px 3px;
}

.odin-below-navbar {
    top: 59px; /* menu bar height */
    z-index: 0;
    max-height: calc(100vh - 59px); /* menu bar height */
    overflow: auto;
}

/* The scroll-to element with sticky header offset hack, which pkg.odin-lang.org's headings still
   rely on (its own style.css overrides it in places); `:where` keeps its specificity as it was */
:where(.odin-docs-layout:not(.odin-site-docs)) .odin-article h1,
:where(.odin-docs-layout:not(.odin-site-docs)) .odin-article h2,
:where(.odin-docs-layout:not(.odin-site-docs)) .odin-article h3,
:where(.odin-docs-layout:not(.odin-site-docs)) .odin-article h4,
:where(.odin-docs-layout:not(.odin-site-docs)) .odin-article h5 {
    margin-top: -59px; /* menu bar height */
    padding-top: calc(59px + 1.5rem); /* menu bar height */
}

/* This site's: what is linked to stops below the menu bar and the section label (js/docs-page.js) */
.odin-site-docs .odin-article [id] {
    scroll-margin-top: calc(59px + 2.75rem); /* menu bar height */
}
.odin-site-docs .odin-article :is(h1, h2, h3, h4, h5) {
    margin-top: 2.5rem;
}
.odin-site-docs .odin-article :is(h1, h2, h3, h4, h5) + :is(h2, h3, h4, h5) {
    margin-top: 2rem;
}

.odin-main {
    min-height: calc(100vh - 59px - 292px); /* menu bar height and footer height */
}

/* Borders for left and right sidebars. Border style and breakpoint width are
copied form Bootstrap. This has the effect of showing borders when the sidebars
are on the sides, and hiding them when they're collapsed into a column.*/
@media only screen and (min-width: 992px) {
    .odin-sidebar-border {
        border-right: 1px solid #dee2e6;
    }
    .odin-toc-border {
        border-left: 1px solid #dee2e6;
    }
}

.showcase-preview {
    display: block;
    max-width: 100%;
    max-height: 300px!important;
    margin: 1em 0;
    text-align: center;
}

@media only screen and (max-width: 991px) {
    .showcase-preview {
        max-width: 100%;
    }
}

.showcase-left, .showcase-right {
    width: 100%;
}
@media only screen and (min-width: 992px) {
    .showcase-left, .showcase-right {
        width: 48%;
    }
    .showcase-left, .showcase-right {
        margin-top: 0.3em;
        margin-bottom: 0.125em;
    }
    .showcase-left {
        float: left;
        margin-right: 1em;
    }
    .showcase-right {
        float: right;
        margin-left: 1em;
    }

    .dark-mode-appearance {
        display: none;
    }
}

/* remove navbar and table of contents when smaller than lg */
@media only screen and (max-width: 991px) {
    .odin-main > nav {
        display: none;
    }

    #TableOfContents {
        display: none
    }


    .dark-mode-appearance {
        display: inline;
    }
}

code.hljs {
    border-radius: 0.5em;
}

/*
prevents tables to grow beyond it's parent width
https://stackoverflow.com/a/25296722/15597880
*/
.table {
    display: block;
    overflow-x: auto;
}
.table td {
    width: 1%;
}

a {
    word-wrap: break-word;
}

:root {
    --dark-border: #242f3f;
    --dark-background: #0d1117;
    --dark-blue: HSL(211, 63%, 32%);
    --dark-third: #1c1c20;
    --dark-orange: HSL(28, 86%, 42%);
    --dark-orange-border: HSL(28, 30%, 70%);
    --pale-orange: #fa4;
    --dark-code: #182028;

    /* Section palette — light defaults; dark mode swaps these under body.dark-mode. */
    --section-1-bg: #3882d2;
    --section-1-fg: var(--bs-light);
    --section-2-bg: #f8f9fa;
    --section-2-fg: var(--bs-dark);
    --section-3-bg: #ffffff;
    --section-3-fg: var(--bs-dark);
}

:root .dark-mode {
    --bs-light: #e0f0ff;
    --bs-primary: #7aade5;
    --bs-secondary: var(--pale-orange);
}

@media only screen and (min-width: 992px)  {
    .dark-mode .odin-sidebar-border {
        border-right-color: var(--dark-border);
    }
    .dark-mode .odin-toc-border {
        border-left-color: var(--dark-border);
    }
}

.dark-mode .nav-link:hover {
  color: var(--pale-orange) !important;
}

body.dark-mode {
    background-color: var(--dark-background);
    color: var(--bs-light);

    /* Same section tokens, dark values — no per-section overrides or !important needed. */
    --section-1-bg: var(--dark-blue);
    --section-1-fg: var(--bs-light);
    --section-2-bg: var(--dark-background);
    --section-2-fg: var(--bs-light);
    --section-3-bg: var(--dark-third);
    --section-3-fg: var(--bs-light);
}

.dark-mode .bg-primary {
    background-color: var(--dark-blue)!important;
}

.dark-mode .bg-secondary {
    background-color: var(--dark-orange) !important;
}
.dark-mode .btn-secondary {
    background-color: var(--dark-orange) !important;
    border-color: var(--dark-orange-border) !important;
}

.dark-mode .form-select {
    background-color: var(--dark-code) !important;
    color: var(--bs-light) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .odin-footer {
    background-color: var(--dark-border)!important;
}

.dark-mode .table {
    color: var(--bs-light) !important;
    border-color: var(--bs-light) !important;
    background-color: var(--dark-background) !important;
}

.dark-mode .table td {
    color: var(--bs-light) !important;
}

.dark-mode .nav-pills .nav-link.active,
.dark-mode .nav-pills .show>.nav-link {
    background-color: var(--dark-blue);
}


.dark-mode code:not(pre *) {
    color: var(--pale-orange);
}

.dark-mode code.hljs {
    background-color: var(--dark-code) !important;
}

.dark-mode  #TableOfContents li.active {
    color: var(--bs-secondary);
}

.btn-dark-mode  {
    cursor: pointer;
}
.btn-dark-mode svg {
    position: relative;
    top: -3px;
    margin-left: 0.5em;
    margin-right: 0.5em;
    padding: 0;
    margin-top: 0;
}

@media only screen and (min-width: 992px) {
    .btn-dark-mode {
        left: -8px;
    }
}
@media only screen and (max-width: 991px) {
    .btn-dark-mode svg {
        left: 0px;
    }
}


.btn-dark-mode svg {
    fill: var(--bs-light);
    width:  1em;
    padding: 0;
    border: 0;
}

#dark-mode-icon {
    display: inline-block;
}
.dark-mode #dark-mode-icon {
    display: none;
}

#light-mode-icon {
    display: none;
}
.dark-mode #light-mode-icon {
    display: inline-block;
}

.dark-mode .dark-mode-fill-white {
    fill: white;
}

.dark-mode .img-dark-mode-invert {
    filter: invert(100%);
}


.jangafx-color {
    color: #1b46a4;
}


.dark-mode .dark-mode-fill-white {
    fill: white;
}

.dark-mode .img-dark-mode-invert {
    filter: invert(100%);
}

/* the "themed-img" shortcode's two versions of an image; !important as they may set their own display */
.dark-mode .img-theme-light,
body:not(.dark-mode) .img-theme-dark {
    display: none !important;
}

/* Auto Numbering */
body {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}

article[autonumbering] h2:before {counter-increment: h2; content: counter(h2) ". "}
article[autonumbering] h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". "}
article[autonumbering] h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "}

article[autonumbering] .toc__menu ul { counter-reset: item }
article[autonumbering] .toc__menu li a:before { content: counters(item, ".") ". "; counter-increment: item }

/* Documentation pages

Shared by the documentation pages of this site and by pkg.odin-lang.org, which loads this file, so
both have the same sidebars, contents, and code blocks. Their markup is:

    <div class="row odin-main odin-docs-layout">
        <nav class="odin-sidebar ...">           a toggle, then <div class="odin-sidebar-content">
        <article class="documentation ...">
        <div class="odin-toc-border ..."><div>   a toggle, then <nav id="TableOfContents">

and js/docs.js collapses the sidebars and adds the code blocks' copy buttons. */

:root {
    --odin-sidebar-width: clamp(11rem, 13vw, 14rem);
    --odin-toc-width:     clamp(11rem, 15vw, 16rem);
    --odin-rail-width:    2.5rem;
    --odin-sidebar-link:  #3882d2;
    --odin-sidebar-muted: #6c757d;
    --odin-sidebar-hover: rgba(127, 127, 127, 0.12);
    --odin-sidebar-thumb: rgba(127, 127, 127, 0.3);
    --odin-card-border:   #dee2e6;
    --odin-rule:          #e9ecef;

    --odin-code-bg:       #f8f8f8;
    --odin-code-border:    #c6c8ca;
    --odin-code-text:      #202224;
    --odin-code-keyword:   #ff5252;
    --odin-code-string:    #093;
    --odin-code-number:    #0b7285;
    --odin-code-comment:   #888;
    --odin-code-directive: #05a;
    --odin-code-procedure: #047919;
}
.dark-mode {
    --odin-sidebar-link:  #7aade5;
    --odin-sidebar-muted: #8b98a9;
    --odin-card-border:   var(--dark-border);
    --odin-rule:          #1c2430;

    --odin-code-bg:        var(--dark-code);
    --odin-code-border:    var(--dark-border);
    --odin-code-text:      var(--bs-light);
    --odin-code-string:    #0a5;
    --odin-code-number:    #79c0ff;
    --odin-code-directive: #58a6ff;
    --odin-code-procedure: #42b557;
}

/* sidebars */

.odin-sidebar, #TableOfContents {
    font-size: 0.8125rem;
}

.odin-sidebar {
    overflow-x: hidden;
}

.odin-sidebar > div {
    overflow-x: auto;
}

.dark-mode .odin-sidebar, .dark-mode .odin-toc-border {
    color-scheme: dark;
}

.odin-sidebar-content:hover, #TableOfContents:hover {
    --odin-sidebar-thumb: rgba(127, 127, 127, 0.6);
}
/* the standard properties make Chrome on Windows draw arrow buttons, so only Firefox gets them */
@supports not selector(::-webkit-scrollbar) {
    .odin-sidebar-content, #TableOfContents, #TableOfContents > ul {
        scrollbar-width: thin;
        scrollbar-color: var(--odin-sidebar-thumb) transparent;
    }
}
.odin-sidebar-content::-webkit-scrollbar, #TableOfContents::-webkit-scrollbar, #TableOfContents > ul::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.odin-sidebar-content::-webkit-scrollbar-track, #TableOfContents::-webkit-scrollbar-track, #TableOfContents > ul::-webkit-scrollbar-track {
    background: transparent;
}
.odin-sidebar-content::-webkit-scrollbar-thumb, #TableOfContents::-webkit-scrollbar-thumb, #TableOfContents > ul::-webkit-scrollbar-thumb {
    background-color: var(--odin-sidebar-thumb);
    border-radius: 3px;
}

.odin-sidebar-current {
    margin-bottom: 1rem;
    color: var(--odin-sidebar-muted);
}
.odin-sidebar-current a {
    color: var(--odin-sidebar-link);
}

h4.odin-sidebar-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.odin-sidebar-title a {
    color: inherit;
}

.odin-sidebar ul {
    list-style-type: none;
    padding: 0;
}

.odin-sidebar li > a, .odin-sidebar .odin-sidebar-label,
#TableOfContents a {
    display: block;
    padding: 0.0625rem 0.5rem;
    border-radius: 0.25rem;
    color: var(--odin-sidebar-link);
    font-size: inherit;
}
.odin-sidebar li > a:hover, #TableOfContents a:hover {
    background-color: var(--odin-sidebar-hover);
}

.odin-sidebar li:not(:last-child) {
    margin-bottom: 0.125rem;
}

.odin-sidebar .odin-sidebar-group > a, .odin-sidebar .odin-sidebar-group > .odin-sidebar-label {
    font-weight: 600;
}
.odin-sidebar .odin-sidebar-label {
    color: var(--odin-sidebar-muted);
}

.odin-sidebar li > ul {
    margin: 0.125rem 0 0.375rem 0.75rem;
    padding-left: 0.25rem;
    border-left: 1px solid var(--odin-sidebar-hover);
}

.odin-sidebar a.active {
    font-weight: 600;
    color: var(--bs-secondary);
    background-color: rgba(var(--bs-secondary-rgb), 0.12);
}

#TableOfContents {
    overflow-x: hidden;
}

#TableOfContents > ul {
    overflow-x: auto;
}

#TableOfContents > ul > li:not(:first-child) {
    margin-top: 0.75rem;
}
#TableOfContents > ul > li > a {
    color: var(--odin-sidebar-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#TableOfContents li > ul {
    padding-left: 0.75rem;
}

/* code in headings keeps its case, but takes the colour of its entry */
#TableOfContents code {
    color: inherit;
    font-size: inherit;
    text-transform: none;
    letter-spacing: normal;
}

/* wrapped names hang under their first line */
.odin-sidebar li > a, #TableOfContents li li > a {
    padding-left: 1.25rem;
    text-indent: -0.75rem;
}

/* only the current entry is highlighted, the bar still spans its children */
#TableOfContents li.active, .dark-mode #TableOfContents li.active {
    color: inherit;
    font-weight: inherit;
    border-left: none;
    padding: 0;
    /* an inset box-shadow leaves hairlines on its other edges at fractional display scales */
    background: linear-gradient(var(--bs-secondary), var(--bs-secondary)) no-repeat left / 2px 100%;
}
/* paint-only: making it bold changes its width, which relays out every entry (~9000 on core:sys/windows) as you scroll */
#TableOfContents li.active > a {
    color: var(--bs-secondary);
    background-color: rgba(var(--bs-secondary-rgb), 0.12);
}

.odin-sidebar-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
    border: none;
    border-radius: 0.25rem;
    background: none;
    color: var(--odin-sidebar-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
}
.odin-sidebar-toggle:hover {
    background-color: var(--odin-sidebar-hover);
    color: inherit;
}
.odin-sidebar-toggle svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.odin-sidebar-toggle span {
    display: none;
}

@media only screen and (min-width: 992px) {
    .odin-docs-layout > .odin-sidebar {
        display: flex;
        flex-direction: column;
        flex: 0 0 var(--odin-sidebar-width);
        width: var(--odin-sidebar-width);
        overflow: hidden;
    }
    .odin-docs-layout > .odin-toc-border {
        flex: 0 0 var(--odin-toc-width);
        width: var(--odin-toc-width);
    }
    .odin-docs-layout > article {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    /* the toggles stay put while the lists scroll beneath them */
    .odin-docs-layout > .odin-toc-border > .odin-below-navbar {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .odin-sidebar-content, .odin-docs-layout #TableOfContents {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .odin-sidebar-toggle {
        display: flex;
        flex: none;
        margin-bottom: 0.5rem;
    }
    .odin-sidebar > .odin-sidebar-toggle {
        align-self: flex-end;
        margin-top: 1rem;
    }
    .odin-toc-border .odin-sidebar-toggle {
        align-self: flex-start;
    }
    .odin-toc-border .odin-sidebar-toggle svg {
        transform: scaleX(-1);
    }

    /* collapsed sidebars shrink to a rail holding only their toggle */
    .nav-sidebar-collapsed .odin-docs-layout > .odin-sidebar,
    .toc-sidebar-collapsed .odin-docs-layout > .odin-toc-border {
        flex-basis: var(--odin-rail-width);
        width: var(--odin-rail-width);
        padding-left: 0;
        padding-right: 0;
    }
    .nav-sidebar-collapsed .odin-sidebar > .odin-sidebar-content,
    .toc-sidebar-collapsed #TableOfContents {
        display: none;
    }
    .nav-sidebar-collapsed .odin-sidebar > .odin-sidebar-toggle,
    .toc-sidebar-collapsed .odin-toc-border .odin-sidebar-toggle {
        align-self: center;
        flex-direction: column;
        padding: 0.5rem 0.25rem;
    }
    .nav-sidebar-collapsed .odin-sidebar > .odin-sidebar-toggle span,
    .toc-sidebar-collapsed .odin-toc-border .odin-sidebar-toggle span {
        display: block;
        writing-mode: vertical-rl;
    }
    .nav-sidebar-collapsed .odin-sidebar > .odin-sidebar-toggle svg {
        transform: scaleX(-1);
    }
    .toc-sidebar-collapsed .odin-toc-border .odin-sidebar-toggle svg {
        transform: none;
    }
}

/* code blocks, which share the box and colours of pkg.odin-lang.org's signatures, rather than
   highlight.js's github-dark theme in both light and dark mode */

.documentation pre {
    position: relative;
}
.documentation pre:has(> code) {
    padding: 0.625rem;
    border: 1px solid var(--odin-code-border);
    border-radius: 0.25rem;
    background-color: var(--odin-code-bg);
    tab-size: 8;
}
.documentation pre > code.hljs {
    padding: 0;
    background: none;
    color: var(--odin-code-text);
}
.documentation .hljs-keyword, .documentation .hljs-literal, .documentation .hljs-type {
    color: var(--odin-code-keyword);
}
.documentation .hljs-built_in {
    color: var(--odin-code-keyword);
    font-weight: 600;
}
.documentation .hljs-string {
    color: var(--odin-code-string);
}
.documentation .hljs-number {
    color: var(--odin-code-number);
}
.documentation .hljs-comment {
    color: var(--odin-code-comment);
}
.documentation .hljs-meta {
    color: var(--odin-code-directive);
}
.documentation .hljs-title {
    color: var(--odin-code-procedure);
}
/* other languages' tokens, e.g. in C or assembly examples, so none keep github-dark's colours */
.documentation pre :is(.hljs-symbol, .hljs-attr, .hljs-attribute, .hljs-variable, .hljs-params, .hljs-property, .hljs-subst, .hljs-operator, .hljs-punctuation) {
    color: inherit;
}

.documentation pre .copy-code {
    position:      absolute;
    top:           0.4rem;
    right:         0.4rem;
    font:          inherit;
    font-size:     0.75rem;
    line-height:   1;
    padding:       0.3em 0.55em;
    border:        1px solid rgba(127, 127, 127, .35);
    border-radius: 0.4em;
    background:    rgba(127, 127, 127, 0.12);
    color:         inherit;
    cursor:        pointer;
    opacity:       0;
    transition:    opacity 0.12s ease;
}
.documentation pre:hover .copy-code,
.documentation pre .copy-code:focus { opacity: 1; }
.documentation pre .copy-code:hover { background: rgba(127,127,127,.25); }

/* the search box, its results, and the keyboard shortcuts */

.odin-search-wrapper {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
.odin-search-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.odin-search-shortcut {
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    z-index: 1001;
    user-select: none;
    pointer-events: none;
    font-size: 0.75rem;
    background-color: white;
    opacity: 0.5;
}

.os-linux .odin-search-shortcut {
    display: flex;
}

.odin-search-key {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0.25rem;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 0.25rem;
}

.key-macos, .key-windows, .odin-search-or {
    display: none;
}

.os-macos .key-macos,
.os-macos .odin-search-or {
    display: flex;
}

.os-windows .key-windows,
.os-windows .odin-search-or,
.os-linux .key-windows,
.os-linux .odin-search-or {
    display: flex;
}

#odin-search {
    position: relative!important;
    z-index: 1000;
    width: 100%;
    height: 3rem;
    font-size: 1.5rem;
    border: 1px solid #888;
    padding-left:  0.5rem;
    padding-right: 0.5rem;
    border-radius: 0.25rem;
}

.os-ios #odin-search,
.os-android #odin-search {
    padding-right: 0.5rem !important;
}

.os-macos #odin-search {
    padding-right: 6rem;
}

.os-windows #odin-search,
.os-linux #odin-search {
    padding-right: 6.5rem;
}

.dark-mode #odin-search {
    background-color: var(--dark-background) !important;
    border-color: var(--dark-border) !important;
    color: var(--bs-light) !important;
}

.dark-mode .odin-search-shortcut {
    background-color: var(--dark-border) !important;
    color: var(--bs-light) !important;
}

/* the way to the keyboard shortcuts: a button of its own beside the search box, as tall as it */
.odin-shortcuts-button {
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    padding: 0;
    border: 1px solid #888;
    border-radius: 0.25rem;
    background: none;
    color: var(--odin-sidebar-muted);
    cursor: pointer;
}
.odin-shortcuts-button svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dark-mode .odin-shortcuts-button {
    border-color: var(--dark-border);
    background-color: var(--dark-background);
}
.odin-shortcuts-button:hover, .odin-shortcuts-button:focus-visible {
    border-color: var(--odin-sidebar-link);
    color: var(--odin-sidebar-link);
}
/* no keyboard, no shortcuts */
.os-ios .odin-shortcuts-button,
.os-android .odin-shortcuts-button {
    display: none;
}

.os-ios .odin-search-shortcut,
.os-android .odin-search-shortcut {
    display: none;
}

#odin-search-results {
    padding-left: 0;
}

#odin-search-results li {
    list-style: none;
    padding: 0.5rem 1.0rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
#odin-search-results li + li {
    border-top: 1px solid var(--odin-card-border);
}
#odin-search-results li:hover {
    background-color: var(--odin-sidebar-hover);
}
/* drawn inside the row, so moving the selection moves nothing */
#odin-search-results li.selected {
    background-color: rgba(56, 130, 210, 0.12);
    box-shadow: inset 3px 0 0 var(--odin-sidebar-link);
}
.dark-mode #odin-search-results li.selected {
    background-color: rgba(122, 173, 229, 0.16);
}
.dark-mode #odin-search-results li {
    color: var(--bs-light);
}

/* a result's kind comes first, in a badge, coloured by kind through `--kind-rgb` and `--kind-color` */
#odin-search-results li .kind {
    flex: none;
    width: 4.5rem;
    padding: 0.2rem 0 0.3rem;
    border: 1px solid rgba(var(--kind-rgb), 0.55);
    border-radius: 0.2rem;
    background-color: rgba(var(--kind-rgb), 0.1);
    color: var(--kind-color);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
    cursor: default;
}
#odin-search-results li .kind.deprecated {
    opacity: 0.55;
}

/* ? lists the keyboard shortcuts */
.odin-shortcuts {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.4);
}
.odin-shortcuts[hidden] {
    display: none;
}
.odin-shortcuts-box {
    min-width: min(22rem, 100%);
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--odin-card-border);
    border-radius: 0.5rem;
    background-color: var(--bs-body-bg, #fff);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    outline: none;
}
.dark-mode .odin-shortcuts-box {
    background-color: var(--dark-background);
    color: var(--bs-light);
}
.odin-shortcuts-box h2 {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: 600;
}
.odin-shortcuts-box dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.625rem 1.5rem;
    margin: 0;
    align-items: baseline;
}
.odin-shortcuts-box dt {
    font-weight: 400;
    text-align: right;
}
.odin-shortcuts-box dd {
    margin: 0;
}
.odin-shortcuts-box kbd {
    display: inline-block;
    min-width: 1.75em;
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--odin-card-border);
    border-bottom-width: 2px;
    border-radius: 0.25rem;
    background: none;
    color: inherit;
    font-size: 0.8125rem;
    text-align: center;
}

/* moved by the page's script into whichever heading is hovered or focused */
.copy-link {
    margin-left: 0.5rem;
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--odin-card-border);
    border-radius: 0.25rem;
    background: none;
    color: var(--odin-sidebar-muted);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    vertical-align: middle;
    opacity: 0;
    cursor: pointer;
}
.copy-link:focus, .copy-link.copied {
    opacity: 1;
}
.copy-link:hover {
    border-color: var(--odin-sidebar-link);
    color: inherit;
}

/* Markdown tables, which scroll sideways rather than widen the page. Their class keeps
   js/script.js from making them Bootstrap tables */
.doc-table-scroll {
    max-width: 100%;
    margin-bottom: 1rem;
    overflow-x: auto;
}
.doc-table {
    border-collapse: collapse;
}
.doc-table th, .doc-table td {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--odin-card-border);
    vertical-align: top;
}
.doc-table th {
    background-color: var(--odin-code-bg);
}

/* the section being read, under the navbar; the page's script adds it and keeps it up to date */
.odin-section-label {
    position: sticky;
    top: 59px;
    z-index: 10;
    order: -2147483647;
    height: 0;
}
.odin-section-label > span {
    display: block;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--odin-rule);
    background-color: #fff;
    color: var(--odin-sidebar-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    visibility: hidden;
}
.dark-mode .odin-section-label > span {
    background-color: var(--dark-background);
}
.odin-section-label.visible > span {
    visibility: visible;
}

/* hovering a name shows what it is: a type in pkg.odin-lang.org's signatures, and a name this site's
   documentation links to pkg.odin-lang.org */
.odin-type-preview {
    position: absolute;
    z-index: 1080;
    max-width: min(44rem, calc(100vw - 1rem));
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    pointer-events: none;
}
.odin-type-preview pre.doc-code {
    max-height: 22rem;
    margin: 0;
    overflow: hidden;
}
.odin-type-preview pre.doc-code.cut-off {
    mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent);
}

/* This site's own documentation pages */

/* the search of the page's sections, whose results drop down over the page */
.odin-site-docs #odin-search-results {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 1002;
    max-height: min(60vh, 32rem);
    margin: 0;
    overflow-y: auto;
    border: 1px solid var(--odin-card-border);
    border-radius: 0.25rem;
    background-color: var(--bs-body-bg, #fff);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}
.dark-mode .odin-site-docs #odin-search-results {
    background-color: var(--dark-background);
    color-scheme: dark;
}
.odin-site-docs #odin-search-results li {
    cursor: pointer;
}
.odin-site-docs #odin-search-results li.odin-search-none {
    color: var(--odin-sidebar-muted);
    cursor: default;
}
.odin-search-result {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.odin-search-result a {
    color: inherit;
    text-decoration: none;
}
.odin-search-result b {
    color: var(--odin-sidebar-link);
}
.odin-search-path {
    overflow: hidden;
    color: var(--odin-sidebar-muted);
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kind-section   { --kind-rgb:  56, 130, 210; --kind-color: #2b6cb0; }
.kind-attribute { --kind-rgb: 124,  77, 206; --kind-color: #6741b0; }
.kind-directive { --kind-rgb:  14, 138, 120; --kind-color: #0b7a6a; }
.dark-mode .kind-section   { --kind-color: #7aade5; }
.dark-mode .kind-attribute { --kind-color: #b79cf0; }
.dark-mode .kind-directive { --kind-color: #4fd1b7; }

/* the gap under the search box, whether a heading or a paragraph comes first */
.odin-site-docs header:has(.odin-search-wrapper) + .odin-article > :first-child {
    margin-top: 1.5rem;
}

/* the names a table is about stay whole; on narrow screens the table scrolls instead */
.odin-site-docs .doc-table td:first-child code {
    white-space: nowrap;
}

/* the sections being read, e.g. "Attributes › General attributes"; long ones are cut short */
.odin-site-docs .odin-section-label > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.odin-section-label code {
    color: inherit;
    letter-spacing: normal;
    text-transform: none;
}

/* GitHub's alerts, e.g. `> [!NOTE]`, as callouts; layouts/_default/_markup/render-blockquote.html */
.odin-callout {
    margin: 0 0 1rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(var(--callout-rgb), 0.35);
    border-radius: 0.25rem;
    background-color: rgba(var(--callout-rgb), 0.06);
}
.odin-callout > :last-child {
    margin-bottom: 0;
}
.odin-callout-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
    color: var(--callout-color);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.odin-callout-title svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.odin-callout-note      { --callout-rgb:  56, 130, 210; --callout-color: #2b6cb0; }
.odin-callout-tip       { --callout-rgb:  26, 127,  55; --callout-color: #1a7f37; }
.odin-callout-important { --callout-rgb: 124,  77, 206; --callout-color: #6741b0; }
.odin-callout-warning   { --callout-rgb: 191, 135,   0; --callout-color: #9a6700; }
.odin-callout-caution   { --callout-rgb: 209,  36,  47; --callout-color: #c0212b; }
.dark-mode .odin-callout-note      { --callout-color: #7aade5; }
.dark-mode .odin-callout-tip       { --callout-color: #3fb950; }
.dark-mode .odin-callout-important { --callout-color: #b79cf0; }
.dark-mode .odin-callout-warning   { --callout-color: #d29922; }
.dark-mode .odin-callout-caution   { --callout-color: #f85149; }

/* "copy link" shows on the hovered heading */
.odin-article :is(h2, h3, h4, h5):hover .copy-link {
    opacity: 1;
}

/* `l`'s confirmation */
.odin-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 1095;
    max-width: calc(100vw - 2rem);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    background-color: #343a40;
    color: #fff;
    font-size: 0.875rem;
    opacity: 0;
    transform: translate(-50%, 0.5rem);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
.odin-toast.shown {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* the contents, on screens too narrow for the contents sidebar */
.odin-mobile-toc {
    margin-top: 1rem;
    border: 1px solid var(--odin-card-border);
    border-radius: 0.25rem;
    font-size: 0.875rem;
}
.odin-mobile-toc > summary {
    padding: 0.5rem 0.75rem;
    color: var(--odin-sidebar-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
}
.odin-mobile-toc > div {
    max-height: 60vh;
    padding: 0 0.75rem 0.5rem;
    overflow-y: auto;
}
.odin-mobile-toc ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}
.odin-mobile-toc li li {
    padding-left: 0.75rem;
}
.odin-mobile-toc a {
    display: block;
    padding: 0.25rem 0;
    color: var(--odin-sidebar-link);
}
.odin-mobile-toc code {
    color: inherit;
}
@media only screen and (min-width: 992px) {
    .odin-mobile-toc {
        display: none;
    }
}

/* what a name linked to pkg.odin-lang.org is, when hovered, as one of the code blocks */
.odin-type-preview pre:has(> code) {
    max-height: 22rem;
    margin: 0;
    overflow: hidden;
    tab-size: 4;
}
.odin-type-preview pre.cut-off {
    mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent);
}

/* names linked to pkg.odin-lang.org, which in code keep their colour until hovered */
pre a.pkg-link {
    color: inherit;
    text-decoration: none;
}
pre a.pkg-link:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.2em;
}


/* tabs are narrower than in pkg.odin-lang.org's signatures, and plain text blocks take the code colour too */
.odin-site-docs article pre {
    color: var(--odin-code-text);
    tab-size: 4;
}

/* the `#` link after each heading only shows when hovering the heading */
@media (hover: hover) {
    .odin-article .heading-anchor {
        opacity: 0;
        transition: opacity 0.12s ease;
    }
    .odin-article :is(h2, h3, h4, h5, h6):hover .heading-anchor,
    .odin-article .heading-anchor:focus {
        opacity: 1;
    }
}