/*!
 * LiquidIce — a standalone CSS framework
 * https://liquidice.ayazpoor.fr — part of the Ayazpoor ecosystem
 *
 * Copyright (c) 2026 Olivier AYAZPOOR
 * olivier@ayazpoor.fr · @Ohw2222 (GitHub) · @olivpics (Instagram)
 *
 * Dual-licensed under Apache-2.0 or MIT, at your option.
 * SPDX-License-Identifier: Apache-2.0 OR MIT
 *
 * ---------------------------------------------------------------------------
 * THE ONE RULE
 *
 * Nothing in this framework is a flat colour and nothing is fully opaque.
 * Every surface is a tint you can see through, laid over a blur of whatever is
 * behind it, and edged with a one-pixel gradient that is brighter where light
 * would fall and fainter where it would not. That is the whole aesthetic, and
 * it is applied without exception: buttons, badges, tables, the footer, the
 * scrollbar, the form fields, the toasts.
 *
 * Practically this means three things repeat throughout the file:
 *
 *   1. a surface is `linear-gradient(...)` of two rgba stops, never a colour;
 *   2. the border is drawn by a masked `::before`, because a real border
 *      cannot hold a gradient without killing the backdrop blur underneath;
 *   3. `backdrop-filter: blur() saturate()` — the saturate is what stops
 *      frosted glass from looking grey.
 *
 * No build step, no dependencies, no JavaScript required for anything that can
 * be done without it.
 * ---------------------------------------------------------------------------
 */

/* ===========================================================================
   1. FONTS
   =========================================================================== */

@font-face {
    font-family: 'OpenDyslexic';
    src: url('/OpenDyslexic-Regular.woff2') format('woff2'),
         url('/OpenDyslexic-Regular.woff') format('woff'),
         url('/OpenDyslexic-Regular.otf') format('opentype'),
         url('/OpenDyslexic-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'ADHD';
    src: url('/Fast_Sans.ttf') format('truetype');
    font-display: swap;
}

/* ===========================================================================
   2. TOKENS
   =========================================================================== */

:root {
    color-scheme: light dark;

    /* ---- type ------------------------------------------------------------ */
    --li-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --li-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
    --li-font-family-dyslexic: 'OpenDyslexic', serif;
    --li-font-family-adhd: 'ADHD', sans-serif;

    --li-font-size-base: 16px;
    --li-font-size-xs: 0.75rem;
    --li-font-size-sm: 0.875rem;
    --li-font-size-md: 1rem;
    --li-font-size-lg: 1.125rem;
    --li-font-size-xl: 1.25rem;
    --li-font-size-2xl: 1.5rem;
    --li-font-size-3xl: 1.875rem;
    --li-font-size-4xl: 2.25rem;
    --li-font-size-5xl: 3rem;
    --li-font-size-6xl: 3.75rem;
    --li-font-size-7xl: 4.5rem;

    --li-font-weight-light: 300;
    --li-font-weight-normal: 400;
    --li-font-weight-medium: 500;
    --li-font-weight-semibold: 600;
    --li-font-weight-bold: 700;
    --li-font-weight-black: 800;

    /* ---- colour, as components so every tint can be mixed at will --------- */
    --li-primary-rgb: 0, 123, 255;
    --li-secondary-rgb: 108, 117, 125;
    --li-success-rgb: 40, 167, 69;
    --li-danger-rgb: 220, 53, 69;
    --li-warning-rgb: 255, 193, 7;
    --li-visible-rgb: 255, 222, 10;
    --li-info-rgb: 23, 162, 184;
    --li-light-rgb: 248, 249, 250;
    --li-dark-rgb: 33, 37, 41;
    --li-personalized1-rgb: 102, 16, 242;
    --li-personalized2-rgb: 232, 62, 140;

    /* The two ends of every surface gradient. In light mode a pane of ice is
       white light caught at an angle; in dark mode it is the same pane over a
       darker room, so the highlight stays white and only its strength moves. */
    --li-sheen-rgb: 255, 255, 255;
    --li-shade-rgb: 15, 23, 42;

    --li-text-rgb: 26, 30, 35;
    --li-text-muted-rgb: 96, 105, 117;
    --li-text-color: rgb(var(--li-text-rgb));
    --li-text-muted: rgb(var(--li-text-muted-rgb));
    --li-text-color-light: rgb(248, 249, 250);

    /* The page behind the glass. Never a flat colour either: two very wide,
       very faint radial washes, so a blurred panel has something to blur. */
    --li-bg-rgb: 244, 247, 251;
    --li-bg-wash-1: rgba(var(--li-primary-rgb), 0.10);
    --li-bg-wash-2: rgba(var(--li-personalized1-rgb), 0.08);
    --li-bg-wash-3: rgba(var(--li-info-rgb), 0.07);

    /* ---- the glass ------------------------------------------------------- */
    --li-surface-top: rgba(var(--li-sheen-rgb), 0.55);
    --li-surface-bottom: rgba(var(--li-sheen-rgb), 0.18);
    --li-surface-angle: 145deg;

    --li-edge-bright: rgba(var(--li-sheen-rgb), 0.90);
    --li-edge-dim: rgba(var(--li-sheen-rgb), 0.10);
    --li-edge-width: 1px;
    --li-edge-angle: 145deg;

    --li-blur: 18px;
    --li-blur-sm: 10px;
    --li-blur-lg: 30px;
    --li-blur-xl: 48px;
    --li-saturate: 1.7;
    --li-brightness: 1.02;

    /* The strength of a coloured variant's tint. Two stops, never one, so a
       button is a gradient of a colour rather than the colour. */
    --li-tint-strong: 0.28;
    --li-tint-weak: 0.10;
    --li-tint-hover: 0.38;

    /* ---- elevation ------------------------------------------------------- */
    --li-shadow-rgb: 15, 23, 42;
    --li-shadow-xs: 0 1px 2px rgba(var(--li-shadow-rgb), 0.05);
    --li-shadow-sm: 0 2px 8px -2px rgba(var(--li-shadow-rgb), 0.10);
    --li-shadow: 0 8px 24px -8px rgba(var(--li-shadow-rgb), 0.16),
                 0 2px 6px -2px rgba(var(--li-shadow-rgb), 0.08);
    --li-shadow-lg: 0 18px 45px -12px rgba(var(--li-shadow-rgb), 0.24),
                    0 6px 14px -6px rgba(var(--li-shadow-rgb), 0.10);
    --li-shadow-xl: 0 32px 70px -18px rgba(var(--li-shadow-rgb), 0.32),
                    0 10px 22px -10px rgba(var(--li-shadow-rgb), 0.14);
    --li-shadow-inset: inset 0 1px 0 rgba(var(--li-sheen-rgb), 0.35);

    /* ---- geometry -------------------------------------------------------- */
    --li-spacing-0: 0;
    --li-spacing-px: 1px;
    --li-spacing-1: 0.25rem;
    --li-spacing-2: 0.5rem;
    --li-spacing-3: 0.75rem;
    --li-spacing-4: 1rem;
    --li-spacing-5: 1.25rem;
    --li-spacing-6: 1.5rem;
    --li-spacing-7: 1.75rem;
    --li-spacing-8: 2rem;
    --li-spacing-10: 2.5rem;
    --li-spacing-12: 3rem;
    --li-spacing-16: 4rem;
    --li-spacing-20: 5rem;
    --li-spacing-24: 6rem;
    --li-spacing-32: 8rem;

    --li-radius-sm: 0.375rem;
    --li-radius-md: 0.625rem;
    --li-radius-lg: 0.875rem;
    --li-radius-xl: 1.125rem;
    --li-radius-2xl: 1.5rem;
    --li-radius-3xl: 2rem;
    --li-radius-full: 9999px;
    --li-border-radius: var(--li-radius-2xl);

    --li-gutter: 1.5rem;
    --li-container-sm: 540px;
    --li-container-md: 720px;
    --li-container-lg: 960px;
    --li-container-xl: 1140px;
    --li-container-2xl: 1320px;

    /* ---- depth ----------------------------------------------------------- */
    --li-z-below: -1;
    --li-z-base: 1;
    --li-z-sticky: 30;
    --li-z-navbar: 40;
    --li-z-sidebar: 45;
    --li-z-backdrop: 1040;
    --li-z-offcanvas: 1045;
    --li-z-modal: 1050;
    --li-z-popover: 1070;
    --li-z-tooltip: 1080;
    --li-z-toast: 1090;
    --li-z-top: 9999;

    /* ---- motion ---------------------------------------------------------- */
    --li-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --li-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --li-duration-fast: 0.15s;
    --li-duration: 0.28s;
    --li-duration-slow: 0.45s;

    /* ---- accessibility scales -------------------------------------------- */
    --li-font-size-bigger-1: 1.15;
    --li-font-size-bigger-2: 1.3;
    --li-font-size-bigger-3: 1.45;
    --li-font-size-bigger-4: 1.6;
    --li-font-size-bigger-5: 1.75;

    --li-letter-spacing-base: normal;
    --li-letter-spacing-bigger-1: 0.05em;
    --li-letter-spacing-bigger-2: 0.1em;
    --li-letter-spacing-bigger-3: 0.15em;
    --li-letter-spacing-bigger-4: 0.2em;
    --li-letter-spacing-bigger-5: 0.25em;

    --li-interline-base: 1.6;
    --li-interline-tight: 1.25;
    --li-interline-bigger-1: 1.7;
    --li-interline-bigger-2: 1.8;
    --li-interline-bigger-3: 1.9;
    --li-interline-bigger-4: 2;
    --li-interline-bigger-5: 2.1;

    /* Kept because the first release published them; nothing reads them now. */
    --li-blur-amount-base: var(--li-blur-lg);
    --li-blur-amount-center: 5px;
    --li-blur-amount-sides: 40px;
    --li-refraction-strength: 8px;
    --li-refraction-lightness: 0.02;
    --li-refraction-saturation: 1.2;
}

/* ---- dark ---------------------------------------------------------------- */

html.dark {
    --li-text-rgb: 236, 241, 248;
    --li-text-muted-rgb: 152, 163, 179;
    --li-text-color: rgb(var(--li-text-rgb));
    --li-text-muted: rgb(var(--li-text-muted-rgb));

    --li-bg-rgb: 9, 12, 20;
    --li-bg-wash-1: rgba(var(--li-primary-rgb), 0.16);
    --li-bg-wash-2: rgba(var(--li-personalized1-rgb), 0.14);
    --li-bg-wash-3: rgba(var(--li-info-rgb), 0.10);

    --li-surface-top: rgba(var(--li-sheen-rgb), 0.10);
    --li-surface-bottom: rgba(var(--li-sheen-rgb), 0.03);

    --li-edge-bright: rgba(var(--li-sheen-rgb), 0.34);
    --li-edge-dim: rgba(var(--li-sheen-rgb), 0.04);

    --li-saturate: 1.5;
    --li-brightness: 1.06;

    --li-tint-strong: 0.34;
    --li-tint-weak: 0.14;
    --li-tint-hover: 0.46;

    --li-shadow-rgb: 0, 0, 0;
    --li-shadow-sm: 0 2px 10px -2px rgba(0, 0, 0, 0.5);
    --li-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6),
                 0 2px 8px -2px rgba(0, 0, 0, 0.4);
    --li-shadow-lg: 0 20px 50px -14px rgba(0, 0, 0, 0.7),
                    0 8px 18px -8px rgba(0, 0, 0, 0.45);
    --li-shadow-xl: 0 36px 80px -20px rgba(0, 0, 0, 0.8),
                    0 12px 26px -12px rgba(0, 0, 0, 0.5);
    --li-shadow-inset: inset 0 1px 0 rgba(var(--li-sheen-rgb), 0.10);
}

/* Anyone who has not chosen gets what their system chose, but only if the
   page has not been told otherwise by the theme switch. */
@media (prefers-color-scheme: dark) {
    html:not(.light):not(.dark) {
        --li-text-rgb: 236, 241, 248;
        --li-text-muted-rgb: 152, 163, 179;
        --li-bg-rgb: 9, 12, 20;
        --li-surface-top: rgba(var(--li-sheen-rgb), 0.10);
        --li-surface-bottom: rgba(var(--li-sheen-rgb), 0.03);
        --li-edge-bright: rgba(var(--li-sheen-rgb), 0.34);
        --li-edge-dim: rgba(var(--li-sheen-rgb), 0.04);
        --li-tint-strong: 0.34;
        --li-tint-weak: 0.14;
        --li-tint-hover: 0.46;
        --li-brightness: 1.06;
    }
}

/* ===========================================================================
   3. RESET
   =========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
    tab-size: 4;
}

body {
    margin: 0;
    padding-top: var(--li-spacing-16);
    min-height: 100vh;
    font-family: var(--li-font-family);
    font-size: var(--li-font-size-base);
    font-weight: var(--li-font-weight-normal);
    line-height: var(--li-interline-base);
    color: var(--li-text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* The room the glass sits in: three wide washes over one base tone. Fixed,
       so scrolling moves the panels and not the light. */
    background-color: rgb(var(--li-bg-rgb));
    background-image:
        radial-gradient(ellipse 80% 60% at 12% -10%, var(--li-bg-wash-1), transparent 60%),
        radial-gradient(ellipse 70% 55% at 88% 8%, var(--li-bg-wash-2), transparent 62%),
        radial-gradient(ellipse 90% 70% at 50% 105%, var(--li-bg-wash-3), transparent 65%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    transition: color var(--li-duration-slow) var(--li-ease),
                background-color var(--li-duration-slow) var(--li-ease);
}

hr {
    height: 0;
    margin: var(--li-spacing-6) 0;
    border: 0;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent,
        rgba(var(--li-sheen-rgb), 0.45), transparent) 1;
    opacity: 0.9;
}

html.dark hr {
    border-image: linear-gradient(90deg, transparent,
        rgba(var(--li-sheen-rgb), 0.22), transparent) 1;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    vertical-align: middle;
}

img,
video {
    max-width: 100%;
    height: auto;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    appearance: button;
    cursor: pointer;
}

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled,
fieldset:disabled button {
    cursor: not-allowed;
}

textarea {
    resize: vertical;
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: var(--li-spacing-2);
    font-size: var(--li-font-size-lg);
    font-weight: var(--li-font-weight-semibold);
    line-height: inherit;
}

legend + * {
    clear: left;
}

table {
    border-collapse: collapse;
    caption-side: bottom;
}

caption {
    padding: var(--li-spacing-3) 0;
    color: var(--li-text-muted);
    text-align: left;
}

th {
    text-align: inherit;
}

summary {
    cursor: pointer;
    display: list-item;
}

[hidden] {
    display: none !important;
}

::selection {
    background: rgba(var(--li-primary-rgb), 0.28);
}

:focus-visible {
    outline: 2px solid rgba(var(--li-primary-rgb), 0.85);
    outline-offset: 2px;
}

/* The scrollbar is a surface like any other: a tint, not a colour. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--li-text-rgb), 0.28) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: var(--li-radius-full);
    background-color: rgba(var(--li-text-rgb), 0.22);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--li-text-rgb), 0.38);
}

/* ===========================================================================
   4. TYPOGRAPHY
   =========================================================================== */

h1, h2, h3, h4, h5, h6,
.li-h1, .li-h2, .li-h3, .li-h4, .li-h5, .li-h6 {
    margin-top: var(--li-spacing-8);
    margin-bottom: var(--li-spacing-4);
    font-weight: var(--li-font-weight-bold);
    line-height: var(--li-interline-tight);
    letter-spacing: -0.015em;
    color: var(--li-text-color);
    text-wrap: balance;
}

h1, .li-h1 { font-size: var(--li-font-size-5xl); margin-top: var(--li-spacing-12); margin-bottom: var(--li-spacing-8); }
h2, .li-h2 { font-size: var(--li-font-size-4xl); margin-top: var(--li-spacing-10); margin-bottom: var(--li-spacing-6); }
h3, .li-h3 { font-size: var(--li-font-size-3xl); margin-top: var(--li-spacing-8); margin-bottom: var(--li-spacing-5); }
h4, .li-h4 { font-size: var(--li-font-size-2xl); margin-top: var(--li-spacing-6); margin-bottom: var(--li-spacing-4); }
h5, .li-h5 { font-size: var(--li-font-size-xl); margin-top: var(--li-spacing-5); margin-bottom: var(--li-spacing-3); }
h6, .li-h6 { font-size: var(--li-font-size-lg); margin-top: var(--li-spacing-4); margin-bottom: var(--li-spacing-2); }

/* Display headings: the same gradient as the glass edge, run through the
   letters themselves. */
.li-display-1, .li-display-2, .li-display-3,
.li-display-4, .li-display-5, .li-display-6 {
    font-weight: var(--li-font-weight-black);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-top: var(--li-spacing-8);
    margin-bottom: var(--li-spacing-6);
}

.li-display-1 { font-size: clamp(2.75rem, 6vw, var(--li-font-size-7xl)); }
.li-display-2 { font-size: clamp(2.5rem, 5.4vw, var(--li-font-size-6xl)); }
.li-display-3 { font-size: clamp(2.25rem, 4.8vw, var(--li-font-size-5xl)); }
.li-display-4 { font-size: clamp(2rem, 4.2vw, var(--li-font-size-4xl)); }
.li-display-5 { font-size: clamp(1.75rem, 3.6vw, var(--li-font-size-3xl)); }
.li-display-6 { font-size: clamp(1.5rem, 3vw, var(--li-font-size-2xl)); }

.li-text-gradient {
    background-image: linear-gradient(120deg,
        rgb(var(--li-primary-rgb)),
        rgb(var(--li-personalized1-rgb)) 45%,
        rgb(var(--li-personalized2-rgb)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

p {
    margin-top: 0;
    margin-bottom: var(--li-spacing-4);
}

p:last-child {
    margin-bottom: 0;
}

.li-lead {
    font-size: var(--li-font-size-lg);
    font-weight: var(--li-font-weight-light);
    line-height: 1.7;
    color: var(--li-text-muted);
}

.li-text-muted { color: var(--li-text-muted) !important; }
.li-txt-black { color: #000 !important; }
.li-txt-white { color: #fff !important; }

a {
    color: rgb(var(--li-primary-rgb));
    text-decoration: none;
    text-underline-offset: 0.2em;
    transition: color var(--li-duration-fast) var(--li-ease);
}

a:hover {
    color: rgba(var(--li-primary-rgb), 0.78);
    text-decoration: underline;
}

ul, ol {
    margin-top: 0;
    margin-bottom: var(--li-spacing-4);
    padding-left: var(--li-spacing-6);
}

li {
    margin-bottom: var(--li-spacing-1);
}

.li-list-unstyled,
.li-list-inline {
    padding-left: 0;
    list-style: none;
}

.li-list-inline > li {
    display: inline-block;
    margin-right: var(--li-spacing-3);
}

dl { margin-top: 0; margin-bottom: var(--li-spacing-4); }
dt { font-weight: var(--li-font-weight-semibold); }
dd { margin-bottom: var(--li-spacing-2); margin-left: 0; }

small, .li-small { font-size: var(--li-font-size-sm); }

mark, .li-mark {
    padding: 0.1em 0.35em;
    border-radius: var(--li-radius-sm);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-warning-rgb), 0.42),
        rgba(var(--li-warning-rgb), 0.16));
    color: inherit;
}

abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
    text-decoration-thickness: from-font;
}

.li-initialism {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

kbd {
    padding: 0.15em 0.45em;
    font-family: var(--li-font-family-mono);
    font-size: 0.85em;
    border-radius: var(--li-radius-sm);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.30),
        rgba(var(--li-sheen-rgb), 0.08));
    border: 1px solid rgba(var(--li-text-rgb), 0.18);
    box-shadow: 0 1px 0 rgba(var(--li-text-rgb), 0.14);
}

code {
    font-family: var(--li-font-family-mono);
    font-size: 0.9em;
    color: rgb(var(--li-personalized2-rgb));
    word-wrap: break-word;
}

a > code { color: inherit; }

pre {
    display: block;
    margin-top: 0;
    margin-bottom: var(--li-spacing-4);
    padding: var(--li-spacing-5);
    overflow: auto;
    font-family: var(--li-font-family-mono);
    font-size: var(--li-font-size-sm);
    line-height: 1.65;
    border-radius: var(--li-radius-lg);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-shade-rgb), 0.06),
        rgba(var(--li-shade-rgb), 0.02));
    backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    border: 1px solid rgba(var(--li-text-rgb), 0.10);
    color: var(--li-text-color);
}

html.dark pre {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.06),
        rgba(var(--li-sheen-rgb), 0.02));
    border-color: rgba(var(--li-sheen-rgb), 0.10);
}

pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal;
}

blockquote,
.li-blockquote {
    position: relative;
    margin: var(--li-spacing-8) 0;
    padding: var(--li-spacing-5) var(--li-spacing-6);
    font-size: var(--li-font-size-lg);
    font-style: italic;
    line-height: var(--li-interline-base);
    border-radius: var(--li-radius-lg);
    background: linear-gradient(var(--li-surface-angle),
        var(--li-surface-top), var(--li-surface-bottom));
    backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    border-left: 3px solid transparent;
    border-image: linear-gradient(180deg,
        rgba(var(--li-primary-rgb), 0.9),
        rgba(var(--li-personalized1-rgb), 0.25)) 1;
}

blockquote p:last-child { margin-bottom: 0; }

blockquote cite,
.li-blockquote-footer {
    display: block;
    margin-top: var(--li-spacing-2);
    font-size: var(--li-font-size-sm);
    font-style: normal;
    text-align: right;
    color: var(--li-text-muted);
}

.li-blockquote-footer::before { content: '\2014\00A0'; }

figure { margin: 0 0 var(--li-spacing-4); }

.li-figure-img { margin-bottom: var(--li-spacing-2); border-radius: var(--li-radius-lg); }

.li-figure-caption {
    font-size: var(--li-font-size-sm);
    color: var(--li-text-muted);
}

/* ===========================================================================
   5. THE GLASS ENGINE
   ---------------------------------------------------------------------------
   Everything visible in this framework is built from three parts, and they
   are defined once here:

     the pane    a two-stop gradient of white light, never a colour
     the edge    a masked ::before holding a one-pixel gradient border
     the sheen   a ::after holding the specular highlight and the rim shade

   A real `border` cannot hold a gradient without `border-image`, and
   `border-image` cannot have a radius. Painting the border into a ::before and
   punching its middle out with a mask is the only way to have a gradient
   border, rounded corners, and a live backdrop blur at the same time.
   =========================================================================== */

.liquid-ice,
.li-glass {
    position: relative;
    z-index: var(--li-z-base);
    border: 0;
    border-radius: var(--li-border-radius);
    background: linear-gradient(var(--li-surface-angle),
        var(--li-surface-top), var(--li-surface-bottom));
    backdrop-filter: blur(var(--li-blur))
                     saturate(var(--li-saturate))
                     brightness(var(--li-brightness));
    -webkit-backdrop-filter: blur(var(--li-blur))
                             saturate(var(--li-saturate))
                             brightness(var(--li-brightness));
    box-shadow: var(--li-shadow), var(--li-shadow-inset);
    transition: box-shadow var(--li-duration) var(--li-ease),
                transform var(--li-duration) var(--li-ease),
                background var(--li-duration) var(--li-ease);
}

/* the edge */
.liquid-ice::before,
.li-glass::before,
.li-edge::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: var(--li-edge-width);
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(var(--li-edge-angle),
        var(--li-edge-bright) 0%,
        var(--li-edge-dim) 38%,
        var(--li-edge-dim) 62%,
        var(--li-edge-bright) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* the sheen: a highlight at the top-left shoulder and a faint rim shade at the
   bottom-right, which is what stops a flat pane from reading as a rectangle */
.liquid-ice::after,
.li-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 6% -8%,
            rgba(var(--li-sheen-rgb), 0.30), transparent 55%),
        radial-gradient(90% 70% at 104% 108%,
            rgba(var(--li-shade-rgb), 0.10), transparent 58%);
}

html.dark .liquid-ice::after,
html.dark .li-glass::after {
    background:
        radial-gradient(120% 80% at 6% -8%,
            rgba(var(--li-sheen-rgb), 0.10), transparent 55%),
        radial-gradient(90% 70% at 104% 108%,
            rgba(0, 0, 0, 0.22), transparent 58%);
}

/* Content has to sit above both pseudo-elements. */
.liquid-ice > *,
.li-glass > * {
    position: relative;
    z-index: 1;
}

/* Where masks are not understood the edge falls back to a plain hairline,
   which is duller but never wrong. */
@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .liquid-ice::before,
    .li-glass::before,
    .li-edge::before {
        background: none;
        border: var(--li-edge-width) solid var(--li-edge-bright);
        padding: 0;
    }
}

/* Where the backdrop cannot be filtered at all, the pane thickens so text
   still has something to sit on. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .liquid-ice,
    .li-glass {
        background: linear-gradient(var(--li-surface-angle),
            rgba(var(--li-sheen-rgb), 0.82),
            rgba(var(--li-sheen-rgb), 0.62));
    }
    html.dark .liquid-ice,
    html.dark .li-glass {
        background: linear-gradient(var(--li-surface-angle),
            rgba(var(--li-shade-rgb), 0.86),
            rgba(var(--li-shade-rgb), 0.72));
    }
}

/* ---- how thick the glass is ---------------------------------------------- */

.li-glass-thin   { --li-blur: var(--li-blur-sm); --li-surface-top: rgba(var(--li-sheen-rgb), 0.32); --li-surface-bottom: rgba(var(--li-sheen-rgb), 0.08); }
.li-glass-frosted{ --li-blur: var(--li-blur-lg); }
.li-glass-deep   { --li-blur: var(--li-blur-xl); --li-surface-top: rgba(var(--li-sheen-rgb), 0.66); --li-surface-bottom: rgba(var(--li-sheen-rgb), 0.26); }
.li-glass-clear  { --li-blur: 4px; --li-surface-top: rgba(var(--li-sheen-rgb), 0.16); --li-surface-bottom: rgba(var(--li-sheen-rgb), 0.04); }

html.dark .li-glass-thin  { --li-surface-top: rgba(var(--li-sheen-rgb), 0.07); --li-surface-bottom: rgba(var(--li-sheen-rgb), 0.02); }
html.dark .li-glass-deep  { --li-surface-top: rgba(var(--li-sheen-rgb), 0.16); --li-surface-bottom: rgba(var(--li-sheen-rgb), 0.06); }
html.dark .li-glass-clear { --li-surface-top: rgba(var(--li-sheen-rgb), 0.04); --li-surface-bottom: rgba(var(--li-sheen-rgb), 0.01); }

/* ---- how the light runs across it ---------------------------------------- */

.li-edge-soft   { --li-edge-bright: rgba(var(--li-sheen-rgb), 0.55); }
.li-edge-hard   { --li-edge-bright: rgba(var(--li-sheen-rgb), 1); --li-edge-width: 1.5px; }
.li-edge-none   { --li-edge-bright: transparent; --li-edge-dim: transparent; }

/* A coloured rim, still a gradient and still one pixel. */
.li-edge-primary      { --li-edge-bright: rgba(var(--li-primary-rgb), 0.85);      --li-edge-dim: rgba(var(--li-primary-rgb), 0.12); }
.li-edge-secondary    { --li-edge-bright: rgba(var(--li-secondary-rgb), 0.85);    --li-edge-dim: rgba(var(--li-secondary-rgb), 0.12); }
.li-edge-success      { --li-edge-bright: rgba(var(--li-success-rgb), 0.85);      --li-edge-dim: rgba(var(--li-success-rgb), 0.12); }
.li-edge-danger       { --li-edge-bright: rgba(var(--li-danger-rgb), 0.85);       --li-edge-dim: rgba(var(--li-danger-rgb), 0.12); }
.li-edge-warning      { --li-edge-bright: rgba(var(--li-warning-rgb), 0.85);      --li-edge-dim: rgba(var(--li-warning-rgb), 0.12); }
.li-edge-visible      { --li-edge-bright: rgba(var(--li-visible-rgb), 0.85);      --li-edge-dim: rgba(var(--li-visible-rgb), 0.12); }
.li-edge-info         { --li-edge-bright: rgba(var(--li-info-rgb), 0.85);         --li-edge-dim: rgba(var(--li-info-rgb), 0.12); }
.li-edge-personalized1{ --li-edge-bright: rgba(var(--li-personalized1-rgb), 0.85);--li-edge-dim: rgba(var(--li-personalized1-rgb), 0.12); }
.li-edge-personalized2{ --li-edge-bright: rgba(var(--li-personalized2-rgb), 0.85);--li-edge-dim: rgba(var(--li-personalized2-rgb), 0.12); }

/* An edge that is three colours instead of two, for the one element on a page
   that is allowed to show off. */
.li-edge-iris::before {
    background: conic-gradient(from 210deg,
        rgba(var(--li-primary-rgb), 0.75),
        rgba(var(--li-personalized1-rgb), 0.75),
        rgba(var(--li-personalized2-rgb), 0.75),
        rgba(var(--li-info-rgb), 0.75),
        rgba(var(--li-primary-rgb), 0.75));
}

/* ---- tinting a pane ------------------------------------------------------ */
/* .li-tint-* only moves two variables; every component reads them, so one
   class tints a card, a button, a badge and a table row identically. */

.li-tint-primary       { --li-tint-rgb: var(--li-primary-rgb); }
.li-tint-secondary     { --li-tint-rgb: var(--li-secondary-rgb); }
.li-tint-success       { --li-tint-rgb: var(--li-success-rgb); }
.li-tint-danger        { --li-tint-rgb: var(--li-danger-rgb); }
.li-tint-warning       { --li-tint-rgb: var(--li-warning-rgb); }
.li-tint-visible       { --li-tint-rgb: var(--li-visible-rgb); }
.li-tint-info          { --li-tint-rgb: var(--li-info-rgb); }
.li-tint-light         { --li-tint-rgb: var(--li-light-rgb); }
.li-tint-dark          { --li-tint-rgb: var(--li-dark-rgb); }
.li-tint-personalized1 { --li-tint-rgb: var(--li-personalized1-rgb); }
.li-tint-personalized2 { --li-tint-rgb: var(--li-personalized2-rgb); }

[class*="li-tint-"] {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-tint-rgb, var(--li-primary-rgb)), var(--li-tint-strong)),
        rgba(var(--li-tint-rgb, var(--li-primary-rgb)), var(--li-tint-weak)));
    --li-edge-bright: rgba(var(--li-tint-rgb, var(--li-primary-rgb)), 0.65);
    --li-edge-dim: rgba(var(--li-tint-rgb, var(--li-primary-rgb)), 0.10);
}

/* ---- motion on hover ----------------------------------------------------- */

.li-lift {
    transition: transform var(--li-duration) var(--li-ease),
                box-shadow var(--li-duration) var(--li-ease);
}

.li-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--li-shadow-lg), var(--li-shadow-inset);
}

/* A light that follows the pointer. The two custom properties are set by
   script.js; without it the value stays at the centre and nothing moves. */
.li-glow::after {
    background:
        radial-gradient(22rem 22rem at var(--li-pointer-x, 50%) var(--li-pointer-y, 50%),
            rgba(var(--li-sheen-rgb), 0.20), transparent 60%),
        radial-gradient(120% 80% at 6% -8%,
            rgba(var(--li-sheen-rgb), 0.28), transparent 55%);
    transition: background var(--li-duration-fast) linear;
}

/* ===========================================================================
   6. LAYOUT
   =========================================================================== */

.li-container,
.li-container-fluid,
.li-container-sm,
.li-container-md,
.li-container-lg,
.li-container-xl {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: calc(var(--li-gutter) * 0.5);
    padding-left: calc(var(--li-gutter) * 0.5);
}

@media (min-width: 576px)  { .li-container, .li-container-sm { max-width: var(--li-container-sm); } }
@media (min-width: 768px)  { .li-container, .li-container-sm, .li-container-md { max-width: var(--li-container-md); } }
@media (min-width: 992px)  { .li-container, .li-container-sm, .li-container-md, .li-container-lg { max-width: var(--li-container-lg); } }
@media (min-width: 1200px) { .li-container, .li-container-sm, .li-container-md, .li-container-lg, .li-container-xl { max-width: var(--li-container-xl); } }
@media (min-width: 1400px) { .li-container { max-width: var(--li-container-2xl); } }

/* ---- the twelve columns --------------------------------------------------
   Gutters are padding on the column and a matching negative margin on the row,
   which is the only arrangement where a column's width is exactly its share of
   the row no matter how many gutters are in play. */

.li-row {
    --li-gutter-x: var(--li-gutter);
    --li-gutter-y: 0rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--li-gutter-y) * -1);
    margin-right: calc(var(--li-gutter-x) * -0.5);
    margin-left: calc(var(--li-gutter-x) * -0.5);
}

.li-row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--li-gutter-x) * 0.5);
    padding-left: calc(var(--li-gutter-x) * 0.5);
    margin-top: var(--li-gutter-y);
}

.li-g-0  { --li-gutter-x: 0rem;    --li-gutter-y: 0rem; }
.li-g-1  { --li-gutter-x: 0.25rem; --li-gutter-y: 0.25rem; }
.li-g-2  { --li-gutter-x: 0.5rem;  --li-gutter-y: 0.5rem; }
.li-g-3  { --li-gutter-x: 1rem;    --li-gutter-y: 1rem; }
.li-g-4  { --li-gutter-x: 1.5rem;  --li-gutter-y: 1.5rem; }
.li-g-5  { --li-gutter-x: 3rem;    --li-gutter-y: 3rem; }
.li-gx-0 { --li-gutter-x: 0rem; }  .li-gy-0 { --li-gutter-y: 0rem; }
.li-gx-3 { --li-gutter-x: 1rem; }  .li-gy-3 { --li-gutter-y: 1rem; }
.li-gx-4 { --li-gutter-x: 1.5rem; }.li-gy-4 { --li-gutter-y: 1.5rem; }
.li-gx-5 { --li-gutter-x: 3rem; }  .li-gy-5 { --li-gutter-y: 3rem; }

.li-col { flex: 1 0 0%; }
.li-col-auto { flex: 0 0 auto; width: auto; }
.li-col-1  { flex: 0 0 auto; width: 8.33333333%; }
.li-col-2  { flex: 0 0 auto; width: 16.66666667%; }
.li-col-3  { flex: 0 0 auto; width: 25%; }
.li-col-4  { flex: 0 0 auto; width: 33.33333333%; }
.li-col-5  { flex: 0 0 auto; width: 41.66666667%; }
.li-col-6  { flex: 0 0 auto; width: 50%; }
.li-col-7  { flex: 0 0 auto; width: 58.33333333%; }
.li-col-8  { flex: 0 0 auto; width: 66.66666667%; }
.li-col-9  { flex: 0 0 auto; width: 75%; }
.li-col-10 { flex: 0 0 auto; width: 83.33333333%; }
.li-col-11 { flex: 0 0 auto; width: 91.66666667%; }
.li-col-12 { flex: 0 0 auto; width: 100%; }

.li-row-cols-1  > * { flex: 0 0 auto; width: 100%; }
.li-row-cols-2  > * { flex: 0 0 auto; width: 50%; }
.li-row-cols-3  > * { flex: 0 0 auto; width: 33.33333333%; }
.li-row-cols-4  > * { flex: 0 0 auto; width: 25%; }
.li-row-cols-5  > * { flex: 0 0 auto; width: 20%; }
.li-row-cols-6  > * { flex: 0 0 auto; width: 16.66666667%; }
.li-row-cols-auto > * { flex: 0 0 auto; width: auto; }

.li-offset-0  { margin-left: 0; }
.li-offset-1  { margin-left: 8.33333333%; }
.li-offset-2  { margin-left: 16.66666667%; }
.li-offset-3  { margin-left: 25%; }
.li-offset-4  { margin-left: 33.33333333%; }
.li-offset-5  { margin-left: 41.66666667%; }
.li-offset-6  { margin-left: 50%; }
.li-offset-7  { margin-left: 58.33333333%; }
.li-offset-8  { margin-left: 66.66666667%; }
.li-offset-9  { margin-left: 75%; }
.li-offset-10 { margin-left: 83.33333333%; }
.li-offset-11 { margin-left: 91.66666667%; }

.li-order-first { order: -1; }
.li-order-last  { order: 13; }
.li-order-0 { order: 0; } .li-order-1 { order: 1; } .li-order-2 { order: 2; }
.li-order-3 { order: 3; } .li-order-4 { order: 4; } .li-order-5 { order: 5; }

@media (min-width: 576px) {
    .li-col-sm { flex: 1 0 0%; }
    .li-col-sm-auto { flex: 0 0 auto; width: auto; }
    .li-col-sm-1  { flex: 0 0 auto; width: 8.33333333%; }
    .li-col-sm-2  { flex: 0 0 auto; width: 16.66666667%; }
    .li-col-sm-3  { flex: 0 0 auto; width: 25%; }
    .li-col-sm-4  { flex: 0 0 auto; width: 33.33333333%; }
    .li-col-sm-5  { flex: 0 0 auto; width: 41.66666667%; }
    .li-col-sm-6  { flex: 0 0 auto; width: 50%; }
    .li-col-sm-7  { flex: 0 0 auto; width: 58.33333333%; }
    .li-col-sm-8  { flex: 0 0 auto; width: 66.66666667%; }
    .li-col-sm-9  { flex: 0 0 auto; width: 75%; }
    .li-col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
    .li-col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
    .li-col-sm-12 { flex: 0 0 auto; width: 100%; }
    .li-row-cols-sm-1 > * { width: 100%; } .li-row-cols-sm-2 > * { width: 50%; }
    .li-row-cols-sm-3 > * { width: 33.33333333%; } .li-row-cols-sm-4 > * { width: 25%; }
    .li-offset-sm-0 { margin-left: 0; }
    .li-offset-sm-1 { margin-left: 8.33333333%; }
    .li-offset-sm-2 { margin-left: 16.66666667%; }
    .li-offset-sm-3 { margin-left: 25%; }
    .li-offset-sm-4 { margin-left: 33.33333333%; }
    .li-offset-sm-6 { margin-left: 50%; }
}

@media (min-width: 768px) {
    .li-col-md { flex: 1 0 0%; }
    .li-col-md-auto { flex: 0 0 auto; width: auto; }
    .li-col-md-1  { flex: 0 0 auto; width: 8.33333333%; }
    .li-col-md-2  { flex: 0 0 auto; width: 16.66666667%; }
    .li-col-md-3  { flex: 0 0 auto; width: 25%; }
    .li-col-md-4  { flex: 0 0 auto; width: 33.33333333%; }
    .li-col-md-5  { flex: 0 0 auto; width: 41.66666667%; }
    .li-col-md-6  { flex: 0 0 auto; width: 50%; }
    .li-col-md-7  { flex: 0 0 auto; width: 58.33333333%; }
    .li-col-md-8  { flex: 0 0 auto; width: 66.66666667%; }
    .li-col-md-9  { flex: 0 0 auto; width: 75%; }
    .li-col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
    .li-col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
    .li-col-md-12 { flex: 0 0 auto; width: 100%; }
    .li-row-cols-md-1 > * { width: 100%; } .li-row-cols-md-2 > * { width: 50%; }
    .li-row-cols-md-3 > * { width: 33.33333333%; } .li-row-cols-md-4 > * { width: 25%; }
    .li-offset-md-0 { margin-left: 0; }
    .li-offset-md-1 { margin-left: 8.33333333%; }
    .li-offset-md-2 { margin-left: 16.66666667%; }
    .li-offset-md-3 { margin-left: 25%; }
    .li-offset-md-4 { margin-left: 33.33333333%; }
    .li-offset-md-6 { margin-left: 50%; }
}

@media (min-width: 992px) {
    .li-col-lg { flex: 1 0 0%; }
    .li-col-lg-auto { flex: 0 0 auto; width: auto; }
    .li-col-lg-1  { flex: 0 0 auto; width: 8.33333333%; }
    .li-col-lg-2  { flex: 0 0 auto; width: 16.66666667%; }
    .li-col-lg-3  { flex: 0 0 auto; width: 25%; }
    .li-col-lg-4  { flex: 0 0 auto; width: 33.33333333%; }
    .li-col-lg-5  { flex: 0 0 auto; width: 41.66666667%; }
    .li-col-lg-6  { flex: 0 0 auto; width: 50%; }
    .li-col-lg-7  { flex: 0 0 auto; width: 58.33333333%; }
    .li-col-lg-8  { flex: 0 0 auto; width: 66.66666667%; }
    .li-col-lg-9  { flex: 0 0 auto; width: 75%; }
    .li-col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
    .li-col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
    .li-col-lg-12 { flex: 0 0 auto; width: 100%; }
    .li-row-cols-lg-1 > * { width: 100%; } .li-row-cols-lg-2 > * { width: 50%; }
    .li-row-cols-lg-3 > * { width: 33.33333333%; } .li-row-cols-lg-4 > * { width: 25%; }
    .li-row-cols-lg-6 > * { width: 16.66666667%; }
    .li-offset-lg-0 { margin-left: 0; }
    .li-offset-lg-1 { margin-left: 8.33333333%; }
    .li-offset-lg-2 { margin-left: 16.66666667%; }
    .li-offset-lg-3 { margin-left: 25%; }
    .li-offset-lg-4 { margin-left: 33.33333333%; }
    .li-offset-lg-6 { margin-left: 50%; }
}

@media (min-width: 1200px) {
    .li-col-xl { flex: 1 0 0%; }
    .li-col-xl-auto { flex: 0 0 auto; width: auto; }
    .li-col-xl-1  { flex: 0 0 auto; width: 8.33333333%; }
    .li-col-xl-2  { flex: 0 0 auto; width: 16.66666667%; }
    .li-col-xl-3  { flex: 0 0 auto; width: 25%; }
    .li-col-xl-4  { flex: 0 0 auto; width: 33.33333333%; }
    .li-col-xl-5  { flex: 0 0 auto; width: 41.66666667%; }
    .li-col-xl-6  { flex: 0 0 auto; width: 50%; }
    .li-col-xl-7  { flex: 0 0 auto; width: 58.33333333%; }
    .li-col-xl-8  { flex: 0 0 auto; width: 66.66666667%; }
    .li-col-xl-9  { flex: 0 0 auto; width: 75%; }
    .li-col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .li-col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .li-col-xl-12 { flex: 0 0 auto; width: 100%; }
    .li-row-cols-xl-3 > * { width: 33.33333333%; } .li-row-cols-xl-4 > * { width: 25%; }
    .li-row-cols-xl-6 > * { width: 16.66666667%; }
    .li-offset-xl-0 { margin-left: 0; }
    .li-offset-xl-2 { margin-left: 16.66666667%; }
    .li-offset-xl-3 { margin-left: 25%; }
}

/* ---- stacks and rules ---------------------------------------------------- */

.li-hstack { display: flex; flex-direction: row; align-items: center; align-self: stretch; }
.li-vstack { display: flex; flex-direction: column; flex: 1 1 auto; align-self: stretch; }

.li-vr {
    display: inline-block;
    align-self: stretch;
    width: 1px;
    min-height: 1em;
    background: linear-gradient(180deg, transparent,
        rgba(var(--li-text-rgb), 0.35), transparent);
}

/* ---- aspect ratios ------------------------------------------------------- */

.li-ratio { position: relative; width: 100%; }
.li-ratio::before { display: block; padding-top: var(--li-aspect, 100%); content: ''; }
.li-ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.li-ratio-1x1  { --li-aspect: 100%; }
.li-ratio-4x3  { --li-aspect: 75%; }
.li-ratio-16x9 { --li-aspect: 56.25%; }
.li-ratio-21x9 { --li-aspect: 42.857143%; }

/* ===========================================================================
   7. BUTTONS
   ---------------------------------------------------------------------------
   A LiquidIce button is not a coloured rectangle. It is the same pane of glass
   as everything else, tinted with the colour it stands for, so it belongs to
   the surface it sits on instead of being stamped onto it.
   =========================================================================== */

.li-btn {
    --li-btn-rgb: var(--li-secondary-rgb);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--li-spacing-2);
    padding: var(--li-spacing-3) var(--li-spacing-6);
    border: 0;
    border-radius: var(--li-radius-md);
    font-size: var(--li-font-size-md);
    font-weight: var(--li-font-weight-semibold);
    line-height: 1.25;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-align: center;
    text-decoration: none !important;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    color: var(--li-text-color);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-btn-rgb), var(--li-tint-strong)),
        rgba(var(--li-btn-rgb), var(--li-tint-weak)));
    backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    box-shadow: var(--li-shadow-sm), var(--li-shadow-inset);
    transition: background var(--li-duration-fast) var(--li-ease),
                box-shadow var(--li-duration-fast) var(--li-ease),
                transform var(--li-duration-fast) var(--li-ease),
                color var(--li-duration-fast) var(--li-ease);
    -webkit-appearance: none;
    appearance: none;
}

.li-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: var(--li-edge-width);
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(var(--li-edge-angle),
        rgba(var(--li-btn-rgb), 0.75) 0%,
        rgba(var(--li-btn-rgb), 0.10) 45%,
        rgba(var(--li-sheen-rgb), 0.40) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.li-btn > * { position: relative; z-index: 1; }

.li-btn:hover {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-btn-rgb), var(--li-tint-hover)),
        rgba(var(--li-btn-rgb), calc(var(--li-tint-weak) + 0.06)));
    box-shadow: var(--li-shadow), var(--li-shadow-inset),
                0 0 0 1px rgba(var(--li-btn-rgb), 0.12);
    transform: translateY(-1px);
    color: var(--li-text-color);
}

.li-btn:active {
    transform: translateY(1px);
    box-shadow: var(--li-shadow-xs),
                inset 0 2px 6px rgba(var(--li-shadow-rgb), 0.18);
}

.li-btn:focus-visible {
    outline: 0;
    box-shadow: var(--li-shadow-sm), var(--li-shadow-inset),
                0 0 0 4px rgba(var(--li-btn-rgb), 0.32);
}

.li-btn:disabled,
.li-btn.li-disabled,
fieldset:disabled .li-btn {
    opacity: 0.5;
    pointer-events: none;
    box-shadow: none;
}

.li-btn-primary       { --li-btn-rgb: var(--li-primary-rgb); }
.li-btn-secondary     { --li-btn-rgb: var(--li-secondary-rgb); }
.li-btn-success       { --li-btn-rgb: var(--li-success-rgb); }
.li-btn-danger        { --li-btn-rgb: var(--li-danger-rgb); }
.li-btn-warning       { --li-btn-rgb: var(--li-warning-rgb); }
.li-btn-visible       { --li-btn-rgb: var(--li-visible-rgb); }
.li-btn-info          { --li-btn-rgb: var(--li-info-rgb); }
.li-btn-light         { --li-btn-rgb: var(--li-light-rgb); }
.li-btn-dark          { --li-btn-rgb: var(--li-dark-rgb); }
.li-btn-personalized1 { --li-btn-rgb: var(--li-personalized1-rgb); }
.li-btn-personalized2 { --li-btn-rgb: var(--li-personalized2-rgb); }

/* The plain pane, with no colour in it at all. */
.li-btn-liquid-ice,
.li-btn-glass {
    --li-btn-rgb: var(--li-sheen-rgb);
    background: linear-gradient(var(--li-surface-angle),
        var(--li-surface-top), var(--li-surface-bottom));
    backdrop-filter: blur(var(--li-blur)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur)) saturate(var(--li-saturate));
}

html.dark .li-btn-liquid-ice,
html.dark .li-btn-glass { --li-btn-rgb: var(--li-sheen-rgb); }

/* Outline: the tint drops away and only the rim keeps the colour. */
.li-btn-outline {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-btn-rgb), 0.06),
        rgba(var(--li-btn-rgb), 0.01));
    color: rgb(var(--li-btn-rgb));
}

.li-btn-outline:hover {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-btn-rgb), var(--li-tint-strong)),
        rgba(var(--li-btn-rgb), var(--li-tint-weak)));
    color: var(--li-text-color);
}

/* Ghost: no pane at all until the pointer arrives. */
.li-btn-ghost {
    background: transparent;
    box-shadow: none;
    color: rgb(var(--li-btn-rgb));
}

.li-btn-ghost::before { opacity: 0; transition: opacity var(--li-duration-fast) var(--li-ease); }
.li-btn-ghost:hover::before { opacity: 1; }

.li-btn-ghost:hover {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-btn-rgb), var(--li-tint-weak)),
        rgba(var(--li-btn-rgb), 0.03));
    box-shadow: var(--li-shadow-sm);
}

.li-btn-link {
    background: transparent;
    box-shadow: none;
    padding-left: var(--li-spacing-2);
    padding-right: var(--li-spacing-2);
    color: rgb(var(--li-primary-rgb));
    text-decoration: underline !important;
}

.li-btn-link::before { display: none; }
.li-btn-link:hover { background: transparent; box-shadow: none; transform: none; }

.li-btn-xs { padding: var(--li-spacing-1) var(--li-spacing-3); font-size: var(--li-font-size-xs); border-radius: var(--li-radius-sm); }
.li-btn-sm { padding: var(--li-spacing-2) var(--li-spacing-4); font-size: var(--li-font-size-sm); border-radius: var(--li-radius-sm); }
.li-btn-lg { padding: var(--li-spacing-4) var(--li-spacing-8); font-size: var(--li-font-size-lg); border-radius: var(--li-radius-lg); }
.li-btn-xl { padding: var(--li-spacing-5) var(--li-spacing-10); font-size: var(--li-font-size-xl); border-radius: var(--li-radius-xl); }

.li-btn-pill { border-radius: var(--li-radius-full); }
.li-btn-block { display: flex; width: 100%; }

.li-btn-icon {
    padding: var(--li-spacing-3);
    aspect-ratio: 1;
    border-radius: var(--li-radius-full);
}

.li-btn-icon.li-btn-sm { padding: var(--li-spacing-2); }
.li-btn-icon.li-btn-lg { padding: var(--li-spacing-4); }

/* ---- button groups ------------------------------------------------------- */

.li-btn-group,
.li-btn-group-vertical {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    border-radius: var(--li-radius-md);
}

.li-btn-group > .li-btn { border-radius: 0; }
.li-btn-group > .li-btn:first-child { border-top-left-radius: var(--li-radius-md); border-bottom-left-radius: var(--li-radius-md); }
.li-btn-group > .li-btn:last-child  { border-top-right-radius: var(--li-radius-md); border-bottom-right-radius: var(--li-radius-md); }
.li-btn-group > .li-btn:not(:first-child) { margin-left: -1px; }
.li-btn-group > .li-btn:hover,
.li-btn-group > .li-btn:focus-visible { z-index: 2; }

.li-btn-group-vertical { flex-direction: column; }
.li-btn-group-vertical > .li-btn { border-radius: 0; }
.li-btn-group-vertical > .li-btn:first-child { border-top-left-radius: var(--li-radius-md); border-top-right-radius: var(--li-radius-md); }
.li-btn-group-vertical > .li-btn:last-child  { border-bottom-left-radius: var(--li-radius-md); border-bottom-right-radius: var(--li-radius-md); }
.li-btn-group-vertical > .li-btn:not(:first-child) { margin-top: -1px; }

.li-btn-toolbar { display: flex; flex-wrap: wrap; gap: var(--li-spacing-2); justify-content: flex-start; }

/* A group where only one is on: the checked input drives the pane. */
.li-btn-check { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; }
.li-btn-check:checked + .li-btn {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-btn-rgb), var(--li-tint-hover)),
        rgba(var(--li-btn-rgb), var(--li-tint-strong)));
    box-shadow: inset 0 2px 6px rgba(var(--li-shadow-rgb), 0.16);
}
.li-btn-check:focus-visible + .li-btn { box-shadow: 0 0 0 4px rgba(var(--li-btn-rgb), 0.32); }

/* The close control, shared by alerts, modals, toasts and offcanvas. */
.li-close,
.li-alert-dismiss,
.li-modal-close,
.li-toast-close,
.li-offcanvas-close,
.li-sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--li-radius-full);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.22), rgba(var(--li-sheen-rgb), 0.04));
    color: inherit;
    font-size: var(--li-font-size-xl);
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--li-duration-fast) var(--li-ease),
                background var(--li-duration-fast) var(--li-ease);
    -webkit-appearance: none;
    appearance: none;
}

.li-close::before,
.li-alert-dismiss::before,
.li-modal-close::before,
.li-toast-close::before,
.li-offcanvas-close::before,
.li-sidebar-close::before { content: '\00D7'; }

.li-close:hover,
.li-alert-dismiss:hover,
.li-modal-close:hover,
.li-toast-close:hover,
.li-offcanvas-close:hover,
.li-sidebar-close:hover {
    opacity: 1;
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-danger-rgb), 0.28), rgba(var(--li-danger-rgb), 0.08));
}

/* ===========================================================================
   8. BADGES
   =========================================================================== */

.li-badge {
    --li-badge-rgb: var(--li-secondary-rgb);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--li-spacing-1);
    padding: 0.28em 0.7em;
    border-radius: var(--li-radius-sm);
    font-size: var(--li-font-size-xs);
    font-weight: var(--li-font-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--li-text-color);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-badge-rgb), 0.34),
        rgba(var(--li-badge-rgb), 0.12));
    backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    box-shadow: inset 0 0 0 1px rgba(var(--li-badge-rgb), 0.30);
}

.li-badge-primary       { --li-badge-rgb: var(--li-primary-rgb); }
.li-badge-secondary     { --li-badge-rgb: var(--li-secondary-rgb); }
.li-badge-success       { --li-badge-rgb: var(--li-success-rgb); }
.li-badge-danger        { --li-badge-rgb: var(--li-danger-rgb); }
.li-badge-warning       { --li-badge-rgb: var(--li-warning-rgb); }
.li-badge-visible       { --li-badge-rgb: var(--li-visible-rgb); }
.li-badge-info          { --li-badge-rgb: var(--li-info-rgb); }
.li-badge-light         { --li-badge-rgb: var(--li-light-rgb); }
.li-badge-dark          { --li-badge-rgb: var(--li-dark-rgb); }
.li-badge-personalized1 { --li-badge-rgb: var(--li-personalized1-rgb); }
.li-badge-personalized2 { --li-badge-rgb: var(--li-personalized2-rgb); }
.li-badge-liquid-ice    { --li-badge-rgb: var(--li-sheen-rgb); }

.li-badge-pill { border-radius: var(--li-radius-full); padding-left: 0.8em; padding-right: 0.8em; }
.li-badge-dot  { width: 0.6em; height: 0.6em; padding: 0; border-radius: var(--li-radius-full); }

.li-badge-positioned {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(35%, -35%);
}

/* ===========================================================================
   9. ALERTS
   =========================================================================== */

.li-alert {
    --li-alert-rgb: var(--li-primary-rgb);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--li-spacing-3);
    padding: var(--li-spacing-5) var(--li-spacing-6);
    margin-bottom: var(--li-spacing-4);
    border: 0;
    border-radius: var(--li-radius-lg);
    font-size: var(--li-font-size-md);
    line-height: var(--li-interline-base);
    text-align: left;
    color: var(--li-text-color);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-alert-rgb), 0.22),
        rgba(var(--li-alert-rgb), 0.07));
    backdrop-filter: blur(var(--li-blur)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur)) saturate(var(--li-saturate));
    box-shadow: var(--li-shadow-sm), var(--li-shadow-inset);
    transition: opacity var(--li-duration) var(--li-ease),
                transform var(--li-duration) var(--li-ease);
}

/* The rim carries the meaning; the pane only hints at it. */
.li-alert::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: var(--li-edge-width);
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(var(--li-edge-angle),
        rgba(var(--li-alert-rgb), 0.85) 0%,
        rgba(var(--li-alert-rgb), 0.12) 50%,
        rgba(var(--li-sheen-rgb), 0.45) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.li-alert > * { position: relative; z-index: 1; }
.li-alert strong { font-weight: var(--li-font-weight-bold); flex-shrink: 0; }
.li-alert p:last-child { margin-bottom: 0; }
.li-alert .li-alert-dismiss { margin-left: auto; flex-shrink: 0; }

.li-alert-heading {
    margin: 0 0 var(--li-spacing-2);
    font-size: var(--li-font-size-lg);
    font-weight: var(--li-font-weight-bold);
    color: rgb(var(--li-alert-rgb));
}

.li-alert-link { color: rgb(var(--li-alert-rgb)); font-weight: var(--li-font-weight-semibold); }

.li-alert-primary       { --li-alert-rgb: var(--li-primary-rgb); }
.li-alert-secondary     { --li-alert-rgb: var(--li-secondary-rgb); }
.li-alert-success       { --li-alert-rgb: var(--li-success-rgb); }
.li-alert-danger        { --li-alert-rgb: var(--li-danger-rgb); }
.li-alert-warning       { --li-alert-rgb: var(--li-warning-rgb); }
.li-alert-visible       { --li-alert-rgb: var(--li-visible-rgb); }
.li-alert-info          { --li-alert-rgb: var(--li-info-rgb); }
.li-alert-light         { --li-alert-rgb: var(--li-light-rgb); }
.li-alert-dark          { --li-alert-rgb: var(--li-dark-rgb); }
.li-alert-personalized1 { --li-alert-rgb: var(--li-personalized1-rgb); }
.li-alert-personalized2 { --li-alert-rgb: var(--li-personalized2-rgb); }
.li-alert-liquid-ice    { --li-alert-rgb: var(--li-sheen-rgb); }

.li-alert.li-fade-out { opacity: 0; transform: translateY(-6px); }

/* ===========================================================================
   10. CARDS
   =========================================================================== */

.li-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: var(--li-spacing-7);
    border-radius: var(--li-radius-2xl);
    font-size: var(--li-font-size-base);
    line-height: var(--li-interline-base);
    color: var(--li-text-color);
    transition: transform var(--li-duration) var(--li-ease),
                box-shadow var(--li-duration) var(--li-ease);
}

/* A bare .li-card is glass too, so it never needs .liquid-ice beside it —
   though putting it there changes nothing, which keeps old markup working. */
.li-card:not(.liquid-ice):not(.li-glass) {
    background: linear-gradient(var(--li-surface-angle),
        var(--li-surface-top), var(--li-surface-bottom));
    backdrop-filter: blur(var(--li-blur)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur)) saturate(var(--li-saturate));
    box-shadow: var(--li-shadow), var(--li-shadow-inset);
}

.li-card:not(.liquid-ice):not(.li-glass)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: var(--li-edge-width);
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(var(--li-edge-angle),
        var(--li-edge-bright) 0%, var(--li-edge-dim) 40%,
        var(--li-edge-dim) 60%, var(--li-edge-bright) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.li-card > * { position: relative; z-index: 1; }

.li-card-header {
    margin: calc(var(--li-spacing-7) * -1) calc(var(--li-spacing-7) * -1) var(--li-spacing-5);
    padding: var(--li-spacing-5) var(--li-spacing-7);
    font-size: var(--li-font-size-xl);
    font-weight: var(--li-font-weight-bold);
    text-align: left;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent,
        rgba(var(--li-sheen-rgb), 0.45) 20%,
        rgba(var(--li-sheen-rgb), 0.45) 80%, transparent) 1;
    background: linear-gradient(180deg,
        rgba(var(--li-sheen-rgb), 0.12), transparent);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

html.dark .li-card-header {
    border-image: linear-gradient(90deg, transparent,
        rgba(var(--li-sheen-rgb), 0.16) 20%,
        rgba(var(--li-sheen-rgb), 0.16) 80%, transparent) 1;
    background: linear-gradient(180deg, rgba(var(--li-sheen-rgb), 0.05), transparent);
}

.li-card-title { margin: 0 0 var(--li-spacing-2); font-size: var(--li-font-size-xl); font-weight: var(--li-font-weight-bold); }
.li-card-subtitle { margin: calc(var(--li-spacing-1) * -1) 0 var(--li-spacing-3); font-size: var(--li-font-size-sm); color: var(--li-text-muted); }
.li-card-text { margin-bottom: var(--li-spacing-3); }
.li-card-text:last-child { margin-bottom: 0; }
.li-card-body { flex: 1 1 auto; margin-bottom: var(--li-spacing-4); }
.li-card-body > p:last-child { margin-bottom: 0; }

.li-card-footer {
    margin: var(--li-spacing-5) calc(var(--li-spacing-7) * -1) calc(var(--li-spacing-7) * -1);
    padding: var(--li-spacing-4) var(--li-spacing-7);
    margin-top: auto;
    font-size: var(--li-font-size-sm);
    text-align: right;
    color: var(--li-text-muted);
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent,
        rgba(var(--li-sheen-rgb), 0.40) 20%,
        rgba(var(--li-sheen-rgb), 0.40) 80%, transparent) 1;
    background: linear-gradient(0deg, rgba(var(--li-sheen-rgb), 0.10), transparent);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

html.dark .li-card-footer {
    border-image: linear-gradient(90deg, transparent,
        rgba(var(--li-sheen-rgb), 0.14) 20%,
        rgba(var(--li-sheen-rgb), 0.14) 80%, transparent) 1;
    background: linear-gradient(0deg, rgba(var(--li-sheen-rgb), 0.04), transparent);
}

.li-card-img,
.li-card-img-top {
    width: calc(100% + var(--li-spacing-7) * 2);
    margin: calc(var(--li-spacing-7) * -1) calc(var(--li-spacing-7) * -1) var(--li-spacing-5);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    object-fit: cover;
}

.li-card-img-bottom {
    width: calc(100% + var(--li-spacing-7) * 2);
    margin: var(--li-spacing-5) calc(var(--li-spacing-7) * -1) calc(var(--li-spacing-7) * -1);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    object-fit: cover;
}

.li-card-img-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--li-spacing-6);
    border-radius: inherit;
    background: linear-gradient(0deg,
        rgba(var(--li-shade-rgb), 0.72), rgba(var(--li-shade-rgb), 0.10) 60%, transparent);
    color: #fff;
}

.li-card-link:not(:last-child) { margin-right: var(--li-spacing-4); }

.li-card-group { display: flex; flex-flow: row wrap; gap: var(--li-gutter); }
.li-card-group > .li-card { flex: 1 0 0%; }

/* ===========================================================================
   11. LIST GROUP
   =========================================================================== */

.li-list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: var(--li-radius-lg);
    overflow: hidden;
}

.li-list-group-item {
    --li-item-rgb: var(--li-sheen-rgb);
    position: relative;
    display: block;
    padding: var(--li-spacing-4) var(--li-spacing-5);
    margin-bottom: 0;
    color: var(--li-text-color);
    text-decoration: none;
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-item-rgb), 0.16), rgba(var(--li-item-rgb), 0.05));
    backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    transition: background var(--li-duration-fast) var(--li-ease);
}

html.dark .li-list-group-item {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-item-rgb), 0.07), rgba(var(--li-item-rgb), 0.02));
}

.li-list-group-item + .li-list-group-item {
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent,
        rgba(var(--li-sheen-rgb), 0.32), transparent) 1;
}

html.dark .li-list-group-item + .li-list-group-item {
    border-image: linear-gradient(90deg, transparent,
        rgba(var(--li-sheen-rgb), 0.12), transparent) 1;
}

a.li-list-group-item:hover,
button.li-list-group-item:hover {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.18), rgba(var(--li-primary-rgb), 0.05));
    text-decoration: none;
}

.li-list-group-item.li-active {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.34), rgba(var(--li-primary-rgb), 0.12));
    box-shadow: inset 3px 0 0 rgba(var(--li-primary-rgb), 0.9);
    font-weight: var(--li-font-weight-semibold);
}

.li-list-group-item.li-disabled { opacity: 0.5; pointer-events: none; }

.li-list-group-flush { border-radius: 0; }
.li-list-group-flush .li-list-group-item { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

.li-list-group-numbered { list-style: none; counter-reset: li-lg; }
.li-list-group-numbered > .li-list-group-item::before {
    counter-increment: li-lg;
    content: counter(li-lg) '. ';
    font-variant-numeric: tabular-nums;
    color: var(--li-text-muted);
}

.li-list-group-horizontal { flex-direction: row; }
.li-list-group-horizontal > .li-list-group-item + .li-list-group-item {
    border-top: 0;
    border-left: 1px solid transparent;
    border-image: linear-gradient(180deg, transparent,
        rgba(var(--li-sheen-rgb), 0.32), transparent) 1;
}

/* ===========================================================================
   12. TABLES
   =========================================================================== */

.li-table {
    width: 100%;
    margin-bottom: var(--li-spacing-4);
    color: var(--li-text-color);
    vertical-align: middle;
    border-collapse: separate;
    border-spacing: 0;
}

.li-table > thead {
    background: linear-gradient(180deg,
        rgba(var(--li-sheen-rgb), 0.30), rgba(var(--li-sheen-rgb), 0.08));
}

html.dark .li-table > thead {
    background: linear-gradient(180deg,
        rgba(var(--li-sheen-rgb), 0.10), rgba(var(--li-sheen-rgb), 0.02));
}

.li-table > thead th {
    padding: var(--li-spacing-3) var(--li-spacing-4);
    font-size: var(--li-font-size-sm);
    font-weight: var(--li-font-weight-semibold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: left;
    color: var(--li-text-muted);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent,
        rgba(var(--li-sheen-rgb), 0.45), transparent) 1;
    white-space: nowrap;
}

.li-table > tbody td,
.li-table > tbody th {
    padding: var(--li-spacing-3) var(--li-spacing-4);
    border-top: 1px solid rgba(var(--li-text-rgb), 0.08);
}

html.dark .li-table > tbody td,
html.dark .li-table > tbody th { border-top-color: rgba(var(--li-sheen-rgb), 0.08); }

.li-table > tbody tr { transition: background var(--li-duration-fast) var(--li-ease); }

.li-table-hover > tbody tr:hover {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.12), rgba(var(--li-primary-rgb), 0.03));
}

.li-table-striped > tbody tr:nth-of-type(odd) {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.14), rgba(var(--li-sheen-rgb), 0.04));
}

html.dark .li-table-striped > tbody tr:nth-of-type(odd) {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.05), rgba(var(--li-sheen-rgb), 0.015));
}

.li-table-sm > thead th,
.li-table-sm > tbody td,
.li-table-sm > tbody th { padding: var(--li-spacing-2) var(--li-spacing-3); }

.li-table-borderless > tbody td,
.li-table-borderless > tbody th,
.li-table-borderless > thead th { border: 0; }

.li-table tfoot td {
    padding: var(--li-spacing-3) var(--li-spacing-4);
    font-weight: var(--li-font-weight-semibold);
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent,
        rgba(var(--li-sheen-rgb), 0.40), transparent) 1;
}

.li-table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.li-table-glass {
    border-radius: var(--li-radius-lg);
    overflow: hidden;
    background: linear-gradient(var(--li-surface-angle),
        var(--li-surface-top), var(--li-surface-bottom));
    backdrop-filter: blur(var(--li-blur)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur)) saturate(var(--li-saturate));
    box-shadow: var(--li-shadow), var(--li-shadow-inset);
}

.li-table-row-primary > td { background: rgba(var(--li-primary-rgb), 0.12); }
.li-table-row-success > td { background: rgba(var(--li-success-rgb), 0.12); }
.li-table-row-danger  > td { background: rgba(var(--li-danger-rgb), 0.12); }
.li-table-row-warning > td { background: rgba(var(--li-warning-rgb), 0.14); }
.li-table-row-info    > td { background: rgba(var(--li-info-rgb), 0.12); }

/* ===========================================================================
   13. NAVBAR
   =========================================================================== */

.li-navbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--li-z-navbar);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--li-spacing-4);
    width: 100%;
    padding: var(--li-spacing-3) var(--li-spacing-5);
    border-radius: 0;
    background: linear-gradient(180deg,
        rgba(var(--li-sheen-rgb), 0.62), rgba(var(--li-sheen-rgb), 0.28));
    backdrop-filter: blur(var(--li-blur-lg)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-lg)) saturate(var(--li-saturate));
    box-shadow: 0 6px 24px -12px rgba(var(--li-shadow-rgb), 0.30);
}

html.dark .li-navbar {
    background: linear-gradient(180deg,
        rgba(var(--li-sheen-rgb), 0.09), rgba(var(--li-sheen-rgb), 0.03));
}

/* Only the bottom edge is drawn, and it fades at both ends. */
.li-navbar::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    padding: 0;
    border-radius: 0;
    -webkit-mask: none;
    mask: none;
    background: linear-gradient(90deg, transparent,
        rgba(var(--li-sheen-rgb), 0.75) 15%,
        rgba(var(--li-sheen-rgb), 0.75) 85%, transparent);
}

html.dark .li-navbar::before {
    background: linear-gradient(90deg, transparent,
        rgba(var(--li-sheen-rgb), 0.22) 15%,
        rgba(var(--li-sheen-rgb), 0.22) 85%, transparent);
}

.li-navbar::after { display: none; }

.li-navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--li-spacing-2);
    font-size: var(--li-font-size-xl);
    font-weight: var(--li-font-weight-bold);
    letter-spacing: -0.01em;
    color: var(--li-text-color);
    text-decoration: none;
}

.li-navbar-brand:hover { color: rgb(var(--li-primary-rgb)); text-decoration: none; }
.li-navbar-brand img { height: 1.75rem; width: auto; }

.li-navbar-links {
    display: flex;
    align-items: center;
    gap: var(--li-spacing-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.li-navbar-links li { margin: 0; }

.li-navbar-links a {
    position: relative;
    display: block;
    padding: var(--li-spacing-2) var(--li-spacing-4);
    border-radius: var(--li-radius-md);
    font-weight: var(--li-font-weight-medium);
    color: var(--li-text-color);
    text-decoration: none;
    transition: background var(--li-duration-fast) var(--li-ease),
                color var(--li-duration-fast) var(--li-ease);
}

.li-navbar-links a:hover,
.li-navbar-links a:focus-visible {
    text-decoration: none;
    color: rgb(var(--li-primary-rgb));
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.16), rgba(var(--li-primary-rgb), 0.04));
}

.li-navbar-links a.li-active {
    color: rgb(var(--li-primary-rgb));
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.22), rgba(var(--li-primary-rgb), 0.06));
}

.li-navbar-links a.li-active::after {
    content: '';
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 2px;
    height: 2px;
    border-radius: var(--li-radius-full);
    background: linear-gradient(90deg,
        rgba(var(--li-primary-rgb), 0), rgba(var(--li-primary-rgb), 0.9),
        rgba(var(--li-primary-rgb), 0));
}

.li-navbar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--li-radius-md);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.28), rgba(var(--li-sheen-rgb), 0.06));
    box-shadow: inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.35);
    color: var(--li-text-color);
    font-size: var(--li-font-size-xl);
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.li-navbar-toggle::before { content: '\2630'; }

@media (max-width: 767px) {
    .li-navbar-toggle { display: inline-flex; }
    .li-navbar-links { display: none; }
    .li-navbar-links.li-show {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-top: var(--li-spacing-3);
        padding-top: var(--li-spacing-3);
        border-top: 1px solid rgba(var(--li-sheen-rgb), 0.30);
    }
}

.li-navbar-sticky-shadow { box-shadow: 0 10px 34px -14px rgba(var(--li-shadow-rgb), 0.45); }

/* ===========================================================================
   14. NAVS AND TABS
   =========================================================================== */

.li-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--li-spacing-1);
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.li-nav-link {
    display: block;
    padding: var(--li-spacing-2) var(--li-spacing-4);
    border: 0;
    border-radius: var(--li-radius-md);
    background: transparent;
    color: var(--li-text-muted);
    font-weight: var(--li-font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--li-duration-fast) var(--li-ease),
                color var(--li-duration-fast) var(--li-ease);
}

.li-nav-link:hover { color: var(--li-text-color); text-decoration: none;
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.24), rgba(var(--li-sheen-rgb), 0.06)); }

.li-nav-link.li-active {
    color: rgb(var(--li-primary-rgb));
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.24), rgba(var(--li-primary-rgb), 0.07));
    box-shadow: inset 0 0 0 1px rgba(var(--li-primary-rgb), 0.32);
}

.li-nav-link.li-disabled { opacity: 0.45; pointer-events: none; }

/* Tabs: the strip is a rail of glass and the selected tab is lit from below. */
.li-nav-tabs {
    position: relative;
    gap: 0;
    padding: var(--li-spacing-1);
    border-radius: var(--li-radius-lg);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.20), rgba(var(--li-sheen-rgb), 0.05));
    backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    box-shadow: inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.28);
}

html.dark .li-nav-tabs { box-shadow: inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.10); }

.li-nav-tabs .li-nav-link { border-radius: var(--li-radius-md); }

.li-nav-tabs .li-nav-link.li-active {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.55), rgba(var(--li-sheen-rgb), 0.22));
    color: var(--li-text-color);
    box-shadow: var(--li-shadow-sm), inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.5);
}

html.dark .li-nav-tabs .li-nav-link.li-active {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.14), rgba(var(--li-sheen-rgb), 0.05));
    box-shadow: var(--li-shadow-sm), inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.18);
}

.li-nav-underline { gap: var(--li-spacing-5); border-bottom: 1px solid rgba(var(--li-text-rgb), 0.10); }
.li-nav-underline .li-nav-link { position: relative; padding-left: 0; padding-right: 0; background: none; border-radius: 0; }
.li-nav-underline .li-nav-link:hover { background: none; }
.li-nav-underline .li-nav-link.li-active { background: none; box-shadow: none; }
.li-nav-underline .li-nav-link.li-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    border-radius: var(--li-radius-full);
    background: linear-gradient(90deg,
        rgba(var(--li-primary-rgb), 0.2), rgba(var(--li-primary-rgb), 1),
        rgba(var(--li-personalized2-rgb), 0.6));
}

.li-nav-pills .li-nav-link { border-radius: var(--li-radius-full); }
.li-nav-fill .li-nav-link { flex: 1 1 auto; text-align: center; }
.li-nav-justified > * { flex-basis: 0; flex-grow: 1; text-align: center; }
.li-nav-vertical { flex-direction: column; }

.li-tab-content > .li-tab-pane { display: none; }
.li-tab-content > .li-tab-pane.li-active { display: block; animation: li-fade-in var(--li-duration) var(--li-ease); }

@keyframes li-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ===========================================================================
   15. DROPDOWNS
   =========================================================================== */

.li-dropdown { position: relative; display: inline-block; }

.li-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--li-spacing-2));
    left: 0;
    z-index: var(--li-z-popover);
    display: block;
    min-width: 12rem;
    padding: var(--li-spacing-2);
    margin: 0;
    list-style: none;
    border-radius: var(--li-radius-lg);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.72), rgba(var(--li-sheen-rgb), 0.42));
    backdrop-filter: blur(var(--li-blur-lg)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-lg)) saturate(var(--li-saturate));
    box-shadow: var(--li-shadow-lg), inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top left;
    transition: opacity var(--li-duration-fast) var(--li-ease),
                transform var(--li-duration-fast) var(--li-ease),
                visibility var(--li-duration-fast) var(--li-ease);
}

html.dark .li-dropdown-menu {
    background: linear-gradient(var(--li-surface-angle),
        rgba(30, 38, 54, 0.82), rgba(16, 22, 34, 0.72));
    box-shadow: var(--li-shadow-lg), inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.14);
}

.li-dropdown-menu.li-show,
.li-dropdown.li-show > .li-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.li-dropdown-menu-end { left: auto; right: 0; transform-origin: top right; }
.li-dropdown-menu-up { top: auto; bottom: calc(100% + var(--li-spacing-2)); transform-origin: bottom left; }

.li-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--li-spacing-2);
    width: 100%;
    padding: var(--li-spacing-2) var(--li-spacing-3);
    border: 0;
    border-radius: var(--li-radius-sm);
    background: transparent;
    color: var(--li-text-color);
    font-size: var(--li-font-size-sm);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--li-duration-fast) var(--li-ease);
}

.li-dropdown-item:hover,
.li-dropdown-item:focus-visible {
    text-decoration: none;
    color: var(--li-text-color);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.22), rgba(var(--li-primary-rgb), 0.06));
}

.li-dropdown-item.li-active {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.30), rgba(var(--li-primary-rgb), 0.10));
    font-weight: var(--li-font-weight-semibold);
}

.li-dropdown-item.li-disabled { opacity: 0.45; pointer-events: none; }

.li-dropdown-header {
    padding: var(--li-spacing-2) var(--li-spacing-3);
    font-size: var(--li-font-size-xs);
    font-weight: var(--li-font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--li-text-muted);
}

.li-dropdown-divider {
    height: 1px;
    margin: var(--li-spacing-2) 0;
    border: 0;
    background: linear-gradient(90deg, transparent,
        rgba(var(--li-text-rgb), 0.20), transparent);
}

.li-dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 0.42em;
    height: 0.42em;
    margin-left: 0.5em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    transition: transform var(--li-duration-fast) var(--li-ease);
}

.li-dropdown.li-show > .li-dropdown-toggle::after { transform: translateY(0.1em) rotate(-135deg); }

/* ===========================================================================
   16. BREADCRUMB AND PAGINATION
   =========================================================================== */

.li-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--li-spacing-2);
    padding: var(--li-spacing-2) var(--li-spacing-4);
    margin-bottom: var(--li-spacing-4);
    list-style: none;
    border-radius: var(--li-radius-full);
    font-size: var(--li-font-size-sm);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.22), rgba(var(--li-sheen-rgb), 0.06));
    backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    box-shadow: inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.28);
}

html.dark .li-breadcrumb { box-shadow: inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.10); }

.li-breadcrumb-item { margin: 0; color: var(--li-text-muted); }
.li-breadcrumb-item + .li-breadcrumb-item::before {
    content: '\203A';
    margin-right: var(--li-spacing-2);
    color: var(--li-text-muted);
    opacity: 0.7;
}
.li-breadcrumb-item.li-active { color: var(--li-text-color); font-weight: var(--li-font-weight-medium); }

.li-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--li-spacing-1);
    padding-left: 0;
    list-style: none;
}

.li-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 var(--li-spacing-3);
    border: 0;
    border-radius: var(--li-radius-md);
    color: var(--li-text-color);
    text-decoration: none;
    cursor: pointer;
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.20), rgba(var(--li-sheen-rgb), 0.05));
    backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    box-shadow: inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.28);
    transition: background var(--li-duration-fast) var(--li-ease),
                transform var(--li-duration-fast) var(--li-ease);
}

html.dark .li-page-link { box-shadow: inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.10); }

.li-page-link:hover {
    text-decoration: none;
    transform: translateY(-1px);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.22), rgba(var(--li-primary-rgb), 0.06));
}

.li-page-item.li-active .li-page-link {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.40), rgba(var(--li-primary-rgb), 0.14));
    box-shadow: inset 0 0 0 1px rgba(var(--li-primary-rgb), 0.55);
    font-weight: var(--li-font-weight-semibold);
}

.li-page-item.li-disabled .li-page-link { opacity: 0.4; pointer-events: none; }

/* ===========================================================================
   17. SIDEBAR AND OFFCANVAS
   =========================================================================== */

.li-sidebar,
.li-offcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--li-z-offcanvas);
    display: flex;
    flex-direction: column;
    width: min(320px, 86vw);
    max-width: 100%;
    padding: var(--li-spacing-6);
    overflow-y: auto;
    background: linear-gradient(160deg,
        rgba(var(--li-sheen-rgb), 0.74), rgba(var(--li-sheen-rgb), 0.46));
    backdrop-filter: blur(var(--li-blur-xl)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-xl)) saturate(var(--li-saturate));
    box-shadow: var(--li-shadow-xl);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--li-duration) var(--li-ease),
                visibility var(--li-duration) var(--li-ease);
}

html.dark .li-sidebar,
html.dark .li-offcanvas {
    background: linear-gradient(160deg,
        rgba(24, 31, 46, 0.82), rgba(12, 17, 27, 0.74));
}

.li-sidebar.li-show,
.li-sidebar.show,
.li-offcanvas.li-show { transform: none; visibility: visible; }

.li-offcanvas-end { left: auto; right: 0; transform: translateX(100%); }
.li-offcanvas-top { right: 0; bottom: auto; width: 100%; height: min(50vh, 420px); transform: translateY(-100%); }
.li-offcanvas-bottom { top: auto; right: 0; width: 100%; height: min(50vh, 420px); transform: translateY(100%); }

.li-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--li-spacing-3);
    margin-bottom: var(--li-spacing-4);
    padding-bottom: var(--li-spacing-3);
    border-bottom: 1px solid rgba(var(--li-text-rgb), 0.12);
}

.li-offcanvas-title { margin: 0; font-size: var(--li-font-size-xl); font-weight: var(--li-font-weight-bold); }
.li-offcanvas-body { flex: 1 1 auto; overflow-y: auto; }

.li-sidebar-close,
.li-offcanvas-close { position: absolute; top: var(--li-spacing-4); right: var(--li-spacing-4); }

.li-sidebar-nav { list-style: none; padding: 0; margin: var(--li-spacing-10) 0 0; }
.li-sidebar-nav li { margin-bottom: var(--li-spacing-1); }

.li-sidebar-nav a {
    display: block;
    padding: var(--li-spacing-3) var(--li-spacing-4);
    border-radius: var(--li-radius-md);
    font-size: var(--li-font-size-md);
    font-weight: var(--li-font-weight-medium);
    color: var(--li-text-color);
    text-decoration: none;
    transition: background var(--li-duration-fast) var(--li-ease),
                color var(--li-duration-fast) var(--li-ease);
}

.li-sidebar-nav a:hover,
.li-sidebar-nav a.li-active {
    text-decoration: none;
    color: rgb(var(--li-primary-rgb));
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.20), rgba(var(--li-primary-rgb), 0.05));
}

/* One backdrop, shared by the sidebar, the offcanvas and the modal. */
.li-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--li-z-backdrop);
    background: rgba(var(--li-shade-rgb), 0.42);
    backdrop-filter: blur(6px) saturate(1.2);
    -webkit-backdrop-filter: blur(6px) saturate(1.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--li-duration) var(--li-ease),
                visibility var(--li-duration) var(--li-ease);
}

.li-backdrop.li-show { opacity: 1; visibility: visible; }

/* ===========================================================================
   18. SCROLLSPY HELPERS
   =========================================================================== */

.li-scrollspy-nav .li-nav-link { position: relative; }

.li-scrollspy-nav .li-nav-link.li-active::before {
    content: '';
    position: absolute;
    left: -0.65rem;
    top: 50%;
    width: 3px;
    height: 1.1em;
    transform: translateY(-50%);
    border-radius: var(--li-radius-full);
    background: linear-gradient(180deg,
        rgba(var(--li-primary-rgb), 1), rgba(var(--li-personalized2-rgb), 0.7));
}

/* A card that is itself a link.
   Without this it is an anchor first and a card second: it takes the link
   colour instead of the card's text colour, and underlines the whole card's
   worth of text on hover. A card is a surface — the affordance is the lift,
   not a rule under every line inside it. */
a.li-card,
a.li-card:hover,
a.li-card:focus,
a.li-card:visited {
    color: var(--li-text-color);
    text-decoration: none;
}

a.li-card :where(h1, h2, h3, h4, h5, h6, p, div, span, strong, li) {
    text-decoration: none;
}

.li-sticky-top { position: sticky; top: 5.5rem; z-index: var(--li-z-sticky); }
.li-sticky-bottom { position: sticky; bottom: 0; z-index: var(--li-z-sticky); }

/* A table of contents tall enough to need scrolling of its own.
 *
 * This must be an element *inside* the card, never the card itself: the
 * gradient edge is an absolutely positioned pseudo-element, and an absolutely
 * positioned child of a scroll container scrolls along with the content — so a
 * scrolling card would leave its own rim behind. Scrolling an inner box keeps
 * the frame still and moves only the list.
 *
 * `overscroll-behavior: contain` stops the page from taking over once the list
 * has reached its end, which is what makes a sticky sidebar feel anchored. */
.li-toc {
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ===========================================================================
   19. MODALS
   =========================================================================== */

.li-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--li-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--li-spacing-4);
    background: rgba(var(--li-shade-rgb), 0.44);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--li-duration) var(--li-ease),
                visibility var(--li-duration) var(--li-ease);
}

.li-modal-overlay.li-show,
.li-modal-overlay.show { opacity: 1; visibility: visible; }

.li-modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 34rem;
    max-height: calc(100vh - var(--li-spacing-8));
    overflow-y: auto;
    padding: var(--li-spacing-7);
    border-radius: var(--li-radius-2xl);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.78), rgba(var(--li-sheen-rgb), 0.48));
    backdrop-filter: blur(var(--li-blur-xl)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-xl)) saturate(var(--li-saturate));
    box-shadow: var(--li-shadow-xl), inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.5);
    transform: translateY(18px) scale(0.97);
    opacity: 0;
    transition: transform var(--li-duration) var(--li-ease),
                opacity var(--li-duration) var(--li-ease);
}

html.dark .li-modal-content {
    background: linear-gradient(var(--li-surface-angle),
        rgba(26, 33, 48, 0.86), rgba(14, 19, 30, 0.78));
    box-shadow: var(--li-shadow-xl), inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.14);
}

.li-modal-overlay.li-show .li-modal-content,
.li-modal-overlay.show .li-modal-content { transform: none; opacity: 1; }

.li-modal-sm  .li-modal-content { max-width: 22rem; }
.li-modal-lg  .li-modal-content { max-width: 50rem; }
.li-modal-xl  .li-modal-content { max-width: 68rem; }
.li-modal-full .li-modal-content { max-width: none; width: calc(100vw - var(--li-spacing-8)); height: calc(100vh - var(--li-spacing-8)); max-height: none; }

.li-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--li-spacing-3);
    padding-bottom: var(--li-spacing-4);
    margin-bottom: var(--li-spacing-4);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent,
        rgba(var(--li-text-rgb), 0.16), transparent) 1;
}

.li-modal-header h3,
.li-modal-title { margin: 0; font-size: var(--li-font-size-2xl); font-weight: var(--li-font-weight-bold); text-align: left; }

.li-modal-body { margin-bottom: var(--li-spacing-4); }
.li-modal-body p:last-child { margin-bottom: 0; }

.li-modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--li-spacing-3);
    padding-top: var(--li-spacing-4);
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent,
        rgba(var(--li-text-rgb), 0.16), transparent) 1;
}

/* ===========================================================================
   20. TOASTS
   =========================================================================== */

.li-toast-container {
    position: fixed;
    z-index: var(--li-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--li-spacing-3);
    padding: var(--li-spacing-4);
    pointer-events: none;
}

.li-toast-top-right    { top: 0; right: 0; }
.li-toast-top-left     { top: 0; left: 0; }
.li-toast-bottom-right { bottom: 0; right: 0; flex-direction: column-reverse; }
.li-toast-bottom-left  { bottom: 0; left: 0; flex-direction: column-reverse; }
.li-toast-top-center   { top: 0; left: 50%; transform: translateX(-50%); align-items: center; }

.li-toast {
    --li-toast-rgb: var(--li-primary-rgb);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--li-spacing-3);
    width: min(24rem, calc(100vw - var(--li-spacing-8)));
    padding: var(--li-spacing-4) var(--li-spacing-5);
    border-radius: var(--li-radius-lg);
    pointer-events: auto;
    color: var(--li-text-color);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-toast-rgb), 0.24), rgba(var(--li-sheen-rgb), 0.30));
    backdrop-filter: blur(var(--li-blur-lg)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-lg)) saturate(var(--li-saturate));
    box-shadow: var(--li-shadow-lg), inset 0 0 0 1px rgba(var(--li-toast-rgb), 0.28);
    opacity: 0;
    transform: translateX(14px) scale(0.98);
    transition: opacity var(--li-duration) var(--li-ease),
                transform var(--li-duration) var(--li-ease);
}

html.dark .li-toast {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-toast-rgb), 0.26), rgba(20, 26, 40, 0.80));
}

.li-toast.li-show { opacity: 1; transform: none; }
.li-toast.li-hide { opacity: 0; transform: translateX(14px) scale(0.98); }

.li-toast-primary       { --li-toast-rgb: var(--li-primary-rgb); }
.li-toast-success       { --li-toast-rgb: var(--li-success-rgb); }
.li-toast-danger        { --li-toast-rgb: var(--li-danger-rgb); }
.li-toast-warning       { --li-toast-rgb: var(--li-warning-rgb); }
.li-toast-info          { --li-toast-rgb: var(--li-info-rgb); }
.li-toast-personalized1 { --li-toast-rgb: var(--li-personalized1-rgb); }
.li-toast-personalized2 { --li-toast-rgb: var(--li-personalized2-rgb); }

.li-toast-body { flex: 1 1 auto; font-size: var(--li-font-size-sm); }
.li-toast-title { font-weight: var(--li-font-weight-semibold); margin-bottom: 0.15rem; }
.li-toast-close { margin-left: auto; flex-shrink: 0; width: 1.5rem; height: 1.5rem; font-size: var(--li-font-size-md); }

/* A timer bar that drains, so a toast that vanishes never surprises anyone. */
.li-toast-timer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    border-bottom-left-radius: inherit;
    background: linear-gradient(90deg,
        rgba(var(--li-toast-rgb), 0.9), rgba(var(--li-toast-rgb), 0.3));
    animation: li-toast-drain linear forwards;
}

@keyframes li-toast-drain { from { width: 100%; } to { width: 0; } }

/* ===========================================================================
   21. TOOLTIPS AND POPOVERS
   =========================================================================== */

[data-li-tooltip] { position: relative; }

[data-li-tooltip]::after {
    content: attr(data-li-tooltip);
    position: absolute;
    bottom: calc(100% + var(--li-spacing-2));
    left: 50%;
    z-index: var(--li-z-tooltip);
    padding: var(--li-spacing-2) var(--li-spacing-3);
    border-radius: var(--li-radius-md);
    font-size: var(--li-font-size-sm);
    font-weight: var(--li-font-weight-normal);
    line-height: 1.35;
    white-space: nowrap;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
    pointer-events: none;
    color: var(--li-text-color);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.80), rgba(var(--li-sheen-rgb), 0.55));
    backdrop-filter: blur(var(--li-blur-lg)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-lg)) saturate(var(--li-saturate));
    box-shadow: var(--li-shadow), inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(4px);
    transition: opacity var(--li-duration-fast) var(--li-ease),
                transform var(--li-duration-fast) var(--li-ease),
                visibility var(--li-duration-fast) var(--li-ease);
}

html.dark [data-li-tooltip]::after {
    background: linear-gradient(var(--li-surface-angle),
        rgba(32, 40, 58, 0.90), rgba(18, 24, 36, 0.84));
    box-shadow: var(--li-shadow), inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.16);
}

[data-li-tooltip]:hover::after,
[data-li-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

[data-li-tooltip][data-li-placement="bottom"]::after { bottom: auto; top: calc(100% + var(--li-spacing-2)); transform: translateX(-50%) translateY(-4px); }
[data-li-tooltip][data-li-placement="bottom"]:hover::after { transform: translateX(-50%) translateY(0); }
[data-li-tooltip][data-li-placement="left"]::after { bottom: auto; top: 50%; left: auto; right: calc(100% + var(--li-spacing-2)); transform: translateY(-50%) translateX(4px); }
[data-li-tooltip][data-li-placement="left"]:hover::after { transform: translateY(-50%); }
[data-li-tooltip][data-li-placement="right"]::after { bottom: auto; top: 50%; left: calc(100% + var(--li-spacing-2)); transform: translateY(-50%) translateX(-4px); }
[data-li-tooltip][data-li-placement="right"]:hover::after { transform: translateY(-50%); }
[data-li-tooltip][data-li-wrap]::after { white-space: normal; width: max-content; max-width: 18rem; }

.li-popover {
    position: absolute;
    z-index: var(--li-z-popover);
    width: max-content;
    max-width: 22rem;
    padding: var(--li-spacing-4);
    border-radius: var(--li-radius-lg);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.78), rgba(var(--li-sheen-rgb), 0.52));
    backdrop-filter: blur(var(--li-blur-lg)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-lg)) saturate(var(--li-saturate));
    box-shadow: var(--li-shadow-lg), inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--li-duration-fast) var(--li-ease),
                visibility var(--li-duration-fast) var(--li-ease);
}

html.dark .li-popover {
    background: linear-gradient(var(--li-surface-angle),
        rgba(30, 38, 54, 0.88), rgba(16, 22, 34, 0.80));
    box-shadow: var(--li-shadow-lg), inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.14);
}

.li-popover.li-show { opacity: 1; visibility: visible; }
.li-popover-header { margin-bottom: var(--li-spacing-2); font-weight: var(--li-font-weight-bold); }
.li-popover-body { font-size: var(--li-font-size-sm); }

/* ===========================================================================
   22. ACCORDION AND COLLAPSE
   =========================================================================== */

.li-accordion { display: flex; flex-direction: column; gap: var(--li-spacing-3); }

.li-accordion-item {
    position: relative;
    border-radius: var(--li-radius-lg);
    overflow: hidden;
    background: linear-gradient(var(--li-surface-angle),
        var(--li-surface-top), var(--li-surface-bottom));
    backdrop-filter: blur(var(--li-blur)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur)) saturate(var(--li-saturate));
    box-shadow: var(--li-shadow-sm), inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.30);
}

html.dark .li-accordion-item { box-shadow: var(--li-shadow-sm), inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.10); }

.li-accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--li-spacing-3);
    width: 100%;
    padding: var(--li-spacing-4) var(--li-spacing-5);
    border: 0;
    background: transparent;
    color: var(--li-text-color);
    font-size: var(--li-font-size-md);
    font-weight: var(--li-font-weight-semibold);
    text-align: left;
    cursor: pointer;
    transition: background var(--li-duration-fast) var(--li-ease);
}

.li-accordion-button:hover {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.12), transparent);
}

.li-accordion-button::after {
    content: '';
    flex-shrink: 0;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-0.1em);
    transition: transform var(--li-duration) var(--li-ease);
}

.li-accordion-button[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-0.1em); }

.li-accordion-button[aria-expanded="true"] {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.18), transparent);
    color: rgb(var(--li-primary-rgb));
}

.li-accordion-body { padding: 0 var(--li-spacing-5) var(--li-spacing-5); }

/* Collapse animates the grid track rather than a height, so the content never
   has to be measured and never jumps at the end. */
.li-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--li-duration) var(--li-ease);
}

.li-collapse > * { overflow: hidden; min-height: 0; }
.li-collapse.li-show { grid-template-rows: 1fr; }

.li-collapse:not(.li-show) .li-accordion-body { padding: 0 !important; }
.li-collapse.li-show .li-accordion-body { padding: var(--li-spacing-5) var(--li-spacing-5); }

@supports not (grid-template-rows: 0fr) {
    .li-collapse { display: block; max-height: 0; overflow: hidden; transition: max-height var(--li-duration) var(--li-ease); }
    .li-collapse.li-show { max-height: 60rem; }
}

/* ===========================================================================
   23. CAROUSEL
   =========================================================================== */

.li-carousel { position: relative; overflow: hidden; border-radius: var(--li-radius-2xl); }

.li-carousel-track {
    display: flex;
    transition: transform var(--li-duration-slow) var(--li-ease);
}

.li-carousel-slide { flex: 0 0 100%; min-width: 0; }

.li-carousel-control {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--li-radius-full);
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--li-text-color);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.50), rgba(var(--li-sheen-rgb), 0.20));
    backdrop-filter: blur(var(--li-blur)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur)) saturate(var(--li-saturate));
    box-shadow: var(--li-shadow), inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.5);
    transition: background var(--li-duration-fast) var(--li-ease);
}

.li-carousel-control:hover { background: linear-gradient(var(--li-surface-angle),
    rgba(var(--li-primary-rgb), 0.32), rgba(var(--li-primary-rgb), 0.10)); }

.li-carousel-prev { left: var(--li-spacing-4); }
.li-carousel-next { right: var(--li-spacing-4); }
.li-carousel-prev::before,
.li-carousel-next::before {
    content: '';
    width: 0.55em;
    height: 0.55em;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
}
.li-carousel-prev::before { transform: rotate(-45deg) translate(1px, 1px); }
.li-carousel-next::before { transform: rotate(135deg) translate(1px, 1px); }

.li-carousel-indicators {
    position: absolute;
    left: 50%;
    bottom: var(--li-spacing-4);
    z-index: 2;
    display: flex;
    gap: var(--li-spacing-2);
    padding: var(--li-spacing-2) var(--li-spacing-3);
    margin: 0;
    list-style: none;
    transform: translateX(-50%);
    border-radius: var(--li-radius-full);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.34), rgba(var(--li-sheen-rgb), 0.12));
    backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
}

.li-carousel-indicator {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--li-radius-full);
    background: rgba(var(--li-text-rgb), 0.30);
    cursor: pointer;
    transition: width var(--li-duration) var(--li-ease), background var(--li-duration) var(--li-ease);
}

.li-carousel-indicator.li-active { width: 1.5rem; background: rgba(var(--li-primary-rgb), 0.9); }

/* ===========================================================================
   24. PROGRESS, SPINNERS, PLACEHOLDERS
   =========================================================================== */

.li-progress {
    display: flex;
    height: 0.75rem;
    overflow: hidden;
    border-radius: var(--li-radius-full);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-text-rgb), 0.10), rgba(var(--li-text-rgb), 0.04));
    box-shadow: inset 0 1px 2px rgba(var(--li-shadow-rgb), 0.12);
}

.li-progress-bar {
    --li-bar-rgb: var(--li-primary-rgb);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 100%;
    font-size: var(--li-font-size-xs);
    color: #fff;
    background: linear-gradient(90deg,
        rgba(var(--li-bar-rgb), 0.55), rgba(var(--li-bar-rgb), 0.95));
    transition: width var(--li-duration-slow) var(--li-ease);
}

.li-progress-sm { height: 0.375rem; }
.li-progress-lg { height: 1.25rem; }

.li-progress-bar-primary       { --li-bar-rgb: var(--li-primary-rgb); }
.li-progress-bar-success       { --li-bar-rgb: var(--li-success-rgb); }
.li-progress-bar-danger        { --li-bar-rgb: var(--li-danger-rgb); }
.li-progress-bar-warning       { --li-bar-rgb: var(--li-warning-rgb); }
.li-progress-bar-info          { --li-bar-rgb: var(--li-info-rgb); }
.li-progress-bar-personalized1 { --li-bar-rgb: var(--li-personalized1-rgb); }
.li-progress-bar-personalized2 { --li-bar-rgb: var(--li-personalized2-rgb); }

.li-progress-striped .li-progress-bar {
    background-image: linear-gradient(45deg,
        rgba(255, 255, 255, 0.16) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, 0.16) 50%,
        rgba(255, 255, 255, 0.16) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.li-progress-animated .li-progress-bar { animation: li-progress-slide 1s linear infinite; }

@keyframes li-progress-slide { from { background-position: 1rem 0; } to { background-position: 0 0; } }

.li-spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
    border: 2px solid rgba(var(--li-primary-rgb), 0.18);
    border-top-color: rgba(var(--li-primary-rgb), 0.95);
    border-radius: var(--li-radius-full);
    animation: li-spin 0.7s linear infinite;
}

.li-spinner-sm { width: 1rem; height: 1rem; border-width: 1.5px; }
.li-spinner-lg { width: 2.5rem; height: 2.5rem; border-width: 3px; }

@keyframes li-spin { to { transform: rotate(360deg); } }

.li-spinner-pulse {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--li-radius-full);
    background: rgba(var(--li-primary-rgb), 0.7);
    animation: li-pulse 1s ease-in-out infinite;
}

@keyframes li-pulse {
    0%   { transform: scale(0); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

/* Skeletons: a pane with a light sliding across it, which is the only honest
   way to say "this is glass and there is nothing behind it yet". */
.li-placeholder {
    display: inline-block;
    min-height: 1em;
    border-radius: var(--li-radius-sm);
    background: linear-gradient(90deg,
        rgba(var(--li-text-rgb), 0.08) 25%,
        rgba(var(--li-text-rgb), 0.16) 37%,
        rgba(var(--li-text-rgb), 0.08) 63%);
    background-size: 400% 100%;
    animation: li-placeholder-wave 1.4s ease infinite;
    color: transparent;
    user-select: none;
}

.li-placeholder-line { display: block; width: 100%; height: 0.85em; margin-bottom: var(--li-spacing-2); }
.li-placeholder-w-25 { width: 25%; } .li-placeholder-w-50 { width: 50%; }
.li-placeholder-w-75 { width: 75%; } .li-placeholder-w-100 { width: 100%; }

@keyframes li-placeholder-wave { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ===========================================================================
   25. FOOTER
   =========================================================================== */

.li-footer {
    position: relative;
    margin-top: var(--li-spacing-16);
    padding: var(--li-spacing-10) var(--li-spacing-5);
    font-size: var(--li-font-size-sm);
    line-height: var(--li-interline-base);
    text-align: center;
    color: var(--li-text-muted);
    background: linear-gradient(0deg,
        rgba(var(--li-sheen-rgb), 0.42), rgba(var(--li-sheen-rgb), 0.10));
    backdrop-filter: blur(var(--li-blur-lg)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-lg)) saturate(var(--li-saturate));
}

html.dark .li-footer {
    background: linear-gradient(0deg,
        rgba(var(--li-sheen-rgb), 0.06), rgba(var(--li-sheen-rgb), 0.015));
}

.li-footer::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent,
        rgba(var(--li-sheen-rgb), 0.65) 20%,
        rgba(var(--li-sheen-rgb), 0.65) 80%, transparent);
}

html.dark .li-footer::before {
    background: linear-gradient(90deg, transparent,
        rgba(var(--li-sheen-rgb), 0.18) 20%,
        rgba(var(--li-sheen-rgb), 0.18) 80%, transparent);
}

.li-footer a { color: rgb(var(--li-primary-rgb)); text-decoration: none; }
.li-footer a:hover { text-decoration: underline; }
.li-footer p { margin-bottom: var(--li-spacing-2); }
.li-footer p:last-child { margin-bottom: 0; }

/* ===========================================================================
   26. FORMS
   ---------------------------------------------------------------------------
   A field is a pane pressed slightly *into* the surface rather than laid on
   top of it: the same tint, the same rim, but the highlight is on the inside
   of the top edge instead of the outside. That is the whole difference between
   a control you press and a control you type into.
   =========================================================================== */

.li-form-group { margin-bottom: var(--li-spacing-5); }

.li-form-label {
    display: block;
    margin-bottom: var(--li-spacing-2);
    font-size: var(--li-font-size-sm);
    font-weight: var(--li-font-weight-medium);
    color: var(--li-text-color);
}

.li-form-text {
    display: block;
    margin-top: var(--li-spacing-1);
    font-size: var(--li-font-size-sm);
    color: var(--li-text-muted);
}

.li-form-control,
.li-form-select {
    display: block;
    width: 100%;
    padding: var(--li-spacing-3) var(--li-spacing-4);
    border: 0;
    border-radius: var(--li-radius-md);
    font-size: var(--li-font-size-base);
    line-height: 1.5;
    color: var(--li-text-color);
    background: linear-gradient(180deg,
        rgba(var(--li-shade-rgb), 0.05), rgba(var(--li-sheen-rgb), 0.22));
    backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    box-shadow: inset 0 1px 2px rgba(var(--li-shadow-rgb), 0.10),
                inset 0 0 0 1px rgba(var(--li-text-rgb), 0.14);
    transition: box-shadow var(--li-duration-fast) var(--li-ease),
                background var(--li-duration-fast) var(--li-ease);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

html.dark .li-form-control,
html.dark .li-form-select {
    /* background-image, not the background shorthand: the shorthand resets
       background-repeat, -position and -size, and this rule outranks the one
       that sets them for selects — which tiled the chevron across the whole
       control in dark mode. */
    background-image: linear-gradient(180deg,
        rgba(0, 0, 0, 0.24), rgba(var(--li-sheen-rgb), 0.05));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35),
                inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.12);
}

.li-form-control::placeholder { color: var(--li-text-muted); opacity: 0.8; }

.li-form-control:hover,
.li-form-select:hover { box-shadow: inset 0 1px 2px rgba(var(--li-shadow-rgb), 0.10),
    inset 0 0 0 1px rgba(var(--li-text-rgb), 0.22); }

.li-form-control:focus,
.li-form-select:focus {
    outline: 0;
    /* background-image, not the shorthand — same reason as the dark rule
       above. The shorthand resets background-repeat and -size, so a focused
       select tiled its chevron the moment you clicked it. */
    background-image: linear-gradient(180deg,
        rgba(var(--li-primary-rgb), 0.06), rgba(var(--li-sheen-rgb), 0.26));
    box-shadow: inset 0 0 0 1px rgba(var(--li-primary-rgb), 0.65),
                0 0 0 4px rgba(var(--li-primary-rgb), 0.20);
}

/* Whatever state the control is in, the chevron is drawn once, on the right.
   Any rule that replaces background-image has to leave these alone; stating
   them after every state rule means it no longer matters if one forgets. */
.li-form-select,
select.li-form-control,
.li-form-select:hover,
.li-form-select:focus,
select.li-form-control:hover,
select.li-form-control:focus {
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, right var(--li-spacing-4) center;
    background-size: auto, 1rem 1rem;
}

.li-form-control:disabled,
.li-form-select:disabled { opacity: 0.55; cursor: not-allowed; }

.li-form-control-sm { padding: var(--li-spacing-2) var(--li-spacing-3); font-size: var(--li-font-size-sm); }
.li-form-control-lg { padding: var(--li-spacing-4) var(--li-spacing-5); font-size: var(--li-font-size-lg); }

textarea.li-form-control { min-height: 6rem; }

.li-form-select,
select.li-form-control {
    padding-right: var(--li-spacing-10);
    background-image:
        linear-gradient(180deg, rgba(var(--li-shade-rgb), 0.05), rgba(var(--li-sheen-rgb), 0.22)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23606975' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, right var(--li-spacing-4) center;
    background-size: auto, 1rem 1rem;
}

html.dark .li-form-select,
html.dark select.li-form-control {
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(255, 255, 255, 0.05)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2398a3b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><path d='m6 9 6 6 6-6'/></svg>");
}

.li-form-select[multiple],
select[size].li-form-control { padding-right: var(--li-spacing-4); background-image: none; }

/* The dropdown itself is painted by the operating system, not by us. It gets
   no backdrop filter, no gradient and no glass — only the two colours it is
   given. Left alone it inherits the control's text colour onto its own opaque
   background, which in dark mode is light-on-light and unreadable. */
.li-form-select option,
.li-form-select optgroup,
select.li-form-control option,
select.li-form-control optgroup {
    color: #1a1e23;
    background-color: #ffffff;
}

html.dark .li-form-select option,
html.dark .li-form-select optgroup,
html.dark select.li-form-control option,
html.dark select.li-form-control optgroup {
    color: #e5e7eb;
    background-color: #161b26;
}

/* ---- floating labels ----------------------------------------------------- */

.li-form-floating { position: relative; }

.li-form-floating > .li-form-control,
.li-form-floating > .li-form-select { height: 3.75rem; padding-top: 1.5rem; padding-bottom: 0.5rem; }

.li-form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: var(--li-spacing-3) var(--li-spacing-4);
    color: var(--li-text-muted);
    pointer-events: none;
    transform-origin: 0 0;
    transition: transform var(--li-duration-fast) var(--li-ease),
                opacity var(--li-duration-fast) var(--li-ease);
}

.li-form-floating > .li-form-control:focus ~ label,
.li-form-floating > .li-form-control:not(:placeholder-shown) ~ label,
.li-form-floating > .li-form-select ~ label {
    transform: scale(0.8) translateY(-0.6rem);
    opacity: 0.8;
}

/* ---- input groups -------------------------------------------------------- */

.li-input-group { display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }
.li-input-group > .li-form-control,
.li-input-group > .li-form-select { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }

.li-input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.li-input-group > :not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.li-input-group-text {
    display: flex;
    align-items: center;
    padding: var(--li-spacing-3) var(--li-spacing-4);
    font-size: var(--li-font-size-base);
    white-space: nowrap;
    border-radius: var(--li-radius-md);
    color: var(--li-text-muted);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-sheen-rgb), 0.30), rgba(var(--li-sheen-rgb), 0.10));
    backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    box-shadow: inset 0 0 0 1px rgba(var(--li-text-rgb), 0.14);
}

html.dark .li-input-group-text { box-shadow: inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.12); }

/* ---- checks, radios and switches ----------------------------------------- */

.li-checkbox-group,
.li-radio-group { display: flex; flex-direction: column; gap: var(--li-spacing-2); }

.li-checkbox,
.li-radio,
.li-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--li-spacing-3);
    cursor: pointer;
    color: var(--li-text-color);
}

.li-checkbox input[type="checkbox"],
.li-radio input[type="radio"] {
    position: relative;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    border: 0;
    cursor: pointer;
    background: linear-gradient(180deg,
        rgba(var(--li-shade-rgb), 0.06), rgba(var(--li-sheen-rgb), 0.24));
    box-shadow: inset 0 1px 2px rgba(var(--li-shadow-rgb), 0.12),
                inset 0 0 0 1px rgba(var(--li-text-rgb), 0.22);
    transition: background var(--li-duration-fast) var(--li-ease),
                box-shadow var(--li-duration-fast) var(--li-ease);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

html.dark .li-checkbox input[type="checkbox"],
html.dark .li-radio input[type="radio"] {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(255, 255, 255, 0.05));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),
                inset 0 0 0 1px rgba(var(--li-sheen-rgb), 0.16);
}

.li-checkbox input[type="checkbox"] { border-radius: var(--li-radius-sm); }
.li-radio input[type="radio"] { border-radius: var(--li-radius-full); }

.li-checkbox input[type="checkbox"]:checked,
.li-radio input[type="radio"]:checked {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.95), rgba(var(--li-primary-rgb), 0.55));
    box-shadow: inset 0 0 0 1px rgba(var(--li-primary-rgb), 0.9),
                0 2px 6px -2px rgba(var(--li-primary-rgb), 0.6);
}

.li-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 46%;
    left: 50%;
    width: 0.3em;
    height: 0.62em;
    border: solid #fff;
    border-width: 0 0.16em 0.16em 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.li-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.45em;
    height: 0.45em;
    border-radius: var(--li-radius-full);
    background: #fff;
    transform: translate(-50%, -50%);
}

.li-checkbox input[type="checkbox"]:focus-visible,
.li-radio input[type="radio"]:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 1px rgba(var(--li-primary-rgb), 0.9),
                0 0 0 4px rgba(var(--li-primary-rgb), 0.25);
}

.li-checkbox input:disabled,
.li-radio input:disabled { opacity: 0.5; cursor: not-allowed; }

/* A switch is the same field pane bent into a track. */
.li-switch input[type="checkbox"] {
    position: relative;
    flex-shrink: 0;
    width: 2.75rem;
    height: 1.5rem;
    margin: 0;
    border: 0;
    border-radius: var(--li-radius-full);
    cursor: pointer;
    background: linear-gradient(180deg,
        rgba(var(--li-shade-rgb), 0.10), rgba(var(--li-sheen-rgb), 0.20));
    box-shadow: inset 0 1px 3px rgba(var(--li-shadow-rgb), 0.18),
                inset 0 0 0 1px rgba(var(--li-text-rgb), 0.16);
    transition: background var(--li-duration) var(--li-ease);
    -webkit-appearance: none;
    appearance: none;
}

.li-switch input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--li-radius-full);
    transform: translateY(-50%);
    background: linear-gradient(var(--li-surface-angle),
        rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.80));
    box-shadow: 0 2px 6px -1px rgba(var(--li-shadow-rgb), 0.4);
    transition: transform var(--li-duration) var(--li-ease);
}

.li-switch input[type="checkbox"]:checked {
    background: linear-gradient(90deg,
        rgba(var(--li-primary-rgb), 0.55), rgba(var(--li-primary-rgb), 0.95));
    box-shadow: inset 0 0 0 1px rgba(var(--li-primary-rgb), 0.8);
}

.li-switch input[type="checkbox"]:checked::after { transform: translateY(-50%) translateX(1.25rem); }
.li-switch input[type="checkbox"]:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(var(--li-primary-rgb), 0.25); }

/* ---- range --------------------------------------------------------------- */

input[type="range"].li-form-control,
.li-form-range {
    width: 100%;
    height: 1.5rem;
    padding: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    -webkit-appearance: none;
    appearance: none;
}

input[type="range"].li-form-control::-webkit-slider-runnable-track,
.li-form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.375rem;
    border-radius: var(--li-radius-full);
    background: linear-gradient(90deg,
        rgba(var(--li-primary-rgb), 0.35), rgba(var(--li-text-rgb), 0.12));
    box-shadow: inset 0 1px 2px rgba(var(--li-shadow-rgb), 0.18);
}

input[type="range"].li-form-control::-webkit-slider-thumb,
.li-form-range::-webkit-slider-thumb {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: -0.39rem;
    border: 0;
    border-radius: var(--li-radius-full);
    cursor: grab;
    background: linear-gradient(var(--li-surface-angle),
        rgba(255, 255, 255, 0.98), rgba(var(--li-primary-rgb), 0.55));
    box-shadow: 0 2px 6px -1px rgba(var(--li-shadow-rgb), 0.4),
                inset 0 0 0 1px rgba(var(--li-primary-rgb), 0.6);
    -webkit-appearance: none;
    appearance: none;
}

input[type="range"].li-form-control::-moz-range-track,
.li-form-range::-moz-range-track {
    width: 100%;
    height: 0.375rem;
    border-radius: var(--li-radius-full);
    background: linear-gradient(90deg,
        rgba(var(--li-primary-rgb), 0.35), rgba(var(--li-text-rgb), 0.12));
}

input[type="range"].li-form-control::-moz-range-thumb,
.li-form-range::-moz-range-thumb {
    width: 1.15rem;
    height: 1.15rem;
    border: 0;
    border-radius: var(--li-radius-full);
    cursor: grab;
    background: linear-gradient(var(--li-surface-angle),
        rgba(255, 255, 255, 0.98), rgba(var(--li-primary-rgb), 0.55));
    box-shadow: 0 2px 6px -1px rgba(var(--li-shadow-rgb), 0.4);
}

input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--li-primary-rgb), 0.28); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(var(--li-primary-rgb), 0.28); }

/* The old per-colour range classes still work. */
.li-range-track-primary::-webkit-slider-runnable-track { background: linear-gradient(90deg, rgba(var(--li-primary-rgb), 0.45), rgba(var(--li-primary-rgb), 0.12)); }
.li-range-thumb-primary::-webkit-slider-thumb { background: linear-gradient(var(--li-surface-angle), #fff, rgba(var(--li-primary-rgb), 0.6)); }
.li-range-track-danger::-webkit-slider-runnable-track { background: linear-gradient(90deg, rgba(var(--li-danger-rgb), 0.45), rgba(var(--li-danger-rgb), 0.12)); }
.li-range-thumb-danger::-webkit-slider-thumb { background: linear-gradient(var(--li-surface-angle), #fff, rgba(var(--li-danger-rgb), 0.6)); }
.li-range-track-liquid-ice::-webkit-slider-runnable-track { background: linear-gradient(90deg, rgba(var(--li-sheen-rgb), 0.45), rgba(var(--li-sheen-rgb), 0.12)); }
.li-range-thumb-liquid-ice::-webkit-slider-thumb { background: linear-gradient(var(--li-surface-angle), #fff, rgba(var(--li-sheen-rgb), 0.5)); }
.li-range-track-primary::-moz-range-track { background: linear-gradient(90deg, rgba(var(--li-primary-rgb), 0.45), rgba(var(--li-primary-rgb), 0.12)); }
.li-range-thumb-primary::-moz-range-thumb { background: linear-gradient(var(--li-surface-angle), #fff, rgba(var(--li-primary-rgb), 0.6)); }
.li-range-track-danger::-moz-range-track { background: linear-gradient(90deg, rgba(var(--li-danger-rgb), 0.45), rgba(var(--li-danger-rgb), 0.12)); }
.li-range-thumb-danger::-moz-range-thumb { background: linear-gradient(var(--li-surface-angle), #fff, rgba(var(--li-danger-rgb), 0.6)); }
.li-range-track-liquid-ice::-moz-range-track { background: linear-gradient(90deg, rgba(var(--li-sheen-rgb), 0.45), rgba(var(--li-sheen-rgb), 0.12)); }
.li-range-thumb-liquid-ice::-moz-range-thumb { background: linear-gradient(var(--li-surface-angle), #fff, rgba(var(--li-sheen-rgb), 0.5)); }

/* ---- file input ---------------------------------------------------------- */

.li-form-control[type="file"] { padding: var(--li-spacing-2); }

.li-form-control[type="file"]::file-selector-button {
    padding: var(--li-spacing-2) var(--li-spacing-4);
    margin-right: var(--li-spacing-3);
    border: 0;
    border-radius: var(--li-radius-sm);
    cursor: pointer;
    color: var(--li-text-color);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.26), rgba(var(--li-primary-rgb), 0.08));
    box-shadow: inset 0 0 0 1px rgba(var(--li-primary-rgb), 0.3);
    transition: background var(--li-duration-fast) var(--li-ease);
}

.li-form-control[type="file"]::file-selector-button:hover {
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.38), rgba(var(--li-primary-rgb), 0.14));
}

/* ---- colour input -------------------------------------------------------- */

.li-form-control[type="color"] { width: 3rem; height: 2.75rem; padding: 0.25rem; cursor: pointer; }
.li-form-control[type="color"]::-webkit-color-swatch { border: 0; border-radius: var(--li-radius-sm); }
.li-form-control[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }

/* ---- validation ---------------------------------------------------------- */

.li-form-control.li-is-valid,
.li-form-select.li-is-valid,
.li-was-validated .li-form-control:valid {
    box-shadow: inset 0 0 0 1px rgba(var(--li-success-rgb), 0.65),
                0 0 0 3px rgba(var(--li-success-rgb), 0.14);
}

.li-form-control.li-is-invalid,
.li-form-select.li-is-invalid,
.li-was-validated .li-form-control:invalid {
    box-shadow: inset 0 0 0 1px rgba(var(--li-danger-rgb), 0.65),
                0 0 0 3px rgba(var(--li-danger-rgb), 0.14);
}

.li-valid-feedback,
.li-invalid-feedback {
    display: none;
    margin-top: var(--li-spacing-1);
    font-size: var(--li-font-size-sm);
}

.li-valid-feedback { color: rgb(var(--li-success-rgb)); }
.li-invalid-feedback { color: rgb(var(--li-danger-rgb)); }

.li-is-valid ~ .li-valid-feedback,
.li-was-validated :valid ~ .li-valid-feedback,
.li-is-invalid ~ .li-invalid-feedback,
.li-was-validated :invalid ~ .li-invalid-feedback { display: block; }

/* ===========================================================================
   26b. ICONS
   ---------------------------------------------------------------------------
   LiquidIce ships no icons and depends on none. What it does provide is the
   sizing and alignment an icon needs to sit correctly inside its components.
   These rules are written against AyCons — `.ay`, `.ayc`, `.ayl`, `.ayf` — which
   draws each icon as a mask painted with `currentColor`. That is the property
   that matters here: an icon inherits the colour of the glass it sits on, so
   it belongs to the surface rather than being stamped onto it. Any icon set
   with the same behaviour works the same way.
   =========================================================================== */

/* Anywhere text and an icon share a line, they share a baseline too. */
.li-navbar-links a,
.li-sidebar-nav a,
.li-dropdown-item,
.li-list-group-item,
.li-accordion-button,
.li-nav-link,
.li-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--li-spacing-2);
}

.li-breadcrumb-item,
.li-navbar-links a { display: inline-flex; }

/* Sizes, relative to the text so an icon grows when the accessibility scale
   does. */
.li-icon-xs { font-size: 0.75em; }
.li-icon-sm { font-size: 0.875em; }
.li-icon-lg { font-size: 1.25em; }
.li-icon-xl { font-size: 1.5em; }
.li-icon-2x { font-size: 2em; }
.li-icon-3x { font-size: 3em; }

/* An icon set into its own pane: the small round tile used on feature cards. */
.li-icon-tile {
    --li-tile-rgb: var(--li-primary-rgb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: var(--li-radius-lg);
    font-size: 1.25rem;
    color: rgb(var(--li-tile-rgb));
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-tile-rgb), 0.28),
        rgba(var(--li-tile-rgb), 0.08));
    backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    -webkit-backdrop-filter: blur(var(--li-blur-sm)) saturate(var(--li-saturate));
    box-shadow: inset 0 0 0 1px rgba(var(--li-tile-rgb), 0.30),
                var(--li-shadow-sm);
}

.li-icon-tile-lg { width: 3.5rem; height: 3.5rem; font-size: 1.6rem; border-radius: var(--li-radius-xl); }
.li-icon-tile-round { border-radius: var(--li-radius-full); }

/* On a dark surface a saturated brand colour on an 8–28 % wash of itself has
   almost no luminance separation, so the glyph disappears. Lifting the glyph
   towards white and dropping the wash keeps the tile tinted and the icon
   legible. The tile colour itself is untouched — only the contrast between
   the two. */
html.dark .li-icon-tile {
    color: color-mix(in srgb, rgb(var(--li-tile-rgb)) 45%, #ffffff);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-tile-rgb), 0.22),
        rgba(var(--li-tile-rgb), 0.06));
}

/* No color-mix: a flat light tint, still comfortably above the wash. */
@supports not (color: color-mix(in srgb, red 50%, white)) {
    html.dark .li-icon-tile { color: #e8edf5; }
}

.li-icon-tile-primary       { --li-tile-rgb: var(--li-primary-rgb); }
.li-icon-tile-secondary     { --li-tile-rgb: var(--li-secondary-rgb); }
.li-icon-tile-success       { --li-tile-rgb: var(--li-success-rgb); }
.li-icon-tile-danger        { --li-tile-rgb: var(--li-danger-rgb); }
.li-icon-tile-warning       { --li-tile-rgb: var(--li-warning-rgb); }
.li-icon-tile-info          { --li-tile-rgb: var(--li-info-rgb); }
.li-icon-tile-personalized1 { --li-tile-rgb: var(--li-personalized1-rgb); }
.li-icon-tile-personalized2 { --li-tile-rgb: var(--li-personalized2-rgb); }

/* A button that is only an icon still needs the icon centred. */
.li-btn > .ay,
.li-btn > .ayc { flex-shrink: 0; }

/* While AyCons is still fetching, its own placeholder shows; this keeps the
   slot from collapsing and the line from jumping when the icon lands. */
.ay:not([style]) { min-width: 1em; }

/* ===========================================================================
   27. UTILITIES
   =========================================================================== */

/* ---- display ------------------------------------------------------------- */
.li-block { display: block; }
.li-inline { display: inline; }
.li-inline-block { display: inline-block; }
.li-flex { display: flex; }
.li-inline-flex { display: inline-flex; }
.li-grid { display: grid; }
.li-inline-grid { display: inline-grid; }
.li-table-d { display: table; }
.li-hidden, .li-d-none { display: none; }

/* ---- flex and grid ------------------------------------------------------- */
.li-flex-row { flex-direction: row; }
.li-flex-row-reverse { flex-direction: row-reverse; }
.li-flex-col, .li-flex-column { flex-direction: column; }
.li-flex-col-reverse { flex-direction: column-reverse; }
.li-flex-wrap { flex-wrap: wrap; }
.li-flex-nowrap { flex-wrap: nowrap; }
.li-flex-grow { flex-grow: 1; }
.li-flex-grow-0 { flex-grow: 0; }
.li-flex-shrink { flex-shrink: 1; }
.li-flex-shrink-0 { flex-shrink: 0; }
.li-flex-fill { flex: 1 1 auto; }
.li-justify-start { justify-content: flex-start; }
.li-justify-end { justify-content: flex-end; }
.li-justify-center { justify-content: center; }
.li-justify-between { justify-content: space-between; }
.li-justify-around { justify-content: space-around; }
.li-justify-evenly { justify-content: space-evenly; }
.li-items-start { align-items: flex-start; }
.li-items-end { align-items: flex-end; }
.li-items-center { align-items: center; }
.li-items-baseline { align-items: baseline; }
.li-items-stretch { align-items: stretch; }
.li-content-start { align-content: flex-start; }
.li-content-center { align-content: center; }
.li-content-between { align-content: space-between; }
.li-self-start { align-self: flex-start; }
.li-self-end { align-self: flex-end; }
.li-self-center { align-self: center; }
.li-self-baseline { align-self: baseline; }
.li-self-stretch { align-self: stretch; }
.li-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.li-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.li-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.li-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.li-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.li-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.li-grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.li-col-span-2 { grid-column: span 2 / span 2; }
.li-col-span-3 { grid-column: span 3 / span 3; }
.li-col-span-full { grid-column: 1 / -1; }

.li-gap-0 { gap: 0; }
.li-gap-1 { gap: var(--li-spacing-1); }
.li-gap-2 { gap: var(--li-spacing-2); }
.li-gap-3 { gap: var(--li-spacing-3); }
.li-gap-4 { gap: var(--li-spacing-4); }
.li-gap-5 { gap: var(--li-spacing-5); }
.li-gap-6 { gap: var(--li-spacing-6); }
.li-gap-8 { gap: var(--li-spacing-8); }
.li-gap-10 { gap: var(--li-spacing-10); }
.li-gap-12 { gap: var(--li-spacing-12); }
.li-space-x-2 > * + * { margin-left: var(--li-spacing-2); }
.li-space-x-3 > * + * { margin-left: var(--li-spacing-3); }
.li-space-x-4 > * + * { margin-left: var(--li-spacing-4); }
.li-space-y-2 > * + * { margin-top: var(--li-spacing-2); }
.li-space-y-3 > * + * { margin-top: var(--li-spacing-3); }
.li-space-y-4 > * + * { margin-top: var(--li-spacing-4); }

/* ---- spacing ------------------------------------------------------------- */
.li-m-0 { margin: 0; } .li-m-1 { margin: var(--li-spacing-1); } .li-m-2 { margin: var(--li-spacing-2); }
.li-m-3 { margin: var(--li-spacing-3); } .li-m-4 { margin: var(--li-spacing-4); }
.li-m-5 { margin: var(--li-spacing-5); } .li-m-6 { margin: var(--li-spacing-6); }
.li-m-8 { margin: var(--li-spacing-8); } .li-m-auto { margin: auto; }
.li-mx-auto { margin-left: auto; margin-right: auto; }
.li-my-auto { margin-top: auto; margin-bottom: auto; }
.li-mt-0 { margin-top: 0; } .li-mt-1 { margin-top: var(--li-spacing-1); }
.li-mt-2 { margin-top: var(--li-spacing-2); } .li-mt-3 { margin-top: var(--li-spacing-3); }
.li-mt-4 { margin-top: var(--li-spacing-4); } .li-mt-5 { margin-top: var(--li-spacing-5); }
.li-mt-6 { margin-top: var(--li-spacing-6); } .li-mt-8 { margin-top: var(--li-spacing-8); }
.li-mt-10 { margin-top: var(--li-spacing-10); } .li-mt-12 { margin-top: var(--li-spacing-12); }
.li-mt-16 { margin-top: var(--li-spacing-16); }
.li-mb-0 { margin-bottom: 0; } .li-mb-1 { margin-bottom: var(--li-spacing-1); }
.li-mb-2 { margin-bottom: var(--li-spacing-2); } .li-mb-3 { margin-bottom: var(--li-spacing-3); }
.li-mb-4 { margin-bottom: var(--li-spacing-4); } .li-mb-5 { margin-bottom: var(--li-spacing-5); }
.li-mb-6 { margin-bottom: var(--li-spacing-6); } .li-mb-8 { margin-bottom: var(--li-spacing-8); }
.li-mb-10 { margin-bottom: var(--li-spacing-10); } .li-mb-12 { margin-bottom: var(--li-spacing-12); }
.li-mb-16 { margin-bottom: var(--li-spacing-16); }
.li-ml-0 { margin-left: 0; } .li-ml-2 { margin-left: var(--li-spacing-2); }
.li-ml-3 { margin-left: var(--li-spacing-3); } .li-ml-4 { margin-left: var(--li-spacing-4); }
.li-ml-auto { margin-left: auto; }
.li-mr-0 { margin-right: 0; } .li-mr-2 { margin-right: var(--li-spacing-2); }
.li-mr-3 { margin-right: var(--li-spacing-3); } .li-mr-4 { margin-right: var(--li-spacing-4); }
.li-mr-auto { margin-right: auto; }

.li-p-0 { padding: 0; } .li-p-1 { padding: var(--li-spacing-1); } .li-p-2 { padding: var(--li-spacing-2); }
.li-p-3 { padding: var(--li-spacing-3); } .li-p-4 { padding: var(--li-spacing-4); }
.li-p-5 { padding: var(--li-spacing-5); } .li-p-6 { padding: var(--li-spacing-6); }
.li-p-7 { padding: var(--li-spacing-7); } .li-p-8 { padding: var(--li-spacing-8); }
.li-p-10 { padding: var(--li-spacing-10); } .li-p-12 { padding: var(--li-spacing-12); }
.li-px-2 { padding-left: var(--li-spacing-2); padding-right: var(--li-spacing-2); }
.li-px-3 { padding-left: var(--li-spacing-3); padding-right: var(--li-spacing-3); }
.li-px-4 { padding-left: var(--li-spacing-4); padding-right: var(--li-spacing-4); }
.li-px-6 { padding-left: var(--li-spacing-6); padding-right: var(--li-spacing-6); }
.li-py-2 { padding-top: var(--li-spacing-2); padding-bottom: var(--li-spacing-2); }
.li-py-3 { padding-top: var(--li-spacing-3); padding-bottom: var(--li-spacing-3); }
.li-py-4 { padding-top: var(--li-spacing-4); padding-bottom: var(--li-spacing-4); }
.li-py-6 { padding-top: var(--li-spacing-6); padding-bottom: var(--li-spacing-6); }
.li-py-8 { padding-top: var(--li-spacing-8); padding-bottom: var(--li-spacing-8); }
.li-py-12 { padding-top: var(--li-spacing-12); padding-bottom: var(--li-spacing-12); }
.li-py-16 { padding-top: var(--li-spacing-16); padding-bottom: var(--li-spacing-16); }
.li-pt-4 { padding-top: var(--li-spacing-4); } .li-pt-8 { padding-top: var(--li-spacing-8); }
.li-pt-12 { padding-top: var(--li-spacing-12); } .li-pt-16 { padding-top: var(--li-spacing-16); }
.li-pb-4 { padding-bottom: var(--li-spacing-4); } .li-pb-8 { padding-bottom: var(--li-spacing-8); }
.li-pb-12 { padding-bottom: var(--li-spacing-12); } .li-pb-16 { padding-bottom: var(--li-spacing-16); }
.li-body-padding { padding-top: var(--li-spacing-16); }

/* ---- sizing -------------------------------------------------------------- */
.li-w-auto { width: auto; } .li-w-25 { width: 25%; } .li-w-50 { width: 50%; }
.li-w-75 { width: 75%; } .li-w-100, .li-w-full { width: 100%; }
.li-h-auto { height: auto; } .li-h-100, .li-h-full { height: 100%; }
.li-h-256px { height: 16rem; }
.li-min-h-screen { min-height: 100vh; }
.li-min-w-0 { min-width: 0; }
.li-max-w-sm { max-width: 24rem; } .li-max-w-md { max-width: 28rem; }
.li-max-w-lg { max-width: 32rem; } .li-max-w-xl { max-width: 36rem; }
.li-max-w-2xl { max-width: 42rem; } .li-max-w-3xl { max-width: 48rem; }
.li-max-w-4xl { max-width: 56rem; } .li-max-w-full { max-width: 100%; }

/* ---- position ------------------------------------------------------------ */
.li-static { position: static; } .li-relative { position: relative; }
.li-absolute { position: absolute; } .li-fixed { position: fixed; }
.li-sticky { position: sticky; }
.li-inset-0 { inset: 0; }
.li-top-0 { top: 0; } .li-top-4 { top: var(--li-spacing-4); }
.li-right-0 { right: 0; } .li-right-4 { right: var(--li-spacing-4); }
.li-bottom-0 { bottom: 0; } .li-left-0 { left: 0; }
.li-z-10 { z-index: 10; } .li-z-20 { z-index: 20; } .li-z-30 { z-index: 30; }
.li-z-40 { z-index: 40; } .li-z-50 { z-index: 50; } .li-z-top { z-index: var(--li-z-top); }

/* A link that makes its whole card clickable. */
.li-stretched-link::after { content: ''; position: absolute; inset: 0; z-index: 2; }

/* ---- typography utilities ------------------------------------------------ */
.li-text-left { text-align: left; } .li-text-center { text-align: center; }
.li-text-right { text-align: right; } .li-text-justify { text-align: justify; }
.li-text-nowrap { white-space: nowrap; } .li-text-wrap { white-space: normal; }
.li-text-break { word-break: break-word; overflow-wrap: break-word; }
.li-text-lowercase { text-transform: lowercase; }
.li-text-uppercase { text-transform: uppercase; }
.li-text-capitalize { text-transform: capitalize; }
.li-text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-text-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.li-text-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.li-font-light { font-weight: var(--li-font-weight-light); }
.li-font-normal { font-weight: var(--li-font-weight-normal); }
.li-font-medium { font-weight: var(--li-font-weight-medium); }
.li-font-semibold { font-weight: var(--li-font-weight-semibold); }
.li-font-bold { font-weight: var(--li-font-weight-bold); }
.li-font-black { font-weight: var(--li-font-weight-black); }
.li-font-italic { font-style: italic; }
.li-font-mono { font-family: var(--li-font-family-mono); }
.li-font-xs { font-size: var(--li-font-size-xs); }
.li-font-sm { font-size: var(--li-font-size-sm); }
.li-font-md { font-size: var(--li-font-size-md); }
.li-font-lg { font-size: var(--li-font-size-lg); }
.li-font-xl { font-size: var(--li-font-size-xl); }
.li-font-2xl { font-size: var(--li-font-size-2xl); }
.li-font-3xl { font-size: var(--li-font-size-3xl); }
.li-lh-1 { line-height: 1; } .li-lh-tight { line-height: var(--li-interline-tight); }
.li-lh-base { line-height: var(--li-interline-base); }
.li-text-shadow-md { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.li-text-white { color: #fff; }

.li-text-primary { color: rgb(var(--li-primary-rgb)); }
.li-text-secondary { color: rgb(var(--li-secondary-rgb)); }
.li-text-success { color: rgb(var(--li-success-rgb)); }
.li-text-danger { color: rgb(var(--li-danger-rgb)); }
.li-text-warning { color: rgb(var(--li-warning-rgb)); }
.li-text-info { color: rgb(var(--li-info-rgb)); }
.li-text-personalized1 { color: rgb(var(--li-personalized1-rgb)); }
.li-text-personalized2 { color: rgb(var(--li-personalized2-rgb)); }

/* ---- borders and corners ------------------------------------------------- */
.li-border { box-shadow: inset 0 0 0 1px rgba(var(--li-text-rgb), 0.12); }
.li-border-t { box-shadow: inset 0 1px 0 rgba(var(--li-text-rgb), 0.12); }
.li-border-b { box-shadow: inset 0 -1px 0 rgba(var(--li-text-rgb), 0.12); }
.li-border-gray-200 { box-shadow: inset 0 0 0 1px rgba(var(--li-text-rgb), 0.10); }
.li-border-0 { box-shadow: none; }
.li-rounded-0 { border-radius: 0; }
.li-rounded-sm { border-radius: var(--li-radius-sm); }
.li-rounded { border-radius: var(--li-radius-md); }
.li-rounded-lg { border-radius: var(--li-radius-lg); }
.li-rounded-xl { border-radius: var(--li-radius-xl); }
.li-rounded-2xl { border-radius: var(--li-radius-2xl); }
.li-rounded-3xl { border-radius: var(--li-radius-3xl); }
.li-rounded-full { border-radius: var(--li-radius-full); }

/* ---- shadows, opacity, overflow ------------------------------------------ */
.li-shadow-none { box-shadow: none; }
.li-shadow-sm { box-shadow: var(--li-shadow-sm); }
.li-shadow { box-shadow: var(--li-shadow); }
.li-shadow-lg { box-shadow: var(--li-shadow-lg); }
.li-shadow-xl { box-shadow: var(--li-shadow-xl); }
.li-opacity-0 { opacity: 0; } .li-opacity-25 { opacity: 0.25; }
.li-opacity-50 { opacity: 0.5; } .li-opacity-70 { opacity: 0.7; }
.li-opacity-75 { opacity: 0.75; } .li-opacity-100 { opacity: 1; }
.li-overflow-hidden { overflow: hidden; }
.li-overflow-auto { overflow: auto; }
.li-overflow-x-auto { overflow-x: auto; }
.li-overflow-y-auto { overflow-y: auto; }
.li-invisible { visibility: hidden; }
.li-visible { visibility: visible; }
.li-cursor-pointer { cursor: pointer; }
.li-cursor-not-allowed { cursor: not-allowed; }
.li-pointer-events-none { pointer-events: none; }
.li-user-select-none { user-select: none; }
.li-bg-cover { background-size: cover; }
.li-bg-center { background-position: center; }
.li-float-start { float: left; } .li-float-end { float: right; } .li-float-none { float: none; }
.li-clearfix::after { display: block; clear: both; content: ''; }

.li-transition-all { transition: all var(--li-duration) var(--li-ease); }
.li-duration-300 { transition-duration: var(--li-duration); }
.li-ease-in-out { transition-timing-function: var(--li-ease-in-out); }

.li-sr-only,
.li-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.li-skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: var(--li-z-top);
}

.li-skip-link:focus {
    left: var(--li-spacing-4);
    top: var(--li-spacing-4);
    padding: var(--li-spacing-3) var(--li-spacing-5);
    border-radius: var(--li-radius-md);
    background: linear-gradient(var(--li-surface-angle),
        rgba(var(--li-primary-rgb), 0.9), rgba(var(--li-primary-rgb), 0.7));
    color: #fff;
}

/* ---- responsive display -------------------------------------------------- */
@media (min-width: 576px) {
    .li-sm-flex { display: flex; } .li-sm-block { display: block; } .li-sm-none { display: none; }
    .li-sm-flex-row { flex-direction: row; } .li-sm-text-left { text-align: left; }
}
@media (min-width: 768px) {
    .li-md-flex { display: flex; } .li-md-block { display: block; } .li-md-hidden, .li-md-none { display: none; }
    .li-md-flex-row { flex-direction: row; }
}
@media (min-width: 992px) {
    .li-lg-flex { display: flex; } .li-lg-block { display: block; } .li-lg-none { display: none; }
}
@media (max-width: 767px) {
    .li-md-down-block { display: block; } .li-md-down-none { display: none; }
    .li-md-block { display: block; }
}

/* ===========================================================================
   28. ACCESSIBILITY MODES
   =========================================================================== */

html.bigger-font-size-1 body { font-size: calc(var(--li-font-size-base) * var(--li-font-size-bigger-1)); }
html.bigger-font-size-2 body { font-size: calc(var(--li-font-size-base) * var(--li-font-size-bigger-2)); }
html.bigger-font-size-3 body { font-size: calc(var(--li-font-size-base) * var(--li-font-size-bigger-3)); }
html.bigger-font-size-4 body { font-size: calc(var(--li-font-size-base) * var(--li-font-size-bigger-4)); }
html.bigger-font-size-5 body { font-size: calc(var(--li-font-size-base) * var(--li-font-size-bigger-5)); }

/* Headings are in rem, so scaling the root scales them with it — one rule
   instead of the thirty this used to take. */
html[class*="bigger-font-size-"] h1, html[class*="bigger-font-size-"] .li-h1,
html[class*="bigger-font-size-"] h2, html[class*="bigger-font-size-"] .li-h2,
html[class*="bigger-font-size-"] h3, html[class*="bigger-font-size-"] .li-h3,
html[class*="bigger-font-size-"] h4, html[class*="bigger-font-size-"] .li-h4,
html[class*="bigger-font-size-"] h5, html[class*="bigger-font-size-"] .li-h5,
html[class*="bigger-font-size-"] h6, html[class*="bigger-font-size-"] .li-h6 { font-size: 1em; }

html[class*="bigger-font-size-"] h1, html[class*="bigger-font-size-"] .li-h1 { font-size: 2.6em; }
html[class*="bigger-font-size-"] h2, html[class*="bigger-font-size-"] .li-h2 { font-size: 2.1em; }
html[class*="bigger-font-size-"] h3, html[class*="bigger-font-size-"] .li-h3 { font-size: 1.7em; }
html[class*="bigger-font-size-"] h4, html[class*="bigger-font-size-"] .li-h4 { font-size: 1.4em; }
html[class*="bigger-font-size-"] h5, html[class*="bigger-font-size-"] .li-h5 { font-size: 1.2em; }
html[class*="bigger-font-size-"] h6, html[class*="bigger-font-size-"] .li-h6 { font-size: 1.05em; }

html.bigger-letter-spacing-1 body, html.bigger-letter-spacing-1 body * { letter-spacing: var(--li-letter-spacing-bigger-1); }
html.bigger-letter-spacing-2 body, html.bigger-letter-spacing-2 body * { letter-spacing: var(--li-letter-spacing-bigger-2); }
html.bigger-letter-spacing-3 body, html.bigger-letter-spacing-3 body * { letter-spacing: var(--li-letter-spacing-bigger-3); }
html.bigger-letter-spacing-4 body, html.bigger-letter-spacing-4 body * { letter-spacing: var(--li-letter-spacing-bigger-4); }
html.bigger-letter-spacing-5 body, html.bigger-letter-spacing-5 body * { letter-spacing: var(--li-letter-spacing-bigger-5); }

html.bigger-interline-1 body, html.bigger-interline-1 body * { line-height: var(--li-interline-bigger-1); }
html.bigger-interline-2 body, html.bigger-interline-2 body * { line-height: var(--li-interline-bigger-2); }
html.bigger-interline-3 body, html.bigger-interline-3 body * { line-height: var(--li-interline-bigger-3); }
html.bigger-interline-4 body, html.bigger-interline-4 body * { line-height: var(--li-interline-bigger-4); }
html.bigger-interline-5 body, html.bigger-interline-5 body * { line-height: var(--li-interline-bigger-5); }

html.greyscale-mode body { filter: grayscale(100%); }

html.dyslexic-mode body,
html.dyslexic-mode body * { font-family: var(--li-font-family-dyslexic), serif !important; }

html.adhd-mode body,
html.adhd-mode body * { font-family: var(--li-font-family-adhd), sans-serif !important; }

html.adhd-mode img[src$=".gif"],
html.adhd-mode video,
html.adhd-mode canvas,
html.adhd-mode iframe { display: none !important; }

html.adhd-mode *,
html.adhd-mode *::before,
html.adhd-mode *::after { animation: none !important; transition: none !important; }

/* High contrast is the one place the rule is broken on purpose: someone who
   needs this needs edges, and a translucent edge is not an edge. */
html.high-contrast-mode body {
    background: #000 !important;
    color: #fff !important;
}

html.high-contrast-mode .liquid-ice,
html.high-contrast-mode .li-glass,
html.high-contrast-mode .li-card,
html.high-contrast-mode .li-btn,
html.high-contrast-mode .li-alert,
html.high-contrast-mode .li-badge,
html.high-contrast-mode .li-navbar,
html.high-contrast-mode .li-footer,
html.high-contrast-mode .li-modal-content,
html.high-contrast-mode .li-dropdown-menu,
html.high-contrast-mode .li-form-control,
html.high-contrast-mode .li-form-select {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.high-contrast-mode .liquid-ice::before,
html.high-contrast-mode .liquid-ice::after,
html.high-contrast-mode .li-glass::before,
html.high-contrast-mode .li-glass::after,
html.high-contrast-mode .li-card::before,
html.high-contrast-mode .li-btn::before,
html.high-contrast-mode .li-alert::before { display: none !important; }

html.high-contrast-mode a { color: #ff0 !important; text-decoration: underline !important; }
html.high-contrast-mode .li-btn:hover { background: #ff0 !important; color: #000 !important; }
html.high-contrast-mode .li-btn-primary { border-color: #0ff !important; color: #0ff !important; }
html.high-contrast-mode .li-btn-danger, html.high-contrast-mode .li-alert-danger { border-color: #f66 !important; color: #f66 !important; }
html.high-contrast-mode .li-btn-success, html.high-contrast-mode .li-alert-success { border-color: #6f6 !important; color: #6f6 !important; }
html.high-contrast-mode .li-text-muted { color: #ddd !important; }

/* Reading mode: one column, no ornament, nothing that moves. */
html.reading-mode body {
    max-width: 46rem;
    margin: 0 auto;
    padding: var(--li-spacing-8);
    background-image: none;
}

html.reading-mode .li-row,
html.reading-mode .li-flex,
html.reading-mode .li-grid { display: block; }

html.reading-mode .li-row > *,
html.reading-mode .li-col { width: 100%; max-width: 100%; margin-left: 0; padding-left: 0; padding-right: 0; }

html.reading-mode .liquid-ice,
html.reading-mode .li-glass,
html.reading-mode .li-card {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

html.reading-mode .liquid-ice::before,
html.reading-mode .liquid-ice::after,
html.reading-mode .li-glass::before,
html.reading-mode .li-glass::after,
html.reading-mode .li-card::before { display: none; }

html.reading-mode img,
html.reading-mode iframe,
html.reading-mode canvas,
html.reading-mode video,
html.reading-mode .li-no-reading-mode { display: none; }

html.reading-mode h1, html.reading-mode h2, html.reading-mode h3,
html.reading-mode h4, html.reading-mode h5, html.reading-mode h6,
html.reading-mode p, html.reading-mode li { text-align: left; }

/* ===========================================================================
   29. MOTION AND PRINT
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Someone who asked for less transparency gets less transparency. */
@media (prefers-reduced-transparency: reduce) {
    .liquid-ice,
    .li-glass,
    .li-card,
    .li-navbar,
    .li-modal-content,
    .li-dropdown-menu {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: linear-gradient(var(--li-surface-angle),
            rgba(var(--li-sheen-rgb), 0.92), rgba(var(--li-sheen-rgb), 0.86));
    }
    html.dark .liquid-ice,
    html.dark .li-glass,
    html.dark .li-card,
    html.dark .li-navbar,
    html.dark .li-modal-content,
    html.dark .li-dropdown-menu {
        background: linear-gradient(var(--li-surface-angle),
            rgba(20, 26, 38, 0.95), rgba(14, 18, 28, 0.92));
    }
}

@media print {
    body {
        padding-top: 0;
        background: #fff !important;
        color: #000 !important;
    }
    .li-navbar,
    .li-sidebar,
    .li-offcanvas,
    .li-backdrop,
    .li-toast-container,
    .li-no-print { display: none !important; }
    .liquid-ice,
    .li-glass,
    .li-card {
        background: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: 1px solid #999 !important;
    }
    .liquid-ice::before,
    .liquid-ice::after,
    .li-glass::before,
    .li-glass::after,
    .li-card::before { display: none !important; }
    a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.85em; }
    h1, h2, h3 { break-after: avoid; }
    pre, blockquote, table, figure { break-inside: avoid; }
}