@import url("meyerweb-reset-2.0.css");
@import url("roboto-mono-v23.css");
@import url("atom-one-light.css") (prefers-color-scheme:light);
@import url("atom-one-dark.css") (prefers-color-scheme:dark);

/* Template Variables */
:root
{
    --color-foreground: #212121;
    --color-foreground-subtle: #9E9E9E;
    --filter-foreground: invert(16%) sepia(0%) saturate(1480%) hue-rotate(146deg) brightness(94%) contrast(104%);
    --icon-size: 1.5rem;
    --item-gap-spacing: 1rem;
    --item-surround-spacing: .5rem;
    --section-gap-spacing: 2rem;
    --section-surround-spacing: 1rem;
    --heading-leading: 2rem;
    --corner-radius: .25rem;

    --color-background: #fff;
    --color-surface: #f8f8f8;
    --color-transparent: rgba(255, 0, 255, 0);
    --color-highlight: rgba(255, 255, 255, 0.75);
    --color-heavy-highlight: rgba(255, 255, 255, 0.95);
    --color-shadow: rgba(0, 0, 0, 0.03);
    --color-heavy-shadow: rgba(0, 0, 0, 0.2);

    --color-primary: #008DA9;
    --filter-primary: invert(42%) sepia(44%) saturate(7311%) hue-rotate(167deg) brightness(93%) contrast(102%);
    --color-positive: #00a600;
    --filter-positive: invert(38%) sepia(100%) saturate(964%) hue-rotate(87deg) brightness(92%) contrast(106%);
    --color-negative: #f92772;
    --filter-negative: invert(33%) sepia(97%) saturate(4947%) hue-rotate(324deg) brightness(101%) contrast(95%);
    --color-caution: #fe9720;
    --filter-caution: invert(69%) sepia(28%) saturate(3785%) hue-rotate(344deg) brightness(103%) contrast(99%);
    --color-idle: #90A4AE;
    --filter-idle: invert(68%) sepia(21%) saturate(234%) hue-rotate(155deg) brightness(90%) contrast(88%);
}
@media (prefers-color-scheme: dark) {
    :root
    {
        --color-primary: #00A6C7;
        --color-foreground: #fff;
        --color-foreground-subtle: #808080;
        --filter-foreground: invert(100%) sepia(5%) saturate(1250%) hue-rotate(85deg) brightness(104%) contrast(109%);

        --color-background: #212121;
        --color-surface: #323232;
        --color-heavy-highlight: rgba(255, 255, 255, 0.1);
        --color-highlight: rgba(255, 255, 255, 0.04);
        --color-shadow: rgba(0, 0, 0, 0.3);
        --color-heavy-shadow: rgba(0, 0, 0, 0.6);
    }
}

/* Basic Structures */
html
{
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: 'Roboto Mono', monospace;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    font-size: 1rem;
    height: 100%;
}
body
{
    box-sizing: border-box;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    line-height: 1rem;
    padding-bottom: 5rem;
}
body > *
{
    width: 100%;
}
body:has(> footer)
{
    padding-bottom: 0;
}
body > footer
{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-top: 5rem;
}
strong
{
    font-weight: 500;
}
em
{
    font-style: italic;
}
h1,
h2,
h3
{
    font-weight: 500;
    margin: var(--heading-leading) 0 var(--section-surround-spacing) 0;
    word-wrap: break-word;
    hyphens: auto;
    line-height: 1;
}
h1
{
    font-size: 2.5rem;
}
header h1
{
    font-weight: 300;
    font-size: 3.5rem;
}
h2
{
    font-size: 2rem;
}
h3
{
    font-size: 1.5rem;
}
sup
{
    font-size: .8rem;
    position: relative;
    top: -.3rem;
}
sub
{
    font-size: .8rem;
    position: relative;
    top: .3rem;
}
section,
article
{
    margin: var(--section-surround-spacing) 0;
}
p
{
    margin: var(--item-surround-spacing) 0;
    line-height: 1.5rem;
}
header p
{
    font-style: italic;
}
caption,
p.caption,
span.caption
{
    font-weight: 300;
    font-size: .8rem;
}
span.glyph
{
    font-size: var(--icon-size);
    padding: var(--item-surround-spacing);
}
a
{
    text-decoration: underline;
    color: var(--color-primary);
}
ul,
ol
{
    margin: var(--item-surround-spacing) 0;
    line-height: 1.5rem;
    margin-left: 2rem;
}
li
{
    margin: var(--item-surround-spacing) 0;
}
ul > li::before
{
    content: " - ";
}
pre
{
    text-align: start;
    width: 100%;
}
hr
{
    display: block;
    height: 1px;
    width: 100%;
    border: 0;
    border-top: 1px dashed var(--color-foreground-subtle);
    margin: 1rem auto;
    padding: 0;
}
pre > code
{
    display: block;
    line-height: 1.25rem;
    margin: var(--item-surround-spacing) 0;
    padding: .5rem 1rem;
}
header
{
    margin: var(--section-surround-spacing) 0;
}
@media(max-width: 840px) {
    h1
    {
        font-size: 4.76vw;
    }
    header h1
    {
        font-size: 6.67vw;
    }
    h2
    {
        font-size: 3.81vw;
    }
    h3
    {
        font-size: 2.86vw;
    }
}
@media(max-width: 600px) {
    h1
    {
        font-size: 1.79rem;
    }
    header h1
    {
        font-size: 2.5rem;
    }
    h2
    {
        font-size: 1.43rem;
    }
    h3
    {
        font-size: 1.07rem;
    }
}
@media print {
    html
    {
        background-color: unset;
        height: fit-content;
    }
    body
    {
        font-size: .8rem;
        padding: 0;
        margin: 0;
        min-height: fit-content;
    }
    header
    {
        margin: 0;
    }
    section
    {
        margin: .25rem 0;
    }
    p
    {
        line-height: 1.25rem;
        margin: .125rem 0;
    }
    h1, h2, h3
    {
        margin: .25rem 0;
    }
    h1
    {
        font-size: 1.5rem;
    }
    header h1
    {
        font-size: 2rem;
    }
    h2
    {
        font-size: 1.25rem;
    }
    h3
    {
        font-size: 1.125rem;
    }
    a
    {
        color: var(--color-foreground);
        text-decoration: none;
    }
    ul,
    ol
    {
        line-height: 1.25rem;
    }
    li
    {
        margin: 0;
    }
}

/* Sectioned Page Style Overrides */
section:has(header > a:target)
{
    border: 1px solid var(--color-primary);
}

/* Page Header Navigation */
header nav ul li
{
    display: inline-block;
    margin: 0 var(--item-surround-spacing);
}
header nav ul li:first-of-type
{
    margin-left: 0;
}
header nav ul li:last-of-type
{
    margin-right: 0;
}
header nav ul
{
    display: block;
    margin: var(--item-surround-spacing) 0;
}
header nav ul li::before
{
    content: none;
}

/* Section navigation */
section nav
{
    margin: var(--section-gap-spacing) 0;
}
section nav ul
{
    margin-left: 0;
}
section nav ul > li::before
{
    content: none;
}
section nav ul > li
{
    display: inline-block;
    margin: 0 var(--item-surround-spacing);
    padding: .25rem .5rem;
}
section nav ul > li:first-of-type
{
    margin-left: 0;
}
section nav ul > li:last-of-type
{
    margin-right: 0;
}


/* Section Navigation list styles. */
@media print {
    section nav
    {
        display: none!important;
    }
    body header nav
    {
        display: none;
    }
}
@media(max-width: 600px) {
    section nav
    {
        width: 100%;
    }
    section nav ul > li
    {
        display: block;
        margin: var(--item-surround-spacing) 0;
    }
    section nav ul > li:first-of-type
    {
        margin-top: 0;
    }
    section nav ul > li:last-of-type
    {
        margin-bottom: 0;
    }
}

/* Layouts */
.fixed-grid
{
    display: grid;
    gap: var(--item-gap-spacing);
}
.fixed-grid > *
{
    display: flex;
}

.item-list,
.unified-list,
.section-list
{
    display: flex;
    flex-direction: column;
}
.item-list.horizontal,
.unified-list.horizontal,
.section-list.horizontal
{
    flex-direction: row;
    flex-wrap: wrap;
}
.unified-list.items-start > *,
.section-list.items-start > *,
.item-list.items-start > *
{
    justify-content: start;
}
.unified-list.items-center > *,
.section-list.items-center > *,
.item-list.items-center > *
{
    justify-content: center;
}
.item-list
{
    gap: var(--item-gap-spacing);
}
.item-list > div > h1,
.item-list > div > h2,
.item-list > div > h3
{
    margin: 0;
}

/* Progress Indicators */
.progress-bar
{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.throbber
{
    display: inline-flex;
    align-items: center;
}

@media print {
    .progress-bar
    {
        display: none;
    }
    .throbber
    {
        display: none;
    }
}

/* Spinner */
.spinner
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.spinner > button
{
    display: inline-flex;
    line-height: 0;
    font-size: .8rem;
    height: 1.25rem;
    width: 1.25rem;
    justify-content: center;
    align-items: center;

    padding: 1rem;
    margin: .25rem .5rem;
    border-radius: 1rem;

}
.spinner-value
{
    padding: .5rem 1rem;
    margin: .25rem .5rem;
    display: inline-block;
    background-color: var(--color-surface);
    border-radius: var(--corner-radius);
    border: 1px solid var(--color-heavy-highlight);
    box-shadow: 0 0 4px var(--color-heavy-shadow);
}
@media print {
    .spinner
    {
        display: none;
    }
}

/* Centered content */
.content-break
{
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
body.content-break
{
    padding-left: var(--section-surround-spacing);
    padding-right: var(--section-surround-spacing);
}
@media print {
    .content-break
    {
        max-width: none;
    }
}

/* Remove bottom padding from last element of a section/article */
section > *:last-child,
article > *:last-child
{
    margin-bottom: 0;
}

/* Remove top padding for first header in section/article */
article *:first-child,
article header:first-child > *:first-child,
section > *:first-child,
section header:first-child > *:first-child
{
    margin-top: 0;
}

/* Override link style for fragment links */
section > a[href^="#"][name]:not([name=""]),
article > a[href^="#"][name]:not([name=""]),
header > a[href^="#"][name]:not([name=""])
{
    color: var(--color-foreground);
    border: none;
}
section > a[href^="#"][name]:not([name=""]):hover,
article > a[href^="#"][name]:not([name=""]):hover,
header > a[href^="#"][name]:not([name=""]):hover
{
    cursor: default;
}
section > a[href^="#"][name]:not([name=""]):focus,
article > a[href^="#"][name]:not([name=""]):focus,
header > a[href^="#"][name]:not([name=""]):focus
{
    outline: none;
}

/* Code Highlighting styles */
.hljs,
code,
code.grouped > span
{
    background-color: var(--color-surface);
    border-radius: var(--corner-radius);
    box-shadow: 0 0 4px var(--color-heavy-shadow);
    box-sizing: border-box;
    border: 1px solid var(--color-heavy-highlight);
}
code,
code.grouped > span
{
    padding: .125rem;
}
code.grouped > span
{
    margin-left: .25rem;
    margin-right: .25rem;
}
code.grouped
{
    background-color: unset;
    border-radius: unset;
    padding: unset;
    box-shadow: unset;
    border: unset;
}
@media(max-width: 840px) {
    code.grouped {
        padding: .5rem 0;
        display: flex;
        flex-wrap: wrap;
    }
    code.grouped > span {
        margin: .125rem;
    }
}
@media print {
    .hljs,
    code,
    code.grouped > span
    {
        background: none;
        border: 1px solid var(--color-foreground-subtle);
        box-shadow: none;
        border-radius: var(--corner-radius);
        padding: 0 .125rem;
    }
    code.grouped,
    code.grouped > span
    {
        border: none;    
    }
}

/** Form Elements */
button:focus,
input:focus
{
    outline: none;
}
input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]),
textarea,
label
{
    width: 100%;
    max-width: 30rem;
    display: block;
}
label > input[type=checkbox],
label > input[type=radio]
{
    margin-bottom: .25rem;
}
label
{
    margin-top: .5rem;
    margin-bottom: .25rem;
    font-size: .75rem;
}
button,
.button,
input,
textarea
{
    border: none;
    border-bottom: 1px solid var(--color-primary);
    padding: .5rem;
    color: var(--color-foreground);
    font-family: 'Roboto Mono', monospace;
    font-weight: 300;
    font-size: 1rem;
    display: inline-block;
    min-height: var(--icon-size);
}
textarea
{
    border: 1px solid var(--color-primary);
    min-height: 10rem;
}
button,
.button,
input[type=submit],
input[type=button]
{
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: default;
    border-radius: var(--corner-radius);
    border: 1px solid var(--color-foreground-subtle);
    background: linear-gradient(to bottom, var(--color-highlight) 0%, var(--color-shadow) 50%, var(--color-highlight) 100%), var(--color-surface);
    background-size: 100% 200%;
    background-position: top;
    transition: background-position .08s ease-out;
}
button:active:not(:disabled),
.button:active:not(:disabled),
input[type=submit]:active:not(:disabled),
input[type=button]:active:not(:disabled)
{
    background-position: bottom;
    transition: background-position .04s ease-in;
}
@media print {
    form,
    button,
    .button,
    input
    {
        display: none;
    }
}
button:disabled,
.button:disabled,
input[type=submit]:disabled,
input[type=button]:disabled
{
    color: var(--color-idle);
    border-width: 0;
    background: var(--color-surface);
}

/* Breadcrumbs */
nav.breadcrumbs
{
    margin: var(--item-surround-spacing) 0;
}
nav.breadcrumbs > ul
{
    list-style: none;
    margin: 0;
}
nav.breadcrumbs > ul > li::before
{
    content: none;
}
nav.breadcrumbs > ul > li
{
    display: inline-block;
    font-style: italic;
    margin: var(--item-surround-spacing) 0;
    padding: 0;
}
nav.breadcrumbs > ul > li+li::before
{
    content: ">";
    margin: 0 var(--item-surround-spacing);
}

/* Error Box */
.error-box
{
    display: inline-block;
    padding: 1rem 2rem;
    background-color: var(--color-surface);
    border-radius: var(--corner-radius);
    border: 1px solid var(--color-negative);
}
@media print {
    .error-box
    {
        display: none;
    }
}

/* Hidden Elements */
.hidden
{
    display: none;
}
@media not (prefers-color-scheme: dark) {
    .only-darkmode
    {
        display: none;
    }
}
@media (prefers-color-scheme: dark) {
    .only-lightmode
    {
        display: none;
    }
}
@media not print {
    .only-print
    {
        display: none;
    }
}

/* Ink Footer */
body.anchored-footer
{
    padding-bottom: 0;
}
footer.ink
{
    display: flex;
}
footer.ink > .signature
{
    background: url("../svg/tentacle-light.svg");
    background-repeat: no-repeat;
    background-size: 5rem;
    min-height: 5rem;
    display: inline-block;
    margin: 0 auto;
    padding-top: 5rem;
    padding-left: 6rem;
    padding-right: 6rem;
    background-position: bottom left;
}
footer.ink > .signature > a
{
    color: var(--color-foreground-subtle);
    letter-spacing: .075rem;
}
body.anchored-footer > footer.ink > .signature
{
    background-position: bottom -.8rem left;
}
@media (prefers-color-scheme: dark) {
    footer.ink > .signature
    {
        background: url("../svg/tentacle-dark.svg");
        background-repeat: no-repeat;
        background-size: 5rem;
    }
}
@media (max-width: 800px) {
    footer.ink > .signature
    {
        padding-left: 2rem;
        padding-right: 2rem;
        background-position: center bottom;
        padding-bottom: 5.1rem;
    }

    body.anchored-footer > footer.ink > .signature
    {
        background-position: center bottom -.8rem;
    }
}
@media print {
    footer.ink > .signature {
        background: none;
    }
}

/* Status Indicator */
.status-indicator
{
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem .25rem .25rem;
    background-color: var(--color-surface);
    border-radius: 1rem;
    border: 1px solid var(--color-heavy-highlight);
    box-shadow: 0 0 4px var(--color-heavy-shadow);
}
.status-indicator-blip
{
    font-size: 3.5rem;
}
.status-indicator-blip.nominal
{
    color: var(--color-foreground);
}
.status-indicator-blip.primary
{
    color: var(--color-primary);
}
.status-indicator-blip.positive
{
    color: var(--color-positive);
}
.status-indicator-blip.negative
{
    color: var(--color-negative);
}
.status-indicator-blip.caution
{
    color: var(--color-caution);
}
.status-indicator-blip.idle
{
    color: var(--color-idle);
}
@media print {
    .status-indicator
    {
        border: 1px solid var(--color-foreground-subtle);
        box-shadow: none;
    }
}

/* Icons */
img.icon
{
    height: var(--icon-size);
}
button img.icon,
.button img.icon
{
    margin: 0;
    margin-right: var(--item-surround-spacing);
}

/* Sentiment Colors */
img.svg-fill.nominal
{
    filter: var(--filter-foreground);
}
img.svg-fill.primary
{
    filter: var(--filter-primary);
}
img.svg-fill.positive
{
    filter: var(--filter-positive);
}
img.svg-fill.negative
{
    filter: var(--filter-negative);
}
img.svg-fill.caution
{
    filter: var(--filter-caution);
}
img.svg-fill.idle
{
    filter: var(--filter-idle);
}

button.nominal,
.button.nominal,
input[type=submit].nominal,
input[type=button].nominal
{
    border-color: var(--color-foreground);
}
button.primary,
.button.primary,
input[type=submit].primary,
input[type=button].primary
{
    border-color: var(--color-primary);
}
button.positive,
.button.positive,
input[type=submit].positive,
input[type=button].positive
{
    border-color: var(--color-positive);
}
button.negative,
.button.negative,
input[type=submit].negative,
input[type=button].negative
{
    border-color: var(--color-negative);
}
button.caution,
.button.caution,
input[type=submit].caution,
input[type=button].caution
{
    border-color: var(--color-caution);
}
button.idle,
.button.idle,
input[type=submit].idle,
input[type=button].idle
{
    border-color: var(--color-idle);
}

span.nominal
{
    color: var(--color-foreground);
}
span.primary
{
    color: var(--color-primary);
}
span.positive
{
    color: var(--color-positive);
}
span.negative
{
    color: var(--color-negative);
}
span.caution
{
    color: var(--color-caution);
}
span.idle
{
    color: var(--color-idle);
}