/* ===========================================================================
 * THEME: the light theme is the default, and the dark theme overrides it
 * when the browser reports a dark color-scheme preference.
 * =========================================================================== */

:root {
    color-scheme: light dark;

    ---font-text: 'Cormorant Garamond', Georgia, serif;
    --font-text: 'EB Garamond', Georgia, serif;
    ---font-text: 'Spectral', Georgia, serif;

    ---font-header: 'Spectral', Georgia, serif;
    ---font-header: 'Vollkorn', Georgia, serif;
    --font-header: 'DM Serif Display', Georgia, serif;

    ---font-code: 'IBM Plex Mono', monospace;
    ---font-code: 'Source Code Pro', monospace;
    ---font-code: 'Cutive Mono', monospace;
    --font-code: 'Anonymous Pro', monospace;

    --font-size-text: 1.2rem;
    --font-size-code: 1rem;
    --font-size-header-scale: 1.0;
    --line-height: 2.0;
    --line-height-code: 1;
    --baseline: 2.2rem;

    /* Lakeside palette */
    --lake-base00: #161b1d;
    --lake-base01: #1f292e;
    --lake-base02: #516d7b;
    --lake-base03: #5a7b8c;
    --lake-base04: #7195a8;
    --lake-base05: #7ea2b4;
    --lake-base06: #c1e4f6;
    --lake-base07: #ebf8ff;
    --lake-red: #d22d72;
    --lake-orange: #935c25;
    --lake-yellow: #8a8a0f;
    --lake-green: #568c3b;
    --lake-cyan: #2d8f6f;
    --lake-blue: #257fad;
    --lake-violet: #6b6bb8;
    --lake-magenta: #b72dd2;

    /* Cave palette (for syntax variety) */
    --cave-base00: #19171c;
    --cave-base01: #26232a;
    --cave-base02: #585260;
    --cave-base03: #655f6d;
    --cave-base04: #7e7887;
    --cave-base05: #8b8792;
    --cave-base06: #e2dfe7;
    --cave-base07: #efecf4;
    --cave-red: #be4678;
    --cave-orange: #aa573c;
    --cave-yellow: #a06e3b;
    --cave-green: #2a9292;
    --cave-cyan: #398bc6;
    --cave-blue: #576ddb;
    --cave-violet: #955ae7;
    --cave-magenta: #bf40bf;
}

/* LIGHT THEME (default) */
:root {
    --bg: color-mix(in srgb, var(--lake-base07), white 90%);
    --fg: var(--lake-base01);
    --accent: var(--lake-blue);
    --code-bg: color-mix(in srgb, var(--lake-base03), white 94%);
    --table-header-bg: var(--lake-base06);
    --link: color-mix(in srgb, var(--lake-violet), black 40%);
    --syn-keyword: var(--lake-violet);
    --syn-binding-modifier: var(--lake-red);
    --syn-item-keyword: var(--lake-blue);
    --syn-control-flow: var(--lake-yellow);
    --syn-type-name: var(--lake-cyan);
    --syn-string: var(--lake-yellow);
    --syn-number: var(--lake-green);
    --syn-boolean: var(--lake-green);
    --syn-variant: var(--lake-orange);
    --syn-comment: var(--lake-base03);
    --syn-function: var(--lake-magenta);
    --syn-brace: var(--lake-orange);
    --syn-op-cmp: var(--lake-red);
    --syn-op-result: var(--lake-orange);
    --syn-op-option: var(--lake-violet);
    --syn-op-clone: var(--lake-cyan);
    --syn-op-arith: var(--lake-blue);
    --syn-type-colon: var(--lake-red);
    --syn-type-hint-slash: var(--lake-cyan);
    --syn-punctuation: var(--lake-base02);

    /* The accents are chosen to read against either background. */
    --accent-1: var(--lake-cyan);
    --accent-2: var(--lake-green);
    --accent-3: var(--lake-violet);
    --accent-4: var(--lake-magenta);
}

/* DARK THEME */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: var(--lake-base00);
        --fg: var(--lake-base06);
        --accent: var(--lake-blue);
        --code-bg: var(--lake-base01);
        --table-header-bg: var(--lake-base01);
        --link: color-mix(in srgb, var(--lake-violet), var(--lake-base07) 30%);
        --syn-keyword: var(--lake-violet);
        --syn-binding-modifier: var(--lake-red);
        --syn-item-keyword: var(--lake-blue);
        --syn-control-flow: var(--lake-yellow);
        --syn-type-name: var(--lake-cyan);
        --syn-string: var(--lake-yellow);
        --syn-number: var(--lake-green);
        --syn-boolean: var(--lake-green);
        --syn-variant: var(--lake-orange);
        --syn-comment: var(--lake-base03);
        --syn-function: var(--lake-magenta);
        --syn-brace: var(--lake-orange);
        --syn-op-cmp: var(--lake-red);
        --syn-op-result: var(--lake-orange);
        --syn-op-option: var(--lake-violet);
        --syn-op-clone: var(--lake-cyan);
        --syn-op-arith: var(--lake-blue);
        --syn-type-colon: var(--lake-red);
        --syn-type-hint-slash: var(--lake-cyan);
        --syn-punctuation: var(--lake-base05);
    }
}

* {
    box-sizing: border-box;
}

body {
  filter: saturate(50%);
}

body {
    font-family: var(--font-text);
    font-size: var(--font-size-text);
    overflow-wrap: break-word;
    font-feature-settings: "onum" 1, "kern" 1;
    background: var(--bg);
    color: var(--fg);
    margin: 0;
    padding: 0;
    line-height: var(--line-height);
    display: flex;
    min-height: 100vh;
}

nav {
    flex-shrink: 0;
    padding: 2rem 0rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

nav a {
    color: var(--accent);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
}

.nav-logo {
    display: inline-block;
    height: 2rem;
    width: 2rem;
    cursor: pointer;
    background-color: var(--accent);
    -webkit-mask-image: url('datalove-logo.svg');
    mask-image: url('datalove-logo.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.nav-links {
    display: none;
    flex-direction: column;
    gap: 0;
    margin-top: 1.5rem;
    width: 100%;
}

nav.expanded .nav-links {
    display: flex;
}

nav.expanded {
    min-width: 220px;
    align-items: flex-start;
}

.nav-links a {
    font-size: 0.95rem;
    font-weight: normal;
    white-space: nowrap;
}

.nav-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin: 0.25rem 0;
}

.nav-links p {
    margin: 0 0 0.25rem 0;
}

.nav-links hr {
    border: none;
    border-top: 1px solid var(--accent);
    opacity: 0.3;
    margin: 0.75rem 0;
}

.nav-toggle {
    margin-top: 1rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--accent);
    border-radius: 3px;
    text-align: center;
}

main {
    flex: 1;
    min-width: 0;
    /* The auto margins center the column, but they also stop it stretching
     * when the body stacks vertically on narrow screens, where it would
     * otherwise grow to fit the widest code block. */
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem 2rem 2rem;
}

h1 {
    text-align: center;
    width: 60%;
    min-width: 200px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

h1, h2, h3, h4 {
    font-family: var(--font-header);
    color: var(--accent);
    margin-top: calc(var(--baseline) * 2);
}

h1 { font-size: calc(2rem * var(--font-size-header-scale)); letter-spacing: -0.02em; }
h2 { font-size: calc(1.5rem * var(--font-size-header-scale)); letter-spacing: -0.01em; }
h3 { font-size: calc(1.25rem * var(--font-size-header-scale)); }

a {
    color: var(--link);
    text-decoration: none;
    text-decoration: underline dotted;
    text-decoration: underline solid;
    text-decoration-color: color-mix(in srgb, var(--accent), #0000 90%);
    text-decoration-thickness: 2px;
}

a:hover {
    text-decoration: underline dotted;
    text-decoration: underline solid;
    text-decoration-color: color-mix(in srgb, var(--accent), #0000 0%);
    text-decoration-thickness: 2px;
}

p {
    margin: var(--baseline) 0;
    hyphens: auto;
}

abbr, .smallcaps {
    font-feature-settings: "smcp" 1;
    letter-spacing: 0.05em;
}

code {
    background: var(--code-bg);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: var(--font-code);
    font-size: var(--font-size-code);
    font-feature-settings: "lnum" 1;
}

pre {
    background: var(--code-bg);
    padding: 1rem;
    padding-left: 2rem;
    border-radius: 0 5px 5px 0;
    border: none;
    border-left: 3px solid var(--accent);
    overflow-x: auto;
    margin: var(--baseline) 0;
    line-height: var(--line-height-code);
    font-feature-settings: "lnum" 1;
}

pre code {
    padding: 0;
    background: none;
}

blockquote {
    border-radius: 0;
    border: none;
    border-left: 3px solid var(--accent);
    padding-left: 1.5rem;
    margin-left: -0.5rem;
    margin-top: var(--baseline);
    margin-bottom: var(--baseline);
}

hr {
    border: none;
    border-top: 2px solid var(--accent);
    height: 0;
    width: 16rem;
    margin: calc(var(--baseline) * 2) auto;
    -webkit-mask-image: linear-gradient(to right, transparent, black 1%, black 99%, transparent);
    mask-image: linear-gradient(to right, transparent, black 1%, black 99%, transparent);
}

ul, ol {
    padding-left: 1rem;
    margin: var(--baseline) 0;
}

li > ul, li > ol {
    margin: 0;
}

li {
    margin: 0 0;
    list-style-position: outside;
}

table {
    border-collapse: collapse;
    margin: var(--baseline) 0;
    font-feature-settings: "lnum" 1;
}

th, td {
    border: none;
    border-bottom: 1px solid var(--accent);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

th {
    background: var(--table-header-bg);
    border-bottom-width: 2px;
}

/* Syntax highlighting */
.token.keyword { color: var(--syn-keyword); }
.token.binding-modifier { color: var(--syn-binding-modifier); }
.token.item-keyword { color: var(--syn-item-keyword); }
.token.control-flow { color: var(--syn-control-flow); }
.token.type-name { color: var(--syn-type-name); }
.token.string { color: var(--syn-string); }
.token.number { color: var(--syn-number); }
.token.boolean { color: var(--syn-boolean); }
.token.variant { color: var(--syn-variant); }
.token.comment { color: var(--syn-comment); font-style: italic; }
.token.function { color: var(--syn-function); }
.token.brace-curly,
.token.brace-paren,
.token.brace-angle,
.token.brace-square,
.token.brace-table,
.token.brace-tensor,
.token.brace-map,
.token.brace-set {
    color: color-mix(in srgb, var(--syn-brace), yellow 10%);
    opacity: 0.8;
}
.token.op-cmp { color: var(--syn-op-cmp); }
.token.op-result { color: var(--syn-op-result); }
.token.op-option { color: var(--syn-op-option); }
.token.op-clone { color: var(--syn-op-clone); }
.token.op-arith { color: var(--syn-op-arith); }
.token.type-colon { color: var(--syn-type-colon); }
.token.type-hint-slash { color: var(--syn-type-hint-slash); }
.token.punctuation { color: var(--syn-punctuation); }
/* Tokens from Prism's own grammars, such as Rust. */
.token.char { color: var(--syn-string); }
.token.class-name { color: var(--syn-type-name); }
.token.macro { color: var(--syn-function); }
.token.attribute { color: var(--syn-variant); }
.token.lifetime-annotation { color: var(--syn-binding-modifier); }
.token.constant { color: var(--syn-number); }
.token.operator { color: var(--syn-op-arith); }

/* Admonition boxes */
.note, .warning, .tip {
    border-left: 4px solid;
    padding: 0.5rem 1rem;
    margin: var(--baseline) 0;
    border-radius: 0 5px 5px 0;
}
.note { border-color: var(--lake-blue); }
.warning { border-color: var(--lake-orange); }
.tip { border-color: var(--lake-green); }

/* Table of contents */
.toc ul {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    column-gap: 2rem;
}

.toc.toc1 ul {
    grid-template-rows: repeat(2, auto);
}
.toc.toc2 ul {
    grid-template-rows: repeat(6, auto);
}
.toc.toc3 ul {
    grid-template-rows: repeat(4, auto);
}
.toc.toc4 ul {
    grid-template-rows: repeat(3, auto);
}

.toc li {
    padding: 0 0;
    padding-left: 1.4rem;
    margin: 0 0;
    position: relative;
    break-inside: avoid;
    line-height: calc(var(--baseline) * 0.75);
    margin-bottom: calc(var(--baseline) * 0.5);
    margin-left: 1.5rem;
    text-indent: -1.5rem;
    text-wrap: balance;
}

@media (max-width: 768px) {
    body {
        flex-direction: column;
    }
    /* A table is as wide as its columns demand, so on a phone it must
     * scroll on its own rather than widen the page. */
    table {
        display: block;
        width: fit-content;
        max-width: 100%;
        overflow-x: auto;
    }
    /* Cells keep their words whole and let the table scroll instead. */
    th, td {
        overflow-wrap: normal;
    }
    nav {
        flex-direction: row;
        flex-wrap: wrap;
        padding-bottom: 0;
    }
    h1 {
        margin-top: calc(var(--baseline) * 1);
        /* At 60% of a phone screen a title wraps every two or three words. */
        width: auto;
    }
    nav.expanded {
        flex-direction: column;
        min-width: 0;
    }
}

@media (max-width: 500px) {
    .toc ul {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}