/* The site's look in one file: colours, fonts, sizes, corners and shadows. Edit a value here and every page
   follows; site.css holds only the rules that read these variables, and should not get values of its own.
   One look per kind of thing, no value twice: a button with words is .btn or .btn-sm in one of site.css's colours, a
   button with only an icon adds .btn-icon (section 4d); the small upper-case labels, the tiles and the rows of tabs
   share one rule each in site.css; a shadow, a line or a fading is taken from its scale (sections 5, 5b). A look
   found elsewhere (a template, a script, Java) is moved here or into site.css.

   Bootstrap comes first here, so that everything below and all of site.css override it. Every page links this file
   right before site.css, not through an @import in site.css: a static file's address carries the hash of that file
   alone, so a change made only here would not reach visitors, who keep site.css for a year.

   A colour with an "-rgb" twin is used with transparency, and Bootstrap wants it as three numbers: change both.
   To change the site's colour change --lf-brand and its twin: the shades are derived from them.

   What the text editors can do is in js/editor-settings.js; their look is here (section 13).

   The picture of a link to a work, drawn in Java, reads its colours and fonts from here too (section 15).

   Not from here: the e-mails (templates/mail, inline styles, as mail clients need) and the logo in favicon.svg. */
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");
/* The site's type: Inter for the interface and the headings, Manrope (a rounder, bolder sans) for
   the titles of works, JetBrains Mono for the small upper-case labels and dates. All three have
   Cyrillic. The reading page keeps its own fonts (section 2). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Manrope:wght@600;700;800&display=swap");

/* ===== 1. The palette: the colours that are the same in both themes ===== */
:root {
    /* The site's purple: the header, the footer, the buttons, the links. Change these two, and all of its shades below
       and in the themes follow. */
    --lf-brand: #8260c4;
    --lf-brand-rgb: 130, 96, 196;

    /* The brand's shades: its hue, its saturation scaled. The ones for a button's hover and press are lighter or darker
       than the brand, whatever it is, so its white text stays readable; the others have a lightness of their own, so a
       text keeps its contrast. "shade" is for light mode, "night" for dark mode. */
    --lf-shade-hover: hsl(from var(--lf-brand) h min(100, s * 0.88) calc(l * 0.894));
    --lf-shade-deep: hsl(from var(--lf-brand) h min(100, s * 0.93) calc(l * 0.822));
    --lf-shade-ink: hsl(from var(--lf-brand) h min(100, s * 1.01) calc(l * 0.6));
    --lf-shade-soft: hsl(from var(--lf-brand) h min(100, s * 1.28) 93.3%);
    --lf-shade-line: hsl(from var(--lf-brand) h min(100, s * 1.09) 86.7%);
    --lf-night-hover: hsl(from var(--lf-brand) h min(100, s * 1.09) calc(l * 1.101));
    --lf-night-ink: hsl(from var(--lf-brand) h min(100, s * 1.67) 83.1%);
    --lf-night-emphasis: hsl(from var(--lf-brand) h min(100, s * 1.7) 87.5%);
    --lf-night-link-hover: hsl(from var(--lf-brand) h min(100, s * 1.79) 91.2%);
    --lf-night-soft: hsl(from var(--lf-brand) h min(100, s * 0.58) 19.8%);
    --lf-night-line: hsl(from var(--lf-brand) h min(100, s * 0.53) 27.5%);
    --lf-night-subtle-border: hsl(from var(--lf-brand) h min(100, s * 0.66) 36.1%);
    --lf-night-bar: hsl(from var(--lf-brand) h min(100, s * 0.96) 30.2%);
    --lf-nav-btn-color: hsl(from var(--lf-brand) h min(100, s * 0.96) 40.8%);
    --lf-nav-btn-hover-bg: hsl(from var(--lf-brand) h min(100, s * 1.23) 89.2%);
    --lf-nav-btn-hover-border: hsl(from var(--lf-brand) h min(100, s * 1.05) 82.5%);
    --lf-nav-btn-active-bg: hsl(from var(--lf-brand) h min(100, s * 1.19) 85.3%);
    --lf-nav-btn-active-border: hsl(from var(--lf-brand) h min(100, s * 1.04) 79.0%);
    --lf-founders-rim-night: hsl(from var(--lf-brand) h min(100, s * 0.73) 20.6%);
    --lf-founders-fill-night: hsl(from var(--lf-brand) h min(100, s * 0.92) 38.0%);
    --lf-founders-paper-night: hsl(from var(--lf-brand) h min(100, s * 0.81) 26.3%);

    --lf-white: #fff;
    --lf-white-rgb: 255, 255, 255;
    --lf-black: #000;
    --lf-black-rgb: 0, 0, 0;
    /* The text's colour in light mode, also the shadows'; the search popup's backdrop. */
    --lf-ink-rgb: 35, 32, 40;
    --lf-backdrop-rgb: 20, 12, 40;

    /* The status colours: Bootstrap's classes (.text-danger, .bg-success, .btn-warning, alerts...) follow them too
       (section 14, the buttons in site.css). The darker and lighter shades are the same formulas as Bootstrap's own. */
    --lf-danger: #dc3545;
    --lf-danger-rgb: 220, 53, 69;
    --lf-danger-deep: color-mix(in srgb, var(--lf-danger) 80%, var(--lf-black));
    --lf-danger-night: color-mix(in srgb, var(--lf-danger) 40%, var(--lf-white));
    --lf-success: #198754;
    --lf-success-rgb: 25, 135, 84;
    --lf-success-deep: color-mix(in srgb, var(--lf-success) 80%, var(--lf-black));
    --lf-warning: #ffc107;
    --lf-warning-rgb: 255, 193, 7;
    --lf-info: #0dcaf0;
    --lf-info-rgb: 13, 202, 240;
    --lf-blue: #0d6efd;
    --lf-blue-rgb: 13, 110, 253;
    --lf-blue-deep: color-mix(in srgb, var(--lf-blue) 85%, var(--lf-black));
    --lf-blue-night: color-mix(in srgb, var(--lf-blue) 40%, var(--lf-white));
    --lf-gray: #6c757d;
    --lf-gray-rgb: 108, 117, 125;
    --lf-gray-deep: color-mix(in srgb, var(--lf-gray) 85%, var(--lf-black));
    --lf-gray-light: #adb5bd;
    --lf-light: #f8f9fa;
    --lf-light-rgb: 248, 249, 250;
    --lf-dark: #212529;
    --lf-dark-rgb: 33, 37, 41;

    /* Used by the direction of a work and by the statuses. */
    --lf-green: #2e9d57;
    --lf-sky: #4aa8e8;
    /* A warning's text. */
    --lf-amber-ink: #8a6500;

    --lf-star: #f5b301;
    --lf-like-other: #0a8fb0;
    --lf-mark-border: #e0a800;

    /* The arrows of the top of authors. */
    --lf-rank-up: #2e8a50;
    --lf-rank-down: #c0453a;
    --lf-rank-up-night: #6fcf8f;
    --lf-rank-down-night: #f08a80;
    --lf-rank-up-on-cover: #8fd3a3;
    --lf-rank-down-on-cover: #ffa198;

    --lf-relationship-none-bg: var(--lf-gray-light);
}
/* A browser that cannot derive a colour (before 2024) gets the brand itself or its transparent tints: still in the
   brand's colour, only with less difference between the shades. */
@supports not (color: hsl(from red h s l)) {
    :root {
        --lf-shade-hover: var(--lf-brand);
        --lf-shade-deep: var(--lf-brand);
        --lf-shade-ink: var(--lf-brand);
        --lf-shade-soft: rgba(var(--lf-brand-rgb), .15);
        --lf-shade-line: rgba(var(--lf-brand-rgb), .3);
        --lf-night-hover: var(--lf-brand);
        --lf-night-ink: var(--lf-brand);
        --lf-night-emphasis: var(--lf-brand);
        --lf-night-link-hover: var(--lf-brand);
        --lf-night-soft: rgba(var(--lf-brand-rgb), .2);
        --lf-night-line: rgba(var(--lf-brand-rgb), .35);
        --lf-night-subtle-border: rgba(var(--lf-brand-rgb), .5);
        --lf-night-bar: var(--lf-brand);
        --lf-nav-btn-color: var(--lf-brand);
        --lf-nav-btn-hover-bg: rgba(var(--lf-brand-rgb), .2);
        --lf-nav-btn-hover-border: rgba(var(--lf-brand-rgb), .4);
        --lf-nav-btn-active-bg: rgba(var(--lf-brand-rgb), .3);
        --lf-nav-btn-active-border: rgba(var(--lf-brand-rgb), .5);
        --lf-founders-rim-night: rgba(var(--lf-brand-rgb), .25);
        --lf-founders-fill-night: var(--lf-brand);
        --lf-founders-paper-night: rgba(var(--lf-brand-rgb), .35);
    }
}

/* ===== 2. Fonts ===== */
:root {
    --lf-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --lf-font-title: "Manrope", "Inter", system-ui, sans-serif;
    --lf-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* The choices of the reader's settings. */
    --lf-font-reader-georgia: Georgia, "Times New Roman", Times, serif;
    --lf-font-reader-roboto: "Roboto", "Helvetica Neue", Arial, sans-serif;
    --lf-font-reader-verdana: Verdana, Geneva, sans-serif;
    --lf-font-reader-arial: Arial, Helvetica, sans-serif;
    --lf-font-reader-alegreya: "Alegreya", Georgia, serif;
    --lf-font-reader-times: "Times New Roman", Times, serif;
    --lf-font-reader-comfortaa: "Comfortaa", "Trebuchet MS", sans-serif;
    --lf-font-reader-fira: "Fira Sans", "Segoe UI", sans-serif;
    --lf-font-reader-pt-sans: "PT Sans", "Trebuchet MS", sans-serif;

    --lf-weight-light: 300;          /* Bootstrap's .lead and .display-1 */
    --lf-weight-regular: 400;
    --lf-weight-medium: 500;
    --lf-weight-semibold: 600;
    --lf-weight-bold: 700;
    --lf-weight-extrabold: 800;
}

/* ===== 3. Text sizes, from the smallest ===== */
:root {
    --lf-text-3xs: .625rem;
    --lf-text-2xs: .7rem;
    --lf-text-xs: .75rem;
    --lf-text-sm: .8125rem;
    --lf-text-md: .875rem;
    --lf-text-ui: .9375rem;
    --lf-text-base: 1rem;
    --lf-text-plus: 1.0625rem;
    --lf-text-lg: 1.125rem;
    --lf-text-xl: 1.25rem;
    --lf-text-2xl: 1.375rem;
    --lf-text-3xl: 1.5rem;
    --lf-text-4xl: 1.625rem;
    --lf-text-5xl: 1.75rem;
    --lf-text-6xl: 2.25rem;
    --lf-text-7xl: 2.75rem;
    --lf-text-8xl: 3.75rem;
    --lf-text-display: clamp(1.875rem, 4vw, 2.75rem);
    --lf-text-display-sm: clamp(1.375rem, 3vw, 1.875rem);
    /* Bootstrap's headings (h1-h6, .h1-.h6, .fs-1-.fs-6) and type classes, which Bootstrap sets in numbers (site.css
       redraws them from these, at its top). The first four grow with the window up to their size at 1200px. */
    --lf-heading-1: min(calc(1.375rem + 1.5vw), 2.5rem);
    --lf-heading-2: min(calc(1.325rem + .9vw), 2rem);
    --lf-heading-3: min(calc(1.3rem + .6vw), 1.75rem);
    --lf-heading-4: min(calc(1.275rem + .3vw), 1.5rem);
    --lf-heading-5: var(--lf-text-xl);
    --lf-heading-6: var(--lf-text-base);
    --lf-text-display-1: min(calc(1.625rem + 4.5vw), 5rem);
    --lf-text-lead: var(--lf-text-xl);
    --lf-text-small: .875em;   /* <small>, .small: a share of the text around it */

    --lf-leading-none: 1;
    --lf-leading-tight: 1.2;
    --lf-leading-snug: 1.25;
    --lf-leading-normal: 1.4;
    --lf-leading-base: 1.5;
    --lf-leading-relaxed: 1.6;
    --lf-leading-loose: 1.7;

    /* Tracking: the headings drawn a little tighter, the titles of works a touch, a small badge's word a touch wider. */
    --lf-tracking-tight: -.02em;
    --lf-tracking-snug: -.01em;
    --lf-tracking-wide: .02em;

    /* The small upper-case labels (a menu's or the footer's section, a table's heading, a date, a kicker): one look,
       site.css's "upper-case labels" rule; a component sets only their colour. */
    --lf-label-font: var(--lf-font-mono);
    --lf-label-size: var(--lf-text-2xs);
    --lf-label-weight: var(--lf-weight-medium);
    --lf-label-tracking: .06em;
}

/* ===== 4. Corners =====
   The steps between these are Bootstrap's own variables, set in section 6: --bs-border-radius-sm (.375rem),
   --bs-border-radius (.5rem), -lg (.75rem), -xl (1rem). */
:root {
    --lf-radius-hair: 2px;
    --lf-radius-xs: .25rem;
    --lf-radius-2xl: 1.25rem;
    --lf-radius-circle: 50%;
    /* The rounded square of an author's picture (the settings, the author's page): a share of its side, so it scales
       with the picture. */
    --lf-radius-avatar: 23%;
    /* A badge's medal tile (the outer square of fragments/badge.html :: medal). */
    --lf-radius-medal: 22%;
}

/* ===== 4a. Layers (z-index), from the lowest =====
   The layers of the page. A number under 10 in site.css only orders the parts of one component among themselves
   (a card's badges over its cover...) and is not listed here. Bootstrap's own sit between them: the sticky header
   1020-1030, offcanvas 1045, modal 1055, tooltip 1080. */
:root {
    --lf-z-page-sticky: 10;       /* the letters' bar of the fandoms, sticky under the header */
    --lf-z-picker: 20;            /* the list of suggestions under a search field, the emoji panel */
    --lf-z-card-open: 30;         /* the full card opened over a library card */
    --lf-z-dropdown: 1000;        /* the pickers' lists (fandoms, authors, tags...) */
    --lf-z-editor-toolbar: 1010;  /* the editor's toolbar, sticky under the header */
    --lf-z-editor-pick: 1015;     /* the "Глосарій" button over the editor's toolbar */
    --lf-z-selection-menu: 1040;  /* the buttons under a selection of a chapter's text */
    --lf-z-assist: 1050;          /* the AI helper's bar of the text editors */
    --lf-z-blink: 1090;           /* the blink over the page when a work is hidden */
    --lf-z-ghost: 1100;           /* the menu item flying into the header after signing in */
    --lf-z-toast: 2000;           /* the short notices: over everything */
}

/* ===== 4b. Widths =====
   The column of a page (<main class="container page-lg">), from the narrowest, and the small widths the templates
   give a field, a number or a picture (the classes at the end of site.css). */
:root {
    --lf-page-xs: 480px;    /* a short form: the sanctions */
    --lf-page-sm: 640px;    /* a notice, a one-field page */
    --lf-page-md: 760px;    /* the settings, an article, a chat */
    --lf-page-lg: 900px;    /* the forms and the management pages */
    --lf-page-xl: 1000px;   /* the lists with a sidebar or a table */
    --lf-page-2xl: 1160px;  /* the catalogues */
    --lf-page-full: 1500px; /* the translation workspace: two texts side by side */

    --lf-width-field: 18rem;   /* a short field: a date */
    --lf-width-form: 28rem;    /* a one-line form, a short hint */
    --lf-width-card: 36rem;    /* a small form in a card */
    --lf-width-num: 7rem;      /* a number field */
    --lf-min-field: 240px;     /* a field that shares its row and wraps below this */
    --lf-min-num: 2.5rem;      /* the number before a line: a chapter, a paragraph */
    --lf-min-label: 5rem;      /* a short label before a line: "Частина 12" */
    --lf-list-max-height: 16rem;  /* a list that scrolls: the suggestions of a picker */
    --lf-avatar-sm: 32px;
    --lf-avatar-md: 40px;
    --lf-avatar-lg: 96px;
    --lf-bubble-width: 85%;    /* a message of a chat */
    /* The least column of a grid of cards (the library, the home page's rows; js/home-carousel.js reads it). The
       @container widths of .home-card-row in site.css are counted from it (n columns from 166n - 16 px): CSS cannot
       read a variable there, so change them with it. */
    --lf-card-min: 150px;
    --lf-input-grow-max: 12rem;       /* a field that grows with its text, then scrolls: a message */
    --lf-input-grow-max-tall: 15rem;  /* ... the AI helper's request */
    --lf-progress-tall: 1.125rem;
    /* A bar a script places over the text (the AI helper, "Глосарій", the buttons under a selection of a chapter) and
       a library card opened over the others (js/library-card.js): the least room from the window's edge, from what it points at (below a selection: past the phone's handles), from
       the bar beside it, and the least height of its scrolling list. */
    --lf-float-edge: 8px;
    --lf-float-gap: 6px;
    --lf-float-gap-below: 10px;
    --lf-float-gap-tight: 4px;
    --lf-float-list-min: 80px;
    /* The reading page: the sizes of the text a reader can pick (js/reader.js), and the text's width from which a page
       of the page mode shows two columns (js/reader-nav.js). */
    --lf-reader-font-min: 14px;
    --lf-reader-font-max: 32px;
    --lf-reader-spread-from: 1000px;
}

/* ===== 4c. Icons: their sizes and the thickness of their lines =====
   An icon of the templates drawn in lines (fill="none" stroke="currentColor") takes its thickness from a class,
   .icon-line, -bold or -heavy, and its size, unless its component sets one, from .icon-xs to -lg (the classes at the
   end of site.css). */
:root {
    --lf-icon-line: 1.6;        /* the menus', the footer's, most icons */
    --lf-icon-line-bold: 1.8;   /* the header's buttons, a password's eye, the notifications' actions */
    --lf-icon-line-heavy: 2.4;  /* the arrows of the reader's chapter switch */
    --lf-icon-xs: 9px;          /* the arrow of a move in the top of authors */
    --lf-icon-sm: 16px;
    --lf-icon-md: 18px;
    --lf-icon-lg: 22px;
}

/* ===== 4d. Buttons =====
   One look per kind of button (site.css, after .btn): a text button is Bootstrap's .btn or .btn-sm in a colour of
   site.css (.btn-primary, .btn-outline-secondary, .btn-quiet, .btn-float...); no component changes its type, padding
   or corners. A button with only an icon or a glyph adds .btn-icon: a square as tall as a text button of its size. */
:root {
    --lf-btn-side: calc(2.25rem + 2px);       /* .btn: a line of 1rem text at 1.5, its padding .375rem twice, its border */
    --lf-btn-side-sm: calc(1.8125rem + 2px);  /* .btn-sm: .875rem text, .25rem padding */
    --lf-btn-icon-scale: 1.25;               /* an icon or a glyph in a button: of the button's text */
}

/* ===== 5. Shadows, from the lowest =====
   One per kind of thing: a component takes the one of its kind, not a shadow of its own. */
:root {
    --lf-shadow-tab: 0 1px 3px rgba(var(--lf-black-rgb), .08);          /* the chosen segment of a row of tabs */
    --lf-shadow-cover: 0 1px 3px rgba(var(--lf-ink-rgb), 0.12);         /* a cover on the page */
    --lf-shadow-hover: 0 .25rem .75rem rgba(var(--lf-black-rgb), .08);  /* a card or tile under the pointer */
    --lf-shadow-raised: 0 2px 6px rgba(var(--lf-black-rgb), .25);       /* a small control or badge over a cover */
    --lf-shadow-float: 0 .375rem 1.25rem rgba(var(--lf-black-rgb), .25); /* a toast, a bar over the text, a dragged row */
    --lf-shadow-menu: 0 .75rem 2rem rgba(var(--lf-ink-rgb), .12);       /* a dropdown menu */
    --lf-shadow-overlay: 0 .75rem 2rem rgba(var(--lf-black-rgb), .35);  /* a panel over the page: search, an open card */
    --lf-shadow-bar: 0 -.25rem 1rem rgba(var(--lf-black-rgb), .06);    /* a bar stuck to the bottom of the window */
    /* The ring round a chosen option (a mode, a choice of a form). */
    --lf-ring-selected: 0 0 0 1px var(--lf-brand);
    /* The ring of a focused field or button of the site's own (Bootstrap's are --bs-focus-ring-color). */
    --lf-focus-ring: 0 0 0 .2rem rgba(var(--lf-brand-rgb), .25);
    --lf-focus-ring-soft: 0 0 0 .2rem rgba(var(--lf-brand-rgb), .18);
}

/* ===== 5b. Lines and fading =====
   A line round or between things, the quote's bar, a card's coloured top; the outline of a focused element of the
   site's own; what is faded: a secondary thing (muted), an inactive or placeholder one (faint), text over a cover.
   Set again on every element with colours of its own (a colour mode: the reading page's <body>, the header; the
   reader's sepia themes; the header's menus, light on the dark bar), so the lines take those colours. */
:root,
[data-bs-theme],
body[data-reader-theme],
:root:not([data-bs-theme="dark"]) .site-navbar .dropdown-menu {
    --lf-border: var(--bs-border-width) solid var(--bs-border-color);
    --lf-border-soft: var(--bs-border-width) solid var(--bs-border-color-translucent);
    --lf-border-accent: var(--bs-border-width) solid var(--lf-accent-line);
    --lf-border-dashed: var(--bs-border-width) dashed var(--bs-border-color);
    --lf-border-quote: 3px solid var(--bs-border-color);
    --lf-border-accent-strong: 3px solid var(--lf-brand);
    --lf-focus-outline: 2px solid var(--lf-brand);
    --lf-focus-offset: 2px;
    --lf-opacity-soft: .85;
    --lf-opacity-muted: .7;
    --lf-opacity-faint: .4;
}

/* ===== 5a. Motion: how long a change takes, and its curve =====
   The durations from the shortest; similar ones merged. The scripts that wait for an animation read them
   (js/tokens.js): change a value here only. */
:root {
    --lf-duration-instant: .1s;     /* a colour under the pointer, at once */
    --lf-duration-fast: .15s;       /* hover and focus: colours, borders, shadows */
    --lf-duration-base: .2s;        /* a panel or a card that moves or appears */
    --lf-duration-slow: .3s;        /* a toast's fade, the reader's toolbar */
    --lf-duration-slower: .45s;     /* a card that sinks or opens, a cover stack spreading */
    --lf-duration-slowest: .6s;     /* a blurred cover clearing, a medal's sheen */
    --lf-duration-caret: 1s;        /* the typewriter's caret blinks */
    --lf-duration-blink: 1.1s;      /* the blink over the page when a work is hidden (js/work-hide.js) */
    --lf-duration-pulse: 1.6s;      /* "new comments" pulsing */
    --lf-duration-flash: 2.5s;      /* a target that is highlighted, then fades */
    --lf-duration-flash-long: 6s;   /* a new comment of one's own, highlighted longer */
    --lf-delay-short: .12s;         /* one icon swapped for another: the second waits for the first */
    --lf-delay-stagger: .05s;       /* between the covers of a stack */
    /* How long a removed toast stays for its fade (js/tokens.js): a little longer than the fade itself. */
    --lf-duration-leave: .4s;

    --lf-ease-out: cubic-bezier(.2, .8, .2, 1);
    --lf-ease-standard: cubic-bezier(.4, 0, .2, 1);
    --lf-ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --lf-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --lf-ease-spring-soft: cubic-bezier(.34, 1.35, .64, 1);
    --lf-ease-flight: cubic-bezier(.5, 0, .3, 1);   /* a menu item flying into the header (js/nav-move.js) */

    /* How long a toast stays before its fade (js/work-menu.js, work-hide.js, author-relation.js, hidden-page.js). */
    --lf-duration-toast: 3.5s;
    --lf-duration-toast-error: var(--lf-duration-flash-long);

    /* The animations a script plays itself (element.animate), read through js/tokens.js. */
    /* An author's works blurring out and folding up when the author is hidden, or back (js/author-relation.js). */
    --lf-duration-fold: .5s;
    --lf-fold-blur: 6px;
    --lf-fold-rise: -.75rem;
    /* A hidden card's place in a list closing, so the cards after it move up (js/work-menu.js). */
    --lf-duration-collapse: var(--lf-duration-leave);
    /* After signing in, the visitor's menu items fly into the header's menus (js/nav-move.js): the moment before, the
       wait between two items, their places closing, the flight (arcing up, shrinking) and the menu's bump when it
       takes one in. An item with no menu to fly to shrinks and fades in --lf-duration-slowest. */
    --lf-delay-ghost: .7s;
    --lf-delay-ghost-stagger: .18s;
    --lf-duration-ghost-close: .65s;
    --lf-duration-ghost-flight: .95s;
    --lf-ghost-arc: 18px;
    --lf-ghost-scale-mid: .95;
    --lf-ghost-scale-end: .35;
    --lf-ghost-scale-fade: .6;
    --lf-ghost-bump: 1.15;
    /* A work's cover tilting away from the mouse pointer, at most (js/cover-tilt.js). */
    --lf-tilt-max-x: 8deg;
    --lf-tilt-max-y: 11deg;
    /* The reader's short push against the end of a chapter (js/reader-nav.js). */
    --lf-reader-bounce: 24px;
    /* The home page's typewriter (js/typewriter.js): the wait before it starts, a typed character (and up to how much
       longer, at random), an erased one, how long the full text and the empty line stay, the pause between lines. */
    --lf-typewriter-start: var(--lf-duration-leave);
    --lf-typewriter-type: 45ms;
    --lf-typewriter-jitter: 30ms;
    --lf-typewriter-erase: 25ms;
    --lf-typewriter-hold: 6.5s;
    --lf-typewriter-pause: var(--lf-duration-slowest);
    --lf-typewriter-line-gap: .25s;
}

/* ===== 6. The light and dark themes =====
   What the components read. Change a colour of one theme here.
   A calm, bookish look: warm paper-like neutrals, the site's purple (--lf-brand) as the one accent,
   surfaces set off by a thin warm border rather than a shadow, corners of 8px (buttons, fields) and
   12px (cards), no glossy gradients or glass. The dark mode is a warm charcoal with a hint of purple.
   Bootstrap's own variables are redefined from these, so every component follows without touching
   the markup. The light values are repeated on [data-bs-theme="light"] (and the shared ones on
   both modes) because the reading page scopes a colour mode to <body>, where Bootstrap's own rule
   would otherwise put its defaults back; and on the header's menus, which follow the site's light
   mode although the header itself is always in Bootstrap's dark mode (see .site-navbar). */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-font-family: var(--lf-font-body);
    --bs-font-monospace: var(--lf-font-mono);
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .75rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 1.5rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    /* Bootstrap's shadows (.shadow-sm, .shadow, .shadow-lg and its components) from the scale of section 5. */
    --bs-box-shadow-sm: var(--lf-shadow-tab);
    --bs-box-shadow: var(--lf-shadow-float);
    --bs-box-shadow-lg: var(--lf-shadow-overlay);
}
:root,
[data-bs-theme="light"],
:root:not([data-bs-theme="dark"]) .site-navbar .dropdown-menu {
    --lf-accent-hover: var(--lf-shade-hover);
    --lf-accent-deep: var(--lf-shade-deep);
    --lf-accent-ink: var(--lf-shade-ink);
    --lf-accent-soft: var(--lf-shade-soft);
    --lf-accent-line: var(--lf-shade-line);
    --lf-surface: var(--lf-white);
    --lf-surface-deep: var(--bs-secondary-bg);
    --lf-border-strong: #bdb6aa;

    --bs-body-bg: #fdfdfc;
    --bs-body-bg-rgb: 253, 253, 252;
    --bs-body-color: rgb(var(--lf-ink-rgb));
    --bs-body-color-rgb: var(--lf-ink-rgb);
    --bs-emphasis-color: #17141c;
    --bs-emphasis-color-rgb: 23, 20, 28;
    --bs-heading-color: inherit;
    --bs-secondary-color: #5e5a63;
    --bs-secondary-color-rgb: 94, 90, 99;
    --bs-tertiary-color: #8e8a93;
    --bs-tertiary-color-rgb: 142, 138, 147;
    --bs-secondary-bg: #ecebe8;
    --bs-secondary-bg-rgb: 236, 235, 232;
    --bs-tertiary-bg: #f7f6f4;
    --bs-tertiary-bg-rgb: 247, 246, 244;
    --bs-border-color: #e3e1dc;
    --bs-border-color-translucent: rgba(var(--lf-ink-rgb), .11);
    --bs-primary: var(--lf-brand);
    --bs-primary-rgb: var(--lf-brand-rgb);
    --bs-primary-text-emphasis: var(--lf-shade-ink);
    --bs-primary-bg-subtle: var(--lf-shade-soft);
    --bs-primary-border-subtle: var(--lf-shade-line);
    --bs-link-color: var(--lf-shade-deep);
    --bs-link-hover-color: var(--lf-shade-ink);
    --bs-focus-ring-color: rgba(var(--lf-brand-rgb), .25);
}
/* The purple of the header and the footer (a shade darker in dark mode). Both bars are themselves in
   Bootstrap's dark mode (white text), so their colour is set on the root only, where the site's own
   mode decides it, and inherited from there -- the per-mode tokens above would always give them the
   dark values. */
:root {
    --lf-bar-bg: var(--lf-brand);
    /* The radius of the inverted corners under the header and over the footer. */
    --lf-bar-corner: var(--bs-border-radius-lg);
}
:root[data-bs-theme="dark"] {
    --lf-bar-bg: var(--lf-night-bar);
}
[data-bs-theme="dark"] {
    --lf-accent-hover: var(--lf-night-hover);
    --lf-accent-deep: var(--lf-shade-hover);
    --lf-accent-ink: var(--lf-night-ink);
    --lf-accent-soft: var(--lf-night-soft);
    --lf-accent-line: var(--lf-night-line);
    --lf-surface: var(--bs-tertiary-bg);
    --lf-surface-deep: var(--bs-secondary-bg);
    --lf-border-strong: #55515c;

    --bs-body-bg: #1b1a1f;
    --bs-body-bg-rgb: 27, 26, 31;
    --bs-body-color: #dcd8e3;
    --bs-body-color-rgb: 220, 216, 227;
    --bs-emphasis-color: #f3f0f7;
    --bs-emphasis-color-rgb: 243, 240, 247;
    --bs-heading-color: inherit;
    --bs-secondary-color: #a8a4ae;
    --bs-secondary-color-rgb: 168, 164, 174;
    --bs-tertiary-color: #827e88;
    --bs-tertiary-color-rgb: 130, 126, 136;
    --bs-secondary-bg: #2f2c35;
    --bs-secondary-bg-rgb: 47, 44, 53;
    --bs-tertiary-bg: #24222a;
    --bs-tertiary-bg-rgb: 36, 34, 42;
    --bs-border-color: #3a3742;
    --bs-border-color-translucent: rgba(var(--lf-white-rgb), .08);
    --bs-primary: var(--lf-brand);
    --bs-primary-rgb: var(--lf-brand-rgb);
    --bs-primary-text-emphasis: var(--lf-night-emphasis);
    --bs-primary-bg-subtle: var(--lf-night-soft);
    --bs-primary-border-subtle: var(--lf-night-subtle-border);
    --bs-link-color: var(--lf-night-ink);
    --bs-link-hover-color: var(--lf-night-link-hover);
    --bs-focus-ring-color: rgba(var(--lf-brand-rgb), .4);
}

/* ===== 7. The reader's sepia themes ===== */
/* On <body> (set by reader.js), so the page background itself turns sepia, not just the content. */
body[data-reader-theme="sepia"] {
    --bs-body-bg: #f4ecd8;
    --bs-body-color: #3b2f1c;
    --bs-emphasis-color: var(--bs-body-color);
    --bs-secondary-color: #7a6a4f;
    --bs-border-color: #d8c9a3;
    --bs-border-color-translucent: var(--bs-border-color);
    --bs-tertiary-bg: #ece0c4;
    --lf-surface: var(--bs-body-bg);
}
/* Light sepia: the plain light theme with only a faint warm tint (barely off-white page, near-black
   brown text), for those who find full sepia too yellow. */
body[data-reader-theme="sepia-light"] {
    --bs-body-bg: #fbf7ee;
    --bs-body-color: #2e2a24;
    --bs-emphasis-color: var(--bs-body-color);
    --bs-secondary-color: #766c5c;
    --bs-border-color: #e6dec9;
    --bs-border-color-translucent: var(--bs-border-color);
    --bs-tertiary-bg: #f4eee0;
    --lf-surface: var(--bs-body-bg);
}

/* ===== 8. The direction of a work (the coloured line and badge of its card) =====
   Solid colours with their own text colour: the same in light and dark mode. */
.relationship-gen {
    --relationship-bg: #8d5a35;
    --relationship-fg: var(--lf-white);
}
.relationship-het {
    --relationship-bg: var(--lf-green);
    --relationship-fg: var(--lf-white);
}
.relationship-slash {
    --relationship-bg: var(--lf-sky);
    --relationship-fg: #06243b;
}
.relationship-femslash {
    --relationship-bg: #8a5cd0;
    --relationship-fg: var(--lf-white);
}
.relationship-multi {
    --relationship-bg: var(--lf-warning);
    --relationship-fg: var(--lf-dark);
}
.relationship-other {
    --relationship-bg: #12a99a;
    --relationship-fg: var(--lf-white);
}
.relationship-none {
    --relationship-bg: var(--lf-relationship-none-bg);
    --relationship-fg: var(--lf-dark);
}

/* ===== 9. Ratings and statuses (the outlined badges) ===== */
.rating-g {
    --badge-border: #1b5e20;
    --badge-text: var(--badge-border);
}
.rating-pg_13 {
    --badge-border: #8fd14f;
    --badge-text: #4c8a14;
}
.rating-r {
    --badge-border: var(--lf-warning);
    --badge-text: var(--lf-amber-ink);
}
.rating-nc_17 {
    --badge-border: var(--lf-danger);
    --badge-text: var(--badge-border);
}
.rating-nc_21 {
    --badge-border: #7b1e3a;
    --badge-text: var(--badge-border);
}
.status-in_progress {
    --badge-border: var(--lf-warning);
    --badge-text: var(--lf-amber-ink);
}
.status-completed {
    --badge-border: var(--lf-green);
    --badge-text: #1f7a42;
}
.status-frozen {
    --badge-border: var(--lf-sky);
    --badge-text: #1d6fa8;
}
.status-draft {
    --badge-border: #8c8c8c;
    --badge-text: #5c5c5c;
}

/* ===== 10. The generated covers: a gradient per tone =====
   A work gets one by its id (webcommon.Tones, which counts these classes: a tone added here is used at once). */
.book-tone-0 { --book-from: #6b2e2e; --book-to: #9e4545; }
.book-tone-1 { --book-from: #7a4a2e; --book-to: #ad6f48; }
.book-tone-2 { --book-from: #545b2f; --book-to: #808a49; }
.book-tone-3 { --book-from: #2e5a45; --book-to: #47876a; }
.book-tone-4 { --book-from: #2d5560; --book-to: #46808f; }
.book-tone-5 { --book-from: #2f4470; --book-to: #4b66a0; }
.book-tone-6 { --book-from: #3f3a70; --book-to: #6059a0; }
.book-tone-7 { --book-from: #5a2e6b; --book-to: #85489e; }
.book-tone-8 { --book-from: #6b2e55; --book-to: #9e4580; }
.book-tone-9 { --book-from: #3b4450; --book-to: #5d6b7b; }

/* ===== 10a. The avatars without a picture: a colour per handle =====
   The comments and the top of authors. Chosen as the covers' tones (webcommon.Tones counts these too). */
.avatar-tone-0 { --lf-avatar-bg: var(--lf-brand); }
.avatar-tone-1 { --lf-avatar-bg: #4a6b8a; }
.avatar-tone-2 { --lf-avatar-bg: #2e7a70; }
.avatar-tone-3 { --lf-avatar-bg: #a0526c; }
.avatar-tone-4 { --lf-avatar-bg: #7a7442; }
.avatar-tone-5 { --lf-avatar-bg: #6b6873; }

/* ===== 11. Badges' medals: the shades of the badge's hue (--h) ===== */
.badge-medal {
    --medal-rim: hsl(var(--h) 55% 94%);
    --medal-fill: hsl(var(--h) 46% 82%);
    --medal-ink: hsl(var(--h) 40% 25%);
    --medal-paper: #fdfcf9;
    --medal-gold: #c99a2e;
}
:root[data-bs-theme="dark"] .badge-medal {
    --medal-rim: hsl(var(--h) 22% 22%);
    --medal-fill: hsl(var(--h) 30% 36%);
    --medal-ink: hsl(var(--h) 45% 88%);
    --medal-paper: hsl(var(--h) 20% 17%);
    --medal-gold: #e2b84f;
}
.badge-medal.badge-medal-founders {
    --medal-rim: var(--lf-accent-soft);
    --medal-fill: var(--lf-brand);
    --medal-ink: var(--lf-accent-ink);
    --medal-paper: var(--lf-white);
}
:root[data-bs-theme="dark"] .badge-medal.badge-medal-founders {
    --medal-rim: var(--lf-founders-rim-night);
    --medal-fill: var(--lf-founders-fill-night);
    --medal-ink: var(--lf-shade-soft);
    --medal-paper: var(--lf-founders-paper-night);
}

/* The hue (0-359) of each badge's medal, by its picture's id (Badge#glyph): .badge-hue-<glyph>. */
.badge-hue-bookworm { --h: 32; }
.badge-hue-first-comment { --h: 125; }
.badge-hue-good-comments { --h: 200; }
.badge-hue-long-comments { --h: 262; }
.badge-hue-author-inspirer { --h: 48; }
.badge-hue-curator { --h: 14; }
.badge-hue-first-work { --h: 272; }
.badge-hue-works { --h: 250; }
.badge-hue-marathon { --h: 4; }
.badge-hue-steady-author { --h: 168; }
.badge-hue-series-maker { --h: 222; }
.badge-hue-popular-work { --h: 346; }
.badge-hue-followers { --h: 190; }
.badge-hue-prompt-filler { --h: 318; }
.badge-hue-translator { --h: 205; }
.badge-hue-language-bridge { --h: 158; }
.badge-hue-beta-reader { --h: 140; }
.badge-hue-gamma-reader { --h: 96; }
.badge-hue-editor { --h: 24; }
.badge-hue-sharp-eye { --h: 212; }
.badge-hue-good-advice { --h: 56; }
.badge-hue-fests { --h: 300; }
.badge-hue-fest-participant { --h: 280; }
.badge-hue-fest-winner { --h: 45; }
.badge-hue-fest-prize { --h: 215; }
.badge-hue-daily-streak { --h: 18; }
.badge-hue-years-on-site { --h: 330; }
.badge-hue-founders { --h: 268; }

/* ===== 12. The top of authors: the podium's metals ===== */
.top-board {
    --top-gold-face: #f2cd5c;
    --top-gold-ring: #c9a227;
    --top-silver-face: #e4e8ed;
    --top-silver-ring: #9aa3ae;
    --top-bronze-face: #eab184;
    --top-bronze-ring: #b5703c;
}

/* ===== 13. The text editors: their look =====
   What they can do (the toolbars, the delays) is in js/editor-settings.js, which reads their heights from here. */
:root {
    /* A button of the toolbar under the cursor. */
    --lf-editor-border: #95a5a6;
    /* The least height of the text: a form's field, a short one (data-md-size="short"), a comment. */
    --lf-editor-min-height: 320px;
    --lf-editor-min-height-short: 120px;
    --lf-editor-comment-min-height: 110px;
}
/* "Редактор перекладу". */
.translation-editor {
    --te-font-size: var(--lf-text-plus);
    --te-line: 1.6;
    --te-gap: 1.6em; /* one blank line: as tall as the blank line between the paragraphs of a field */
}

/* ===== 15. The picture of a link to a work =====
   The og:image drawn in Java (catalog.web.WorkPreviewImage, read by webcommon.TokensCss when the app starts): its
   paper and text, the brand's shades of its panel and its fonts. Its cover's frame is the work's direction (section 8).
   Java reads a hex colour, a var() of another colour of :root, a shade in the form of section 1 and rgba(var(--x-rgb), A)
   of a colour --x, nothing else; the fonts are a list of families, the first one the server has is used. */
:root {
    --lf-preview-paper: #f4f1ec;
    --lf-preview-ink: #1f1a17;
    --lf-preview-muted: #6c6560;
    --lf-preview-rule: #d9d3cb;
    --lf-preview-brand-deep: hsl(from var(--lf-brand) h min(100, s * 0.92) calc(l * 0.664));
    --lf-preview-frame-none: hsl(from var(--lf-brand) h min(100, s * 1.23) 86.5%);
    /* The plain "book" of a work without a cover: its inner line and its nib; the shadow under a cover. */
    --lf-preview-book-line: rgba(var(--lf-white-rgb), .157);
    --lf-preview-book-nib: rgba(var(--lf-white-rgb), .882);
    --lf-preview-shadow: rgba(var(--lf-black-rgb), .035);
    /* Families that write Cyrillic; Liberation comes with the server's image (fonts-liberation). */
    --lf-preview-font-sans: "Liberation Sans", Arial, "Helvetica Neue", Helvetica, "DejaVu Sans";
    --lf-preview-font-serif: "Liberation Serif", Georgia, "Times New Roman", "DejaVu Serif";
}

/* ===== 14. Bootstrap's status colours, from the palette =====
   Bootstrap sets them itself and its classes read them (.text-danger, .bg-success, alerts...). These are not to be
   edited: change --lf-danger and the others in section 1. Its buttons have the colour inside, so site.css redraws them. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-secondary: var(--lf-gray);
    --bs-secondary-rgb: var(--lf-gray-rgb);
    --bs-success: var(--lf-success);
    --bs-success-rgb: var(--lf-success-rgb);
    --bs-info: var(--lf-info);
    --bs-info-rgb: var(--lf-info-rgb);
    --bs-warning: var(--lf-warning);
    --bs-warning-rgb: var(--lf-warning-rgb);
    --bs-danger: var(--lf-danger);
    --bs-danger-rgb: var(--lf-danger-rgb);
    --bs-light: var(--lf-light);
    --bs-light-rgb: var(--lf-light-rgb);
    --bs-dark: var(--lf-dark);
    --bs-dark-rgb: var(--lf-dark-rgb);
}
:root,
[data-bs-theme="light"] {
    --bs-secondary-text-emphasis: color-mix(in srgb, var(--lf-gray) 40%, var(--lf-black));
    --bs-secondary-bg-subtle: color-mix(in srgb, var(--lf-gray) 20%, var(--lf-white));
    --bs-secondary-border-subtle: color-mix(in srgb, var(--lf-gray) 40%, var(--lf-white));
    --bs-success-text-emphasis: color-mix(in srgb, var(--lf-success) 40%, var(--lf-black));
    --bs-success-bg-subtle: color-mix(in srgb, var(--lf-success) 20%, var(--lf-white));
    --bs-success-border-subtle: color-mix(in srgb, var(--lf-success) 40%, var(--lf-white));
    --bs-info-text-emphasis: color-mix(in srgb, var(--lf-info) 40%, var(--lf-black));
    --bs-info-bg-subtle: color-mix(in srgb, var(--lf-info) 20%, var(--lf-white));
    --bs-info-border-subtle: color-mix(in srgb, var(--lf-info) 40%, var(--lf-white));
    --bs-warning-text-emphasis: color-mix(in srgb, var(--lf-warning) 40%, var(--lf-black));
    --bs-warning-bg-subtle: color-mix(in srgb, var(--lf-warning) 20%, var(--lf-white));
    --bs-warning-border-subtle: color-mix(in srgb, var(--lf-warning) 40%, var(--lf-white));
    --bs-danger-text-emphasis: color-mix(in srgb, var(--lf-danger) 40%, var(--lf-black));
    --bs-danger-bg-subtle: color-mix(in srgb, var(--lf-danger) 20%, var(--lf-white));
    --bs-danger-border-subtle: color-mix(in srgb, var(--lf-danger) 40%, var(--lf-white));
    --bs-form-valid-color: var(--lf-success);
    --bs-form-valid-border-color: var(--lf-success);
    --bs-form-invalid-color: var(--lf-danger);
    --bs-form-invalid-border-color: var(--lf-danger);
}
[data-bs-theme="dark"] {
    --bs-secondary-text-emphasis: color-mix(in srgb, var(--lf-gray) 60%, var(--lf-white));
    --bs-secondary-bg-subtle: color-mix(in srgb, var(--lf-gray) 20%, var(--lf-black));
    --bs-secondary-border-subtle: color-mix(in srgb, var(--lf-gray) 60%, var(--lf-black));
    --bs-success-text-emphasis: color-mix(in srgb, var(--lf-success) 60%, var(--lf-white));
    --bs-success-bg-subtle: color-mix(in srgb, var(--lf-success) 20%, var(--lf-black));
    --bs-success-border-subtle: color-mix(in srgb, var(--lf-success) 60%, var(--lf-black));
    --bs-info-text-emphasis: color-mix(in srgb, var(--lf-info) 60%, var(--lf-white));
    --bs-info-bg-subtle: color-mix(in srgb, var(--lf-info) 20%, var(--lf-black));
    --bs-info-border-subtle: color-mix(in srgb, var(--lf-info) 60%, var(--lf-black));
    --bs-warning-text-emphasis: color-mix(in srgb, var(--lf-warning) 60%, var(--lf-white));
    --bs-warning-bg-subtle: color-mix(in srgb, var(--lf-warning) 20%, var(--lf-black));
    --bs-warning-border-subtle: color-mix(in srgb, var(--lf-warning) 60%, var(--lf-black));
    --bs-danger-text-emphasis: color-mix(in srgb, var(--lf-danger) 60%, var(--lf-white));
    --bs-danger-bg-subtle: color-mix(in srgb, var(--lf-danger) 20%, var(--lf-black));
    --bs-danger-border-subtle: color-mix(in srgb, var(--lf-danger) 60%, var(--lf-black));
    --bs-form-valid-color: var(--bs-success-text-emphasis);
    --bs-form-valid-border-color: var(--bs-success-text-emphasis);
    --bs-form-invalid-color: var(--bs-danger-text-emphasis);
    --bs-form-invalid-border-color: var(--bs-danger-text-emphasis);
}