/* ==================== RESET ==================== */

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

* { margin: 0; padding: 0; }

/* ==================== TOKENS ==================== */

:root {
    color-scheme: light;
    background-color: var(--sec);

    /* sRGB fallbacks keep the same palette in browsers without OKLCH. */
    --pri: #14110f;
    --sec: #f2edeb;
    --code-punct: #524c47;
    --code-comment: #465f4b;
    --code-tag: #7c0984;
    --code-attr: #773f05;
    --code-string: #005725;
    --code-doctype: #194f81;
    --text-muted: rgba(20, 17, 15, .72);
    --gutter-number: rgba(20, 17, 15, .36);
    --gutter-bg: #e5e1de;
    --gutter-line: rgba(20, 17, 15, .18);

    --side-padding: clamp(16px, 10.3px + 1.79vw, 24px);
}

:root.dark {
    color-scheme: dark;
    background-color: var(--sec);

    --pri: #f2edeb;
    --sec: #14110f;
    --code-punct: #aba39e;
    --code-comment: #94a396;
    --code-tag: #e995e2;
    --code-attr: #f2b966;
    --code-string: #7cdd93;
    --code-doctype: #74c2ee;
    --text-muted: rgba(242, 237, 235, .5);
    --gutter-number: rgba(242, 237, 235, .25);
    --gutter-bg: #1d1a18;
    --gutter-line: rgba(242, 237, 235, .125);
}

@supports (color: oklch(0 0 0)) {
    :root {
        --pri: oklch(0.180 0.006 56.043);
        --sec: oklch(0.950 0.006 56.371);
        --code-punct: oklch(0.42 0.012 56);
        --code-comment: oklch(0.46 0.045 150);
        --code-tag: oklch(0.42 0.19 325);
        --code-attr: oklch(0.43 0.10 58);
        --code-string: oklch(0.40 0.11 150);
        --code-doctype: oklch(0.42 0.10 250);
    }

    :root.dark {
        --pri: oklch(0.950 0.006 56.371);
        --sec: oklch(0.180 0.006 56.043);
        --code-punct: oklch(0.72 0.012 56);
        --code-comment: oklch(0.70 0.025 150);
        --code-tag: oklch(0.78 0.14 330);
        --code-attr: oklch(0.82 0.12 75);
        --code-string: oklch(0.82 0.14 150);
        --code-doctype: oklch(0.78 0.10 235);
    }
}

@supports (color: oklch(from white l c h)) {
    :root {
        --text-muted: oklch(from var(--pri) l c h / .72);
        --gutter-number: oklch(from var(--pri) l c h / .36);
        --gutter-line: oklch(from var(--pri) l c h / .18);
    }

    :root.dark {
        --text-muted: oklch(from var(--pri) l c h / .5);
        --gutter-number: oklch(from var(--pri) l c h / .25);
        --gutter-line: oklch(from var(--pri) l c h / .125);
    }
}

@supports (color: color-mix(in oklab, black, white)) {
    :root { --gutter-bg: color-mix(in oklab, var(--pri) 5%, var(--sec)); }
}

@supports not (scrollbar-gutter: stable) {
    :root { overflow-y: scroll; }
}

/* ==================== FONTS ==================== */

@font-face { font-family: "Ioskeley Mono"; src: url("../assets/fonts/IoskeleyMono-Regular.woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ioskeley Mono"; src: url("../assets/fonts/IoskeleyMono-Medium.woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Ioskeley Mono"; src: url("../assets/fonts/IoskeleyMono-SemiBold.woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Ioskeley Mono"; src: url("../assets/fonts/IoskeleyMono-Italic.woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Ioskeley Mono"; src: url("../assets/fonts/IoskeleyMono-MediumItalic.woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Ioskeley Mono"; src: url("../assets/fonts/IoskeleyMono-SemiBoldItalic.woff2"); font-weight: 600; font-style: italic; font-display: swap; }
/* ==================== BASICS ==================== */

body {
    font-family: "Ioskeley Mono", ui-monospace, monospace;
    padding: var(--side-padding);

    font-size: .75rem;
    font-weight: 400;

    color: var(--pri);
    background-color: var(--sec);
}

a {
    font-family: inherit;
    font-weight: inherit;
    text-decoration: none;
    color: inherit;
}

button:focus-visible,
a:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }

.theme-toggle {
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    text-indent: 0;
    /* Leave room for this comment's four-space source indentation. */
    max-width: calc(100% - 4ch);
    cursor: pointer;
}

/* ==================== CODE ==================== */

.tok-punct { color: var(--code-punct); }
.tok-comment { color: var(--code-comment); }
.tok-tag { color: var(--code-tag); }
.tok-attr { color: var(--code-attr); }
.tok-string { color: var(--code-string); }
.tok-doctype { color: var(--code-doctype); }

.note [class^="tok-"] { color: inherit; }

/* ==================== GUTTER ==================== */

pre {
    --gutter-x: calc(var(--side-padding) * .5);
    --digits: 2;
    --gutter-w: calc(var(--digits) * 1ch + 2ch);
    --code-inset: calc(var(--gutter-w) + var(--side-padding));

    min-height: 100vh;
    min-height: 100svh;
    margin: calc(var(--side-padding) * -1);
    padding-block: var(--side-padding);

    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow-wrap: anywhere;

    background: linear-gradient(
        to right,
        var(--gutter-bg) calc(var(--gutter-x) + var(--gutter-w)),
        var(--gutter-line) 0 calc(var(--gutter-x) + var(--gutter-w) + 1px),
        transparent 0
    );
}

code { display: block; }

.line {
    display: block;
    padding-inline-start: calc(var(--gutter-x) + var(--code-inset));
    text-indent: calc(var(--code-inset) * -1);
}

.line[hidden] { display: none; }
.line.folded::after { content: " … " attr(data-end); color: var(--code-punct); }

/* Reveal the prepared layout in uneven bursts, without resizing its lines. */
@media (prefers-reduced-motion: no-preference) {
    .code-loading .line {
        animation: code-in var(--type-duration, 160ms) steps(var(--type-steps, 24), end) backwards;
        animation-delay: var(--load-delay, 0ms);
    }

    @keyframes code-in {
        from { clip-path: inset(0 100% 0 0); }
        35%, 50% { clip-path: inset(0 calc(100% - var(--type-mid)) 0 0); }
        to { clip-path: inset(0 calc(100% - var(--type-width)) 0 0); }
    }
}

.line-number,
.line > .fold-toggle {
    display: inline-block;
    width: var(--gutter-w);
    margin-inline-end: var(--side-padding);
    padding: 0 1ch 0 0;

    color: var(--gutter-number);
    text-align: end;
    text-indent: 0;
    user-select: none;
}

.line > .fold-toggle {
    border: 0;
    background: none;
    font: inherit;
    vertical-align: baseline;
    cursor: pointer;
}

.line > .fold-toggle > span { position: relative; display: inline-block; }

.fold-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    transform: translate(-50%, -50%);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--pri);
    opacity: 0;
    pointer-events: none;
}

.fold-toggle[aria-expanded="false"] .fold-icon { transform: translate(-50%, -50%) rotate(-90deg); }

.line > .fold-toggle:focus-visible { color: var(--pri); outline-offset: -2px; }

@media (hover: hover) {
    .line > .fold-toggle:hover { color: var(--pri); }

    .line > .fold-toggle:hover > span { color: transparent; }
    .line > .fold-toggle:hover .fold-icon { opacity: 1; }
    code a:hover { --underline: var(--pri); }
}

/* ==================== SYSTEM ==================== */

code {
    line-height: 1.35;
}

code strong { font-weight: 600; }

/* drawn on the link box, not text-decoration: the dashes would restart in every syntax span */
code a {
    --underline: var(--text-muted);

    background: linear-gradient(to right, var(--underline) 3px, transparent 0) left bottom / 6px 1px repeat-x;
}

code a:focus-visible { --underline: var(--pri); }

.note { color: var(--text-muted); }

@media (forced-colors: active) {
    code a { text-decoration: underline; }
    button:focus-visible,
    a:focus-visible { outline-color: Highlight; }
}