/* uiconfig site theme for TypeDoc: written by website/scripts/docs-finish.mjs */

@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Design tokens of the uiconfig site: colors (light and dark), type, shape and the figure palette, as CSS custom
 * properties. Shared by every page in the site style: import this file and fonts.css, set data-scheme="light" or
 * "dark" on <html> (index.html does it before the first paint, from prefers-color-scheme), and use the variables.
 * The design panel (?design=1) changes them at runtime.
 */

:root {
    --paper: #edeff2;
    --paper-sunk: #e2e5ea;
    --surface: #f8f9fa;
    --ink: #15171c;
    --ink-2: #4f5661;
    --ink-3: #5e6570;
    --rule: #c8cdd5;
    --shadow: rgba(21, 23, 28, 0.12);
    --accent-base: #3346d3;
    --accent: var(--accent-base);
    --accent-ink: #ffffff;
    --signal: #f2c14e;
    --signal-wash: rgba(242, 193, 78, 0.35);
    --line-active: color-mix(in srgb, var(--accent) 6%, transparent);
    --selection: color-mix(in srgb, var(--accent) 18%, transparent);

    --tk-comment: #5e6570;
    --tk-string: #17683f;
    --tk-number: #963c09;
    --tk-keyword: var(--accent);
    --tk-property: #8a2f8f;
    --tk-call: #0f6a85;
    --tk-type: #835000;
    --tk-decorator: #963c09;
    --tk-def: var(--ink);
    --tk-punct: #555c68;

    /* figure palette: one color for each part of the story */
    --c-data: #e9a315;
    --c-config: var(--accent);
    --c-tweakpane: #0e9a91;
    --c-blueprint: #c43f7f;
    --c-paper: #f4f5f7;
    --c-base: #ccd2db;
    --c-base-dark: #a9b2bf;

    /* type: 15px/1.5 Inter for text, the same face for headings, JetBrains Mono for code */
    --font-text: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: var(--font-text);
    --font-code: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --text-size: 15px;
    --line-height: 1.5;
    --heading-weight: 700;
    --code-size: 0.84rem;

    /* shape */
    --radius: 10px;
    --radius-small: calc(var(--radius) * 0.6);
    --wrap: 1180px;
    --gutter: clamp(20px, 4vw, 48px);

    color-scheme: light;
}

:root[data-scheme='dark'] {
    --paper: #181b21;
    --paper-sunk: #121419;
    --surface: #21252d;
    --ink: #e7e9ed;
    --ink-2: #a3aab6;
    --ink-3: #8f96a2;
    --rule: #353b46;
    --shadow: rgba(0, 0, 0, 0.4);
    --accent: color-mix(in oklab, var(--accent-base) 58%, white);
    --accent-ink: #10132a;
    --signal: #f2c14e;
    --signal-wash: rgba(242, 193, 78, 0.22);
    --selection: color-mix(in srgb, var(--accent) 25%, transparent);

    --tk-comment: #959ca8;
    --tk-string: #7fd1a0;
    --tk-number: #f5a26b;
    --tk-property: #e19be6;
    --tk-call: #72cde6;
    --tk-type: #f2c14e;
    --tk-decorator: #f5a26b;
    --tk-punct: #a3aab6;

    --c-data: #f2c14e;
    --c-tweakpane: #31c3b7;
    --c-blueprint: #e66ba8;
    --c-paper: #c3c9d3;
    --c-base: #444b58;
    --c-base-dark: #343a45;

    color-scheme: dark;
}


/*
 * The API docs (TypeDoc) in the site style. scripts/docs-theme.mjs writes dist-docs/assets/custom.css from the font
 * faces of fonts.css, tokens.css and this file. docs.js sets data-scheme on <html> from TypeDoc's theme setting, so
 * the tokens give the light or dark colors. TypeDoc's own styles are in the layer `typedoc`: these rules, outside any
 * layer, win over them.
 */

:root {
    --color-background: var(--paper);
    --color-background-secondary: var(--surface);
    --color-background-active: var(--paper-sunk);
    --color-background-warning: var(--signal-wash);
    --color-warning-text: var(--ink);
    --color-accent: color-mix(in srgb, var(--rule) 80%, transparent);
    --color-active-menu-item: color-mix(in srgb, var(--accent) 12%, var(--paper));
    --color-text: var(--ink);
    --color-contrast-text: var(--ink);
    --color-text-aside: var(--ink-2);
    --color-link: var(--accent);
    --color-focus-outline: var(--accent);
    --color-icon-background: var(--paper);
    --color-ts-keyword: var(--tk-keyword);
    --dim-toolbar-contents-height: 3.5rem;
}

/* TypeDoc's kind colors are made for its lighter background: on the site's paper, a little darker keeps their contrast
   at 4.5:1 or more */
:root[data-scheme='light'] {
    --color-ts-accessor: color-mix(in srgb, var(--light-color-ts-accessor) 82%, black);
    --color-ts-call-signature: color-mix(in srgb, var(--light-color-ts-call-signature) 82%, black);
    --color-ts-class: color-mix(in srgb, var(--light-color-ts-class) 82%, black);
    --color-ts-constructor: color-mix(in srgb, var(--light-color-ts-constructor) 82%, black);
    --color-ts-constructor-signature: color-mix(in srgb, var(--light-color-ts-constructor-signature) 82%, black);
    --color-ts-enum: color-mix(in srgb, var(--light-color-ts-enum) 82%, black);
    --color-ts-enum-member: color-mix(in srgb, var(--light-color-ts-enum-member) 82%, black);
    --color-ts-function: color-mix(in srgb, var(--light-color-ts-function) 82%, black);
    --color-ts-get-signature: color-mix(in srgb, var(--light-color-ts-get-signature) 82%, black);
    --color-ts-index-signature: color-mix(in srgb, var(--light-color-ts-index-signature) 82%, black);
    --color-ts-interface: color-mix(in srgb, var(--light-color-ts-interface) 82%, black);
    --color-ts-method: color-mix(in srgb, var(--light-color-ts-method) 82%, black);
    --color-ts-module: color-mix(in srgb, var(--light-color-ts-module) 82%, black);
    --color-ts-namespace: color-mix(in srgb, var(--light-color-ts-namespace) 82%, black);
    --color-ts-parameter: color-mix(in srgb, var(--light-color-ts-parameter) 82%, black);
    --color-ts-project: color-mix(in srgb, var(--light-color-ts-project) 82%, black);
    --color-ts-property: color-mix(in srgb, var(--light-color-ts-property) 82%, black);
    --color-ts-reference: color-mix(in srgb, var(--light-color-ts-reference) 82%, black);
    --color-ts-set-signature: color-mix(in srgb, var(--light-color-ts-set-signature) 82%, black);
    --color-ts-type-alias: color-mix(in srgb, var(--light-color-ts-type-alias) 82%, black);
    --color-ts-type-parameter: color-mix(in srgb, var(--light-color-ts-type-parameter) 82%, black);
    --color-ts-variable: color-mix(in srgb, var(--light-color-ts-variable) 82%, black);
}

body {
    font-family: var(--font-text);
    font-size: var(--text-size);
    line-height: var(--line-height);
    text-rendering: optimizeLegibility;
}

code, pre, .tsd-signature {
    font-family: var(--font-code);
    font-variant-ligatures: none;
    font-feature-settings: 'liga' 0, 'calt' 0;
}

code, .tsd-signature {
    font-size: 0.86em;
}

pre {
    border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
    border-radius: var(--radius);
    background: var(--surface);
}

h1, h2, h3, h4, .tsd-page-title h1 {
    font-family: var(--font-heading);
    letter-spacing: -0.015em;
}

.tsd-page-title h1 {
    font-weight: var(--heading-weight);
    letter-spacing: -0.02em;
}

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

/* ---------- top bar: as on the landing page ---------- */

.tsd-page-toolbar {
    background: var(--paper);
    border-bottom-color: color-mix(in srgb, var(--rule) 60%, transparent);
}

.tsd-toolbar-contents {
    gap: 12px;
}

.tsd-toolbar-contents > .title {
    margin-right: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
}

.tsd-page-toolbar .brand-dot {
    color: var(--accent);
}

.tsd-page-toolbar .docs-label {
    margin-left: 6px;
    color: var(--ink-3);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0;
}

#tsd-toolbar-links {
    margin-left: auto;
    gap: clamp(12px, 2.4vw, 28px);
    font-size: 0.94rem;
}

.tsd-page-toolbar #tsd-toolbar-links a {
    color: var(--ink-2);
    text-decoration: none;
}

.tsd-page-toolbar #tsd-toolbar-links a:hover {
    color: var(--ink);
}

/* the package switcher (docs.js) */
.pkg-switch {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-small);
    background: var(--paper-sunk);
    border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
    font-size: 0.82rem;
}

.tsd-page-toolbar .pkg-switch a {
    padding: 3px 10px;
    border-radius: var(--radius-small);
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
}

.tsd-page-toolbar .pkg-switch a:hover {
    color: var(--ink);
}

.tsd-page-toolbar .pkg-switch a[aria-current='true'] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.pkg-switch a .key::before {
    content: '';
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin-right: 0.4em;
    border-radius: 2px;
    background: var(--h);
}

/* ---------- content ---------- */

.tsd-panel, .tsd-accordion-summary, .tsd-navigation, .tsd-page-navigation {
    font-size: 0.94rem;
}

.tsd-signature {
    border-radius: var(--radius-small);
}

.tsd-typography table {
    border-collapse: collapse;
}

#tsd-search {
    border-radius: var(--radius);
}

@media (max-width: 769px) {
    .pkg-switch .pkg-long {
        display: none;
    }

    /* TypeDoc hides the links at this width: search and menu go to the right */
    #tsd-search-trigger {
        margin-left: auto;
    }
}

/* on a phone the menu (the button at the right) lists the packages */
@media (max-width: 560px) {
    .pkg-switch {
        display: none;
    }
}