/* Paint-only material. Component geometry, containment and overlay layers are owned by their hosts. */
:root[data-material="liquid"] {
    --liquid-rgb: 239 248 255;
    --liquid-alpha: clamp(.78, var(--glass-alpha, .7), .95);
    --liquid-blur: clamp(0px, var(--glass-blur, 18px), 20px);
    --liquid-edge: rgb(255 255 255 / .78);
    --liquid-inner: rgb(28 67 101 / .19);
    --liquid-glint: rgb(255 255 255 / .54);
    --liquid-glow: rgb(255 255 255 / .47);
    --liquid-ink: #18587a;
    --liquid-control-edge: #5c7187;
    --liquid-selected: #c8e4f2;
    --liquid-text: #1c2e40;
    --liquid-muted: #415568;
    --liquid-error: #93253e;
    --liquid-shadow: 16 42 65;
    --liquid-shade: rgb(14 34 54 / .4);
}

:root[data-material="liquid"] body.dark {
    --liquid-rgb: 23 38 56;
    --liquid-alpha: clamp(.82, var(--glass-alpha, .7), .95);
    --liquid-edge: rgb(223 243 255 / .48);
    --liquid-inner: rgb(160 206 242 / .19);
    --liquid-glint: rgb(162 207 245 / .19);
    --liquid-glow: rgb(149 214 251 / .26);
    --liquid-ink: #a5eaff;
    --liquid-control-edge: #849bb5;
    --liquid-selected: #385775;
    --liquid-text: #f4f8fc;
    --liquid-muted: #c2d4e6;
    --liquid-error: #ffb3c5;
    --liquid-shadow: 0 5 16;
    --liquid-shade: rgb(4 12 26 / .62);
}

:root[data-material="liquid"] :is(
    .topbar, .sidebar, .search-box, .link-card, .service-card, .service-desk,
    .nav-select-menu, .card-actions-menu, .canvas-size-menu, .dialog, .toast,
    .music-root, .music-dock, .music-drawer, .music-immersive-mount,
    .admin-sidebar, .admin-header, .admin-toolbar, .table-wrap, .stat, .login-panel,
    .import-area, .personal-hero, .canvas-toolbar, .personal-space,
    .personal-toolbar .icon-button, .search-wrap .engine
),
:root[data-material="liquid"] #widgets > .plugin-expanded,
:root[data-material="liquid"] #widgets > .plugin-borderless:not(.plugin-expanded) > .plugin-content {
    --liquid-depth: inset 0 1px 0 var(--liquid-edge), inset 0 0 0 1px var(--liquid-inner),
        inset 0 -2px 3px rgb(124 176 222 / .16), 0 9px 28px rgb(var(--liquid-shadow) / calc(var(--shadow-strength, .35) * .44));
    --liquid-paint: radial-gradient(circle 28px at var(--liquid-x, 50%) var(--liquid-y, 18%),
        var(--liquid-local-glow, transparent), transparent 100%),
        linear-gradient(145deg, var(--liquid-glint) 0%, transparent 40%, rgb(101 163 216 / .13) 100%),
        rgb(var(--liquid-rgb) / var(--liquid-alpha));
    --text: var(--liquid-text);
    --muted: var(--liquid-muted);
    background: var(--liquid-paint);
    color: var(--text);
    box-shadow: var(--liquid-depth);
    border-color: var(--liquid-inner);
}

:root[data-material="liquid"] :is(.link-card, .service-card, .music-root, .music-dock, .music-drawer, .music-immersive-mount),
:root[data-material="liquid"] #widgets > .plugin-borderless:not(.plugin-expanded) > .plugin-content {
    backdrop-filter: none;
}

:root[data-material="liquid"] :is(.topbar, .nav-select-menu, .card-actions-menu, .canvas-size-menu, .dialog),
:root[data-material="liquid"] #widgets > .plugin-expanded {
    -webkit-backdrop-filter: blur(var(--liquid-blur));
    backdrop-filter: blur(var(--liquid-blur));
}

:root[data-material="liquid"] .weather-snapshot {
    background: linear-gradient(142deg, rgb(195 232 255 / .24), transparent 54%), rgb(46 70 103 / .95);
    box-shadow: inset 0 1px 0 rgb(224 244 255 / .52), inset 0 -2px 4px rgb(7 23 43 / .21);
    color: #f7fbff;
}

:root[data-material="liquid"] .topbar :is(.brand, .icon-button, .text-button, .account-active),
:root[data-material="liquid"] .topbar :is(.icon-button, .text-button):hover {
    color: var(--liquid-text);
}

:root[data-material="liquid"] :is(.primary-button, .search-go, .accent-button) {
    color: var(--liquid-text);
}

:root[data-material="liquid"] :is(input, textarea)::placeholder {
    color: var(--liquid-muted);
    opacity: 1;
}

:root[data-material="liquid"] body.dark #widgets > .plugin-expanded:has(.weather-upgraded) {
    --liquid-rgb: 36 56 83;
}

:root[data-material="liquid"] [data-liquid-active] {
    --liquid-local-glow: var(--liquid-glow);
}

:root[data-material="liquid"] .dialog::backdrop,
:root[data-material="liquid"] :is(.plugin-detail-backdrop, .music-immersive-backdrop) {
    background: var(--liquid-shade);
}

:root[data-material="liquid"] .toast {
    color: var(--text);
}

:root[data-material="liquid"] :is(input, textarea, select):not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]),
:root[data-material="liquid"] .nav-select .ts-control,
:root[data-material="liquid"] #widgets > .plugin-expanded :is(input, textarea, select):not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]) {
    background-color: rgb(var(--liquid-rgb) / .92);
    border-color: var(--liquid-control-edge);
    color: var(--text);
    box-shadow: inset 0 1px 2px rgb(var(--liquid-shadow) / .1);
}

:root[data-material="liquid"] .search-box input,
:root[data-material="liquid"] #widgets > .plugin-borderless:not(.plugin-expanded) > .plugin-content > textarea {
    background-color: transparent;
    box-shadow: none;
}

:root[data-material="liquid"] :is(button, a, input, textarea, select, summary, [role="option"], [role="menuitem"]):focus-visible,
:root[data-material="liquid"] #widgets > .plugin-expanded :is(button, a, input, textarea, select):focus-visible {
    outline: 2px solid var(--liquid-ink);
    outline-offset: 2px;
}

:root[data-material="liquid"] :is(button, a, input, textarea, select, summary):focus-visible:where(.plugin-caption, .nav-item, .command-option) {
    outline-offset: -2px;
}

:root[data-material="liquid"] :is(.nav-item, .command-option, .nav-select-option, .calendar-date-cell, .music-panel-tabs button):where([aria-selected="true"], [aria-pressed="true"]),
:root[data-material="liquid"] :is(.nav-item.active, .nav-select-menu .option.selected, .command-option[aria-selected="true"], .personal-space[aria-selected="true"], .search-wrap .engine.active) {
    background-color: var(--liquid-selected);
}

:root[data-material="liquid"] :is(.form-error, .theme-error, .preset-error, .plugin-error) {
    color: var(--liquid-error);
}

:root[data-material="liquid"] [aria-invalid="true"] {
    outline: 2px solid var(--liquid-error);
    outline-offset: -2px;
}

:root[data-material="liquid"] .admin .table-wrap tbody tr:hover {
    background-color: var(--liquid-selected);
}

.liquid-admin-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 22% 18%, color-mix(in srgb, var(--tone-1) 42%, var(--surface-soft)), transparent 65%),
        radial-gradient(ellipse at 88% 76%, color-mix(in srgb, var(--tone-3) 36%, var(--surface-soft)), transparent 58%),
        var(--surface-soft);
}

:root[data-material="liquid"] body.admin {
    background: transparent;
}

.liquid-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.liquid-wave-origin {
    position: absolute;
    top: 0;
    left: 0;
    width: 144px;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate3d(calc(var(--liquid-x, -300px) - 50%), calc(var(--liquid-y, -300px) - 50%), 0);
}

.liquid-wave {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle closest-side, transparent 79%, rgb(205 241 255 / .16) 88%, rgb(232 250 255 / .66) 94%, transparent 100%);
}

@property --nav-wave-radius {
    syntax: "<length>";
    inherits: false;
    initial-value: 6px;
}

[data-liquid-anchor], [data-lab-anchor], [data-lab-input-parent] { position:relative; }
[data-liquid-optics-host] { isolation:isolate; }
.nav-glass-optics { position:absolute;inset:0;pointer-events:none;overflow:hidden; }
.nav-glass-surface { z-index:-1;opacity:.36;border-radius:inherit; }
.nav-glass-copy { position:absolute;display:block;pointer-events:none; }
.nav-glass-wave {
    border-radius:50%;
    mask-image:radial-gradient(circle,transparent max(0px,calc(var(--nav-wave-radius) - 7px)),#000 var(--nav-wave-radius),transparent calc(var(--nav-wave-radius) + 4px));
}
.nav-glass-video { display:block;width:100%;height:100%; }
.lg-surface {position:absolute;inset:calc(-1 * var(--lg-bleed,16px));pointer-events:none;z-index:-1;}
/* The engine supplies the rounded clip on its next frame. Keep the optical copy masked until then. */
.lg-surface__glass {position:absolute;inset:0;overflow:hidden;clip-path:inset(50%);}
.lg-surface__glass--fallback {inset:auto;left:0;top:0;clip-path:none;backdrop-filter:blur(6px);}
.lg-surface__copy {position:absolute;left:0;top:0;display:block;max-width:none;max-height:none;margin:0;}
.lg-surface__shadow,.lg-surface__tint {position:absolute;left:0;top:0;}
.lg-surface__shadow {box-shadow:inset 0 1px 0 var(--liquid-edge),0 4px 14px rgb(var(--liquid-shadow) / .19);}
.lg-surface__tint {background:var(--lab-tint,rgb(var(--liquid-rgb) / .61));box-shadow:inset 0 0 0 1px var(--liquid-inner);}

/* The stationary control and the spring surface share the same rim and tint. */
:root[data-material="liquid"][data-liquid-quality="full"] {
    --lab-button-backdrop:blur(4px) saturate(1.16);
}
:root[data-material="liquid"] :where(button,a[role="button"],a.icon-button,a.primary-button,a.secondary-button,[role="button"],summary,.nav-select .ts-control):where(:not(
    .clock,.swatch,.wallpaper-choice,.background-thumb,.plugin-caption,.calendar-date-cell,.music-cover-button,
    .canvas-resize-handle,.canvas-drag-zone,.drag-handle,[data-drag-handle],[data-reorder-handle],
    [role="option"],[role="menuitem"],[data-lab-choice]:not(.engine,.personal-space)
)) {
    --lab-button-paint:linear-gradient(154deg,var(--liquid-glint),transparent 55%,rgb(128 188 233 / .14)),
        var(--lab-button-tint,rgb(var(--liquid-rgb) / .53));
    --lab-button-rim:inset 0 1px 1px var(--liquid-edge),inset 0 -1px 2px rgb(148 200 240 / .22),
        inset 0 0 0 1px var(--liquid-inner);
    --lab-button-depth:0 3px 9px rgb(var(--liquid-shadow) / .18);
    background:var(--lab-button-paint)!important;
    border-color:transparent!important;
    border-radius:999px!important;
    box-shadow:var(--lab-button-rim),var(--lab-button-depth)!important;
    -webkit-backdrop-filter:var(--lab-button-backdrop,none);
    backdrop-filter:var(--lab-button-backdrop,none);
}
:root[data-material="liquid"] .nav-select :is(.ts-control:focus-visible,.ts-control:has(:focus-visible)) {
    outline:2px solid var(--liquid-ink);
    outline-offset:2px;
}
:root[data-material="liquid"] :is(.primary-button,.search-go,.accent-button,button[aria-pressed="true"]) {
    --lab-button-tint:color-mix(in srgb,var(--liquid-selected) 72%,transparent);
}
:root[data-material="liquid"] :is(.danger-button,[data-purge],[data-cat-delete],[data-trash],[data-danger]) {
    --lab-button-tint:color-mix(in srgb,rgb(var(--liquid-rgb) / .7) 86%,var(--liquid-error));
    color:var(--liquid-error);
}

:root[data-material="liquid"] :is([data-lab-button],[data-lab-menu],[data-lab-search],[data-lab-search-results]) {
    isolation:isolate;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transition:none!important;
}
:root[data-material="liquid"] :is(button,a[role="button"],a.icon-button,[role="button"],summary,.nav-select .ts-control):where(:not(.canvas-resize-handle,.canvas-drag-zone,.drag-handle,[data-drag-handle],[data-reorder-handle])),
:root[data-material="liquid"] :is(.nav-select .select-chevron,[data-lab-menu] .option > svg) {transition:none!important;}
:root[data-material="liquid"] :is(button,a[role="button"],a.icon-button,[role="button"],summary,.nav-select .ts-control):where(:not(.canvas-resize-handle,.canvas-drag-zone,.drag-handle,[data-drag-handle],[data-reorder-handle])):active {
    transform:none!important;
    scale:none!important;
    filter:none!important;
}
:root[data-material="liquid"] :is(button,a[role="button"],a.icon-button,[role="button"],summary,.nav-select .ts-control):hover {filter:none!important;}
:root[data-material="liquid"] [data-lab-button] {overflow:visible;border-color:transparent;}
:root[data-material="liquid"] [data-lab-button] > :not(.lg-surface) {
    translate:var(--lab-label-x,0px) var(--lab-label-y,0px);
}
.nav-lab-button-text {display:inline-block;max-width:100%;}
:root[data-material="liquid"] [data-lab-button] > .lg-surface > .lg-surface__shadow {
    box-shadow:var(--lab-button-depth,inset 0 1px 0 var(--liquid-edge),0 4px 14px rgb(var(--liquid-shadow) / .19));
}
:root[data-material="liquid"] [data-lab-button] > .lg-surface > .lg-surface__tint {
    background:var(--lab-button-paint,var(--lab-tint,rgb(var(--liquid-rgb) / .61)));
    box-shadow:var(--lab-button-rim,inset 0 0 0 1px var(--liquid-inner));
}
:root[data-material="liquid"] [data-lab-button] > .lg-surface > .lg-surface__glass--fallback {
    -webkit-backdrop-filter:var(--lab-button-backdrop,none);
    backdrop-filter:var(--lab-button-backdrop,none);
}

.nav-lab-control {position:absolute;display:block;pointer-events:none;height:28px;}
.nav-lab-range {height:36px;}
.nav-lab-control:has(+input:disabled) {opacity:.5;}
.nav-lab-track,.nav-lab-thumb-copy,.lg-thumb,.lg-lens-shadow {position:absolute;}
.nav-lab-track {inset:0;border-radius:999px;box-shadow:inset 0 0 0 1px var(--liquid-control-edge);}
.nav-lab-switch .nav-lab-track {
    background:color-mix(in srgb,var(--liquid-control-edge),var(--liquid-ink) calc(var(--lab-track-value,0) * 100%));
}
.nav-lab-range .nav-lab-track {
    inset:15px 18px auto;height:6px;
    background:linear-gradient(to right,var(--liquid-ink) calc(var(--lab-track-value,0) * 100%),var(--liquid-control-edge) 0);
}
.nav-lab-thumb-copy {inset:-16px;background:rgb(var(--liquid-rgb) / .61);}
.nav-lab-switch .nav-lab-track-copy {inset:16px;}
.nav-lab-range .nav-lab-track-copy {inset:31px 34px auto;}
.lg-thumb,.lg-lens-shadow {left:0;top:0;pointer-events:none;}
.lg-thumb {background:#fff;box-shadow:0 1px 4px rgb(var(--liquid-shadow) / .34);}
.lg-lens-shadow {box-shadow:inset 0 1px 0 var(--liquid-edge),0 4px 14px rgb(var(--liquid-shadow) / .27);}
.nav-lab-control:has(+input:focus-visible) .lg-thumb {outline:2px solid var(--liquid-ink);outline-offset:2px;}
:root[data-material="liquid"] body:is(.home,.admin) input[data-lab-input] {
    opacity:0!important;
    height:44px;
    min-height:44px;
    appearance:none;
    margin-block:0;
    padding:0;
    border:0;
    touch-action:pan-y;
    cursor:pointer;
}
:root[data-material="liquid"] body:is(.home,.admin) input[data-lab-input="switch"] {width:64px;min-width:64px;max-width:64px;flex-basis:64px;}
:root[data-material="liquid"] input[data-lab-input="range"]::-webkit-slider-runnable-track {background:transparent;border:0;height:36px;}
:root[data-material="liquid"] input[data-lab-input="range"]::-moz-range-track {background:transparent;border:0;height:36px;}
:root[data-material="liquid"] input[data-lab-input="range"]::-webkit-slider-thumb {-webkit-appearance:none;width:36px;height:36px;border:0;}
:root[data-material="liquid"] input[data-lab-input="range"]::-moz-range-thumb {width:36px;height:36px;border:0;}
:root[data-material="liquid"] .music-range:has(>input[data-lab-input="range"]) > .music-range-track {visibility:hidden;}

:root[data-material="liquid"] [data-lab-menu] {
    --lab-tint:rgb(var(--liquid-rgb) / .94);
    opacity:var(--lab-menu-opacity,0);
    transform:none!important;
    border-color:transparent;
}
.nav-lab-menu-highlight,.nav-lab-selection {
    position:absolute;
    inset:0 auto auto 0;
    z-index:-1;
    isolation:isolate;
    pointer-events:none;
    --lab-tint:var(--liquid-selected);
}
:is(.nav-lab-menu-highlight,.nav-lab-selection)[hidden],.moving-selection[data-lab-indicator-group]>.selection-indicator {display:none!important;}
:root[data-material="liquid"] [data-lab-menu] :is(.option.active,[role="menuitem"]),
:root[data-material="liquid"] [data-lab-choice]:where(:not(.engine,.personal-space)),
:root[data-material="liquid"] [data-lab-choice]:is(.active,[aria-selected="true"],[aria-pressed="true"],[aria-current="page"]) {
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    transition:none!important;
}
:root[data-material="liquid"] [data-lab-menu][inert] {pointer-events:none;}

:root[data-material="liquid"] #searchForm[data-lab-search] {
    margin-inline:calc((1 - var(--lab-open,0)) * clamp(0px,(100% - 272px) / 2,42px));
    translate:0 calc(-1 * var(--lab-open,0) * var(--lab-search-travel,0px));
    min-height:calc(54px + var(--lab-open,0) * 4px);
}
:root[data-material="liquid"] [data-lab-search] {--lab-tint:rgb(var(--liquid-rgb) / .87);border-color:transparent;}
:root[data-material="liquid"] [data-lab-search] :is(#searchInput,.command-input,.admin-search) {
    background:transparent;
    box-shadow:none;
    border-color:transparent;
}
:root[data-material="liquid"] [data-lab-search]:not([data-lab-search-pointer]):has(:is(#searchInput,.command-input,.admin-search):focus-visible) {
    outline:2px solid var(--liquid-ink);
    outline-offset:3px;
}
:root[data-material="liquid"] [data-lab-search-pointer] :is(#searchInput,.command-input,.admin-search):focus {
    outline:none;
    box-shadow:none;
}
:root[data-material="liquid"] .command-dialog[open]:has([data-lab-search]) {animation:none;}
:root[data-material="liquid"] [data-lab-search-results] {
    --lab-tint:rgb(var(--liquid-rgb) / .94);
    opacity:var(--lab-open,0);
    translate:0 calc(-9px * (1 - var(--lab-open,0)));
    border-color:transparent;
}
.admin-search-shell {display:contents;}
:root[data-material="liquid"] .admin-search-shell {
    display:flex;position:relative;min-width:170px;max-width:400px;flex:1;border-radius:999px;
}
:root[data-material="liquid"] .admin-search-shell .admin-search {width:100%;border-radius:inherit;}
.nav-home-suggestions {
    position:fixed;
    z-index:80;
    box-sizing:border-box;
    overflow:auto;
    overscroll-behavior:contain;
    touch-action:pan-y;
    padding:6px;
    color:var(--liquid-text);
    background:rgb(var(--liquid-rgb) / .92);
    border:1px solid var(--liquid-inner);
    border-radius:var(--radius,18px);
    box-shadow:inset 0 1px 0 var(--liquid-edge),0 10px 24px rgb(var(--liquid-shadow) / .24);
    backdrop-filter:blur(var(--liquid-blur));
}
.home .nav-home-suggestions[hidden] {display:none!important;transition:none;}
.nav-suggestion-group {padding:6px 10px;color:var(--liquid-muted);font-size:12px;}
.nav-suggestion {
    display:grid;
    grid-template-columns:18px minmax(0,1fr) 16px;
    gap:10px;
    align-items:center;
    min-height:44px;
    padding:5px 10px;
    border-radius:var(--r-small,8px);
    cursor:pointer;
}
.nav-suggestion svg {width:16px;height:16px;}
.nav-suggestion:is(:hover,[aria-selected="true"]) {background:var(--liquid-selected);}
.nav-suggestion :is(strong,small) {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-suggestion small {color:var(--liquid-muted);}
.nav-search-status {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

@media (max-width: 700px), (pointer: coarse) {
    :root[data-material="liquid"] {
        --liquid-blur: clamp(0px, var(--glass-blur, 18px), 8px);
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root[data-material="liquid"], :root[data-material="liquid"] body.dark {
        --liquid-alpha: .96;
    }
}

:root[data-material="liquid"] .wallpaper > #wallpaperImage {
    animation-play-state: paused;
}

:root[data-liquid-motion="static"] .liquid-field {
    display: none;
}

@media (forced-colors: active) {
    :root[data-material="liquid"] {
        --liquid-control-edge: ButtonText;
        --liquid-selected: Highlight;
        --liquid-ink: Highlight;
    }
    :root[data-material="liquid"] body {
        forced-color-adjust: auto;
    }
    .liquid-admin-background {
        display: none;
    }
}