/*
 * Filename: SpeedDial.scss
 * FullPath: modules/projects/veela.css/src/scss/ui/components/speed-dial.scss
 * Change date and time: 21.20.00_23.08.2026
 * Reason for changes: Under geometry clips via data-shape (no getComputedStyle copy).
 */

@use "../../basic/design/wavy-runtime" as *;
@use "../../basic/design/shapes" as *;
@use "./launcher-icon-mask";

/*
 * Keep launcher typography close to its component contract.
 */
@layer components {
    .speed-dial-root.app-oriented-desktop,
    .speed-dial-root {
        --home-font-sans:
            system-ui,
            -apple-system,
            "Segoe UI",
            Roboto,
            "Noto Sans",
            "Helvetica Neue",
            Arial,
            "Apple Color Emoji",
            "Segoe UI Emoji",
            sans-serif;

        /* INVARIANT: figure / widget / label cast stays black — do not follow wallpaper halo. */
        --sd-cast-shadow: color-mix(in oklab, #000 38%, transparent);
        --sd-cast-shadow-deep: color-mix(in oklab, #000 40%, transparent);
        --sd-cast-ink: rgb(0 0 0 / 0.88);
        --sd-cast-glow: rgb(0 0 0 / 0.45);

        container-type: inline-size;
        container-name: speed-dial;
        font-family: var(--home-font-sans);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        font-kerning: normal;
        font-variant-numeric: tabular-nums;
    }

    /* Native Explorer / Settings / Markdown — collapsible right rail. */
    .speed-dial-core-rail {
        /* INVARIANT: rail glyphs sit on the photo — wallpaper ink, not CanvasText / data-theme. */
        --sd-rail-ink: var(--wallpaper-contrast-color, var(--env-launcher-fg, CanvasText));
        position: fixed;
        inset-block: 12%;
        inset-inline-end: 0;
        z-index: 6;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        pointer-events: none;
        max-block-size: 76%;
        min-block-size: 0;
        padding: 0px;
        border: none 0px transparent;
        outline: none 0px transparent;
        color: var(--sd-rail-ink);
    }

    .speed-dial-core-rail__toggle {
        pointer-events: auto;
        align-self: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 1.65rem;
        block-size: 2.6rem;
        margin: 0;
        padding: 0;
        //border: 1px solid color-mix(in oklab, CanvasText 18%, transparent);
        border: 0px none transparent;
        border-inline-end: none;
        border-radius: 10px 0 0 10px;
        background: transparent;//color-mix(in oklab, Canvas 78%, transparent);
        color: color-mix(in oklab, var(--sd-rail-ink) 78%, transparent);
        --icon-color: color-mix(in oklab, var(--sd-rail-ink) 78%, transparent);
        /*backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);*/
        cursor: pointer;
    }

    .speed-dial-core-rail__toggle ui-icon {
        --icon-size: 1.1rem;
        --icon-color: color-mix(in oklab, var(--sd-rail-ink) 78%, transparent);
        pointer-events: none;
    }

    .speed-dial-core-rail__panel {
        pointer-events: auto;
        display: none;
        flex-direction: column;
        gap: 0.45rem;
        padding: 0.55rem 0.45rem;
        min-inline-size: 3.4rem;
        max-inline-size: 5.2rem;
        /* WHY: a short debug pane clips Settings/Transfer unless the panel scrolls. */
        min-block-size: 0;
        max-block-size: 100%;
        overflow: auto;
        border: 1px solid color-mix(in oklab, var(--sd-rail-ink) 16%, transparent);
        border-inline-end: none;
        border-radius: 14px 0 0 14px;
        background: color-mix(in oklab, var(--wallpaper-underlying-color, Canvas) 82%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        color: var(--sd-rail-ink);
    }

    .speed-dial-core-rail[data-open] .speed-dial-core-rail__panel {
        display: flex;
    }

    .speed-dial-core-rail__item {
        appearance: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        margin: 0;
        padding: 0.35rem 0.2rem;
        border: none;
        border-radius: var(--radius-lg);
        background: transparent;
        color: inherit;
        cursor: pointer;
        min-inline-size: 0;
    }

    .speed-dial-core-rail__item:hover,
    .speed-dial-core-rail__item:focus-visible {
        background: color-mix(in oklab, var(--sd-rail-ink) 10%, transparent);
        outline: none;
    }

    .speed-dial-core-rail__item ui-icon {
        --icon-size: 1.55rem;
        --icon-color: var(--sd-rail-ink);
        color: var(--sd-rail-ink);
        pointer-events: none;
    }

    /* Calendar / Quick Settings / pin — collapsible left rail, mirrored from core-rail. */
    .speed-dial-chrome-rail {
        --sd-rail-ink: var(--wallpaper-contrast-color, var(--env-launcher-fg, CanvasText));
        position: fixed;
        inset-block: 12%;
        inset-inline-start: 0;
        z-index: 6;
        display: flex;
        flex-direction: row-reverse;
        align-items: stretch;
        pointer-events: none;
        max-block-size: 76%;
        min-block-size: 0;
        padding: 0;
        border: none;
        outline: none;
        color: var(--sd-rail-ink);
    }

    .speed-dial-chrome-rail__toggle {
        pointer-events: auto;
        align-self: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 1.65rem;
        block-size: 2.6rem;
        margin: 0;
        padding: 0;
        border: 0 none transparent;
        border-radius: 0 10px 10px 0;
        background: transparent;
        color: color-mix(in oklab, var(--sd-rail-ink) 78%, transparent);
        --icon-color: color-mix(in oklab, var(--sd-rail-ink) 78%, transparent);
        cursor: pointer;
    }

    .speed-dial-chrome-rail__toggle ui-icon {
        --icon-size: 1.1rem;
        --icon-color: color-mix(in oklab, var(--sd-rail-ink) 78%, transparent);
        pointer-events: none;
    }

    .speed-dial-chrome-rail__panel {
        pointer-events: auto;
        display: none;
        flex-direction: column;
        gap: 0.45rem;
        padding: 0.55rem 0.45rem;
        min-inline-size: 3.4rem;
        max-inline-size: 5.2rem;
        min-block-size: 0;
        max-block-size: 100%;
        overflow: auto;
        border: 1px solid color-mix(in oklab, var(--sd-rail-ink) 16%, transparent);
        border-inline-start: none;
        border-radius: 0 14px 14px 0;
        background: color-mix(in oklab, var(--wallpaper-underlying-color, Canvas) 82%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        color: var(--sd-rail-ink);
    }

    .speed-dial-chrome-rail[data-open] .speed-dial-chrome-rail__panel {
        display: flex;
    }

    .speed-dial-chrome-rail__item {
        appearance: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        margin: 0;
        padding: 0.35rem 0.2rem;
        border: none;
        border-radius: var(--radius-lg);
        background: transparent;
        color: inherit;
        cursor: pointer;
        min-inline-size: 0;
    }

    .speed-dial-chrome-rail__item:hover,
    .speed-dial-chrome-rail__item:focus-visible,
    .speed-dial-chrome-rail__item[data-pressed] {
        background: color-mix(in oklab, var(--sd-rail-ink) 10%, transparent);
        outline: none;
    }

    .speed-dial-chrome-rail__item ui-icon {
        --icon-size: 1.55rem;
        --icon-color: var(--sd-rail-ink);
        color: var(--sd-rail-ink);
        pointer-events: none;
    }

    .speed-dial-workspace-pager {
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0.55rem;
        z-index: 5;
        display: flex;
        justify-content: center;
        gap: 0.4rem;
        pointer-events: none;
    }

    .speed-dial-workspace-pager__dot {
        pointer-events: auto;
        inline-size: 0.45rem;
        block-size: 0.45rem;
        padding: 0;
        border: none;
        border-radius: var(--radius-full);
        background: color-mix(in oklab, var(--wallpaper-contrast-color, var(--env-launcher-fg, CanvasText)) 35%, transparent);
        cursor: pointer;
    }

    .speed-dial-workspace-pager__dot[data-active] {
        inline-size: 0.85rem;
        background: var(--wallpaper-contrast-color, var(--env-launcher-fg, CanvasText));
    }

    .sd-widget-host {
        overflow: visible;
        position: relative;
        container-type: size;
        container-name: sd-widget;
        aspect-ratio: auto;
        max-inline-size: none;
        max-block-size: none;
        place-self: stretch;
        --tile-size: 100%;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
        clip-path: none !important;
        filter: none !important;
    }

    .sd-widget-host > :is(ui-icon, .ui-ws-item-icon-native, img[data-launcher-icon], .ui-ws-item-icon-img, .ui-ws-item-icon-mask) {
        display: none !important;
    }

    .sd-widget {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        inline-size: 100%;
        block-size: 100%;
        min-inline-size: 0;
        min-block-size: 0;
        padding: clamp(0.45rem, 6cqi, 0.9rem);
        pointer-events: auto;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        box-sizing: border-box;
        isolation: isolate;
        z-index: 1;
    }

    .sd-widget-host:not([data-widget="android"]) {
        pointer-events: auto !important;
        cursor: grab;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        /* INVARIANT: keep `container-type: size` so clock `cqi`/`cqb` track the span. */
    }

    .sd-widget-host[data-interaction-state="onGrab"],
    .sd-widget-host[data-interaction-state="onMoving"] {
        cursor: grabbing;
    }

    .sd-widget--clock,
    .sd-widget--search {
        /* WHY: Material You — wallpaper ink for L, `--base-color` for hue. Contrast stays majority. */
        --sd-widget-seed: var(--base-color, var(--color-primary, #5a9ec8));
        --sd-you-ink: color-mix(
            in oklab,
            var(--wallpaper-contrast-color, var(--env-launcher-fg)) 72%,
            var(--sd-widget-seed) 28%
        );
    }

    .sd-widget--clock {
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.12em;
        overflow: hidden;
        padding-block-start: 1.35rem;
        color: var(--sd-you-ink);
        font-variant-numeric: tabular-nums;
    }

    .sd-widget__time {
        font-size: clamp(1.6rem, min(28cqi, 38cqb), 10rem);
        font-weight: 650;
        line-height: 1;
        letter-spacing: 0.01em;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum" 1;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-inline-size: 100%;
        color: color-mix(in oklab, var(--sd-you-ink) 78%, var(--sd-widget-seed) 22%);
        text-shadow:
            0 1px 2px var(--sd-cast-ink, rgb(0 0 0 / 0.88)),
            0 0 12px var(--sd-cast-glow, rgb(0 0 0 / 0.45));
    }

    .sd-widget__date {
        font-variant-numeric: tabular-nums;
        font-size: clamp(0.75rem, min(10cqi, 12cqb), 2.75rem);
        opacity: 0.86;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-inline-size: 100%;
        color: color-mix(in oklab, var(--sd-you-ink) 88%, var(--wallpaper-contrast-color, var(--env-launcher-fg)) 12%);
        text-shadow:
            0 1px 2px var(--sd-cast-ink, rgb(0 0 0 / 0.88)),
            0 0 8px var(--sd-cast-glow, rgb(0 0 0 / 0.45));
    }

    .ui-ws-item[data-widget="android"] {
        aspect-ratio: auto;
        max-inline-size: none;
        max-block-size: none;
        place-self: stretch;
        pointer-events: none;
    }

    .sd-widget-chrome,
    .sd-widget-resize {
        pointer-events: auto;
        /* INVARIANT: wallpaper contrast + Canvas ring — readable on light and dark wallpaper. */
        --sd-widget-ink: var(--wallpaper-contrast-color, var(--env-launcher-fg, CanvasText));
        --sd-widget-chip: color-mix(in oklab, Canvas 72%, var(--sd-widget-ink) 28%);
        --sd-widget-ring: color-mix(in oklab, var(--sd-widget-ink) 55%, Canvas 45%);
    }

    .sd-widget-chrome {
        position: absolute;
        inset-inline: 0;
        inset-block-start: 0;
        block-size: 1.45rem;
        z-index: 4;
        display: grid;
        place-items: center;
        cursor: grab;
        touch-action: none;
        background: transparent;

        &::before {
            content: "";
            inline-size: 2.4rem;
            block-size: 0.32rem;
            border-radius: var(--radius-full);
            background: var(--sd-widget-chip);
            box-shadow: 0 0 0 1px var(--sd-widget-ring);
            /* WHY: a faint rest hint so the grab strip is findable with a mouse. */
            opacity: 0.01;
            transition: opacity 120ms ease;
        }
    }

    .sd-widget-resize {
        position: absolute;
        inset-inline-end: 0.15rem;
        inset-block-end: 0.15rem;
        z-index: 5;
        inline-size: 1.35rem;
        block-size: 1.35rem;
        padding: 0;
        border: none;
        border-radius: 0.35rem;
        cursor: nwse-resize;
        touch-action: none;
        background: var(--sd-widget-chip);
        box-shadow: 0 0 0 1px var(--sd-widget-ring);
        opacity: 0;
        transition: opacity 120ms ease;

        &::before {
            content: "";
            position: absolute;
            inset-inline-end: 0.22rem;
            inset-block-end: 0.22rem;
            inline-size: 0.5rem;
            block-size: 0.5rem;
            border-inline-end: 2px solid var(--sd-widget-ink);
            border-block-end: 2px solid var(--sd-widget-ink);
            border-radius: 0 0 0.08rem 0;
            filter: drop-shadow(0 0 1px Canvas);
        }

        &::after {
            content: "";
            position: absolute;
            inset: -0.45rem;
        }
    }

    .sd-widget-host:hover,
    .sd-widget-host:focus-within,
    .sd-widget-host:active,
    .sd-widget-host[data-resizing],
    .sd-widget-host[data-interaction-state="onGrab"],
    .sd-widget-host[data-interaction-state="onMoving"] {
        .sd-widget-chrome::before,
        .sd-widget-resize {
            opacity: 1;
        }
    }

    @media (pointer: coarse) {
        .sd-widget-chrome {
            block-size: 2.1rem;
        }

        .sd-widget-resize {
            inline-size: 2.05rem;
            block-size: 2.05rem;
        }
    }

    .speed-dial-root[data-tiles-locked] {
        .sd-widget-host:not([data-widget="android"]) {
            cursor: default;
        }

        .sd-widget-chrome,
        .sd-widget-resize {
            display: none;
            pointer-events: none;
        }
    }

    .sd-widget--android {
        pointer-events: none;
        opacity: 0.08;
    }

    .sd-widget__preview {
        inline-size: 100%;
        block-size: 100%;
        object-fit: contain;
    }

    .sd-widget--search {
        justify-content: center;
        padding-block-start: 2.2rem;
        padding-block-end: 2rem;
        padding-inline: 0.7rem;
    }

    .sd-widget__search {
        inline-size: 100%;
        min-block-size: clamp(2rem, 28cqb, 3.1rem);
        border: 1px solid color-mix(in oklab, var(--sd-you-ink, var(--wallpaper-contrast-color)) 32%, transparent);
        border-radius: var(--radius-full);
        background: color-mix(
            in oklab,
            color-mix(in oklab, var(--wallpaper-underlying-color, Canvas) 78%, var(--sd-widget-seed, var(--base-color)) 22%) 70%,
            transparent
        );
        color: var(--sd-you-ink, var(--wallpaper-contrast-color));
        caret-color: var(--sd-you-ink, currentColor);
        padding: 0.35rem 0.85rem;
        font: inherit;
        font-size: clamp(0.85rem, 8cqi, 1.2rem);
        touch-action: manipulation;
        user-select: text;
        -webkit-user-select: text;
        cursor: text;
    }

    .sd-widget__search::placeholder {
        color: color-mix(in oklab, var(--sd-you-ink, var(--wallpaper-contrast-color)) 62%, transparent);
    }

    .speed-dial-core-rail__label,
    .speed-dial-chrome-rail__label {
        font-size: 0.62rem;
        line-height: 1.15;
        text-align: center;
        max-inline-size: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        opacity: 0.88;
    }

    ui-window-frame,
    ui-modal,
    .ui-grid-item {
        --opacity: 1;
        --scale: 1;
        --rotate: 0deg;
        --translate-x: 0%;
        --translate-y: 0%;
        isolation: isolate;
        content-visibility: auto;
        transform-origin: 50% 50%;
        transform-style: flat;
        transform-box: fill-box;
        translate: 0% 0% 0%;
        opacity: var(--opacity, 1);
        rotate: 0deg;
        scale: 1;
    }

    // Speed Dial (Home) Styles
    .speed-dial-root {
        display: grid;
        grid-row: 1 / -1;
        grid-column: 1 / -1;
        grid-template-columns: minmax(0px, 1fr);
        grid-template-rows: minmax(0px, 1fr);
        pointer-events: auto;
        min-inline-size: 0px;
        min-block-size: var(--lv-height, 100lvb);
        max-inline-size: var(--lv-width, 100lvi);
        max-block-size: var(--lv-height, 100lvb);
        inline-size: var(--lv-width, 100lvi);
        block-size: var(--lv-height, 100lvb);
        box-sizing: border-box;
        inset: 0 auto auto 0;
        position: fixed;
        background-color: transparent;
        overflow: hidden;
        perspective: 72rem;
        transform-style: preserve-3d;
        border-radius: 0px;
        user-select: none;
        user-drag: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: none;

        & > * {
            grid-row: 1 / -1;
            grid-column: 1 / -1;
        }

        &[data-ws-turning] .speed-dial-grid {
            transform-origin: 50% 50%;
            backface-visibility: hidden;
            will-change: transform, opacity;
        }

        .speed-dial-grid--turn-ghost {
            pointer-events: none;
            z-index: 3;
        }
    }

    /* Suppress UA focus ring on orient host (`tabIndex` + programmatic focus for paste). */
    .speed-dial-root.ui-orientbox {
        &:focus,
        &:focus-visible {
            outline: none !important;
            box-shadow: none !important;
        }
    }

    /* WHY: veela `.ui-orientbox` uses `pointer-events: none` for touch routing; desktop needs full-area context menu / paste. */
    .speed-dial-root.app-oriented-desktop.ui-orientbox {
        pointer-events: auto;
    }

    .speed-dial-grid {
        grid-row: 1 / -1;
        grid-column: 1 / -1;
        display: grid;
        /* WHY: `--cs-layout-*` follows `--layout-c/r` + `--orient` (ui-launcher-grid).
         * `--grid-columns` is the JS visual count. They must agree after settings. */
        grid-template-columns: repeat(var(--grid-columns, var(--cs-layout-c, 4)), minmax(0, 1fr));
        grid-template-rows: repeat(var(--grid-rows, var(--cs-layout-r, 8)), minmax(0, 1fr));
        padding: var(--speed-dial-padding, 1rem);
        border-radius: 0px;

        @media (orientation: portrait) {
            padding-block: 2.5rem;
            padding-inline: 1.5rem;
        }

        @media (orientation: landscape) {
            padding-inline: 2.5rem;
            padding-block: 1.5rem;
        }

        // Stack order: labels on top so overflowing text below icon tiles is visible.
        // Labels layer is pointer-events: none so it never blocks interaction.
        &[data-grid-layer="icons"] {
            z-index: 2;
            background: transparent !important;
            pointer-events: none;
            isolation: isolate;
            /* WHY: layout contain + CSS-anchor left under-glow 0×0; blur must paint past the cell. */
            contain: style;
            overflow: visible;

            &:has([data-dragging]) {
                z-index: 3;
            }
        }

        &[data-grid-layer="labels"] {
            z-index: 1;
            background: transparent !important;
            pointer-events: none !important;
            isolation: isolate;
            /* WHY: avoid paint/size contain so wide captions can overflow cells. */
            contain: layout style;
            overflow: visible;
            transition: none !important;
            transition-duration: 0ms !important;
            animation: none !important;
            animation-duration: 0ms !important;
        }

        .sd-drop-ghost {
            pointer-events: none;
            z-index: 0;
            border-radius: 1.15rem;
            background: color-mix(in oklab, CanvasText 12%, transparent);
            box-shadow: inset 0 0 0 2px color-mix(in oklab, CanvasText 38%, transparent);
            min-inline-size: 0;
            min-block-size: 0;
        }

        .ui-ws-item {
            --drag-x: 0px;
            --drag-y: 0px;
            --tile-size: 4rem;

            /* WHY: labels omit the `auto` fallback — missing `--cell-column` must
             * drop this rule so inline `grid-column` from the label template wins. */
            &:not([data-layer="labels"]) {
                grid-column: var(--cell-column, auto);
                grid-row: var(--cell-row, auto);
            }

            position: relative;
            display: grid;
            place-content: center;
            place-items: center;
            place-self: center;
            aspect-ratio: 1 / 1;
            inline-size: 100%;
            block-size: 100%;
            min-inline-size: 0;
            min-block-size: 0;
            max-inline-size: var(--tile-size);
            max-block-size: var(--tile-size);
            grid-template-columns: minmax(0px, 1fr);
            grid-template-rows: minmax(0px, 1fr);

            background-color: transparent;
            pointer-events: auto;
            text-align: center;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
            contain: none;
            overflow: visible;
            z-index: 1;
            filter: none;

            transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0);
            transform-origin: 50% 50%;

            transition: transform 240ms cubic-bezier(0.22, 0.8, 0.3, 1), scale 180ms ease-out, filter 180ms ease-out;

            &:hover {
                scale: 1.06;

                .ui-ws-item-icon:not([data-shape="shapeless"]) {
                    background: color-mix(
                        in oklab,
                        var(--color-surface-container-high, #1f2937) 72%,
                        var(--wallpaper-underlying-color, #121214) 28%
                    );
                    box-shadow: 0 10px 36px -10px var(--sd-cast-shadow-deep, color-mix(in oklab, #000 40%, transparent));
                }
            }

            &.sd-widget-host:hover,
            &[data-widget]:hover,
            &[data-spanned]:hover {
                scale: 1;
            }

            &:active:not(.sd-widget-host):not([data-widget]):not([data-spanned]) {
                scale: 0.94;
            }

            /* WHY: hover/active scale shifts the visual center vs grabOffset; drop then misses the cell. */
            &[data-dragging],
            &[data-interaction-state="onGrab"],
            &[data-interaction-state="onMoving"],
            &[data-interaction-state="onRelax"],
            &[data-interaction-state="onPlace"] {
                scale: 1;
                transition: none !important;
            }

            &.sd-widget-host,
            &[data-widget]:not([data-layer="labels"]),
            &[data-spanned]:not([data-layer="labels"]) {
                /* WHY: launcher grid uses place-items:center + 4rem --tile-size; widgets must fill the span. */
                /* INVARIANT: same origin as icon tiles (`--cs-grid-*` from logical `--cell-x/y`).
                 * JS `--cell-column` is a second visual space and desyncs on CRX remount / orient. */
                grid-column: clamp(1, calc(1 + round(nearest, var(--cs-grid-c, 0), 1)), 16)
                    / span var(--cell-span-x, 1) !important;
                grid-row: clamp(1, calc(1 + round(nearest, var(--cs-grid-r, 0), 1)), 16)
                    / span var(--cell-span-y, 1) !important;
                place-self: stretch !important;
                justify-self: stretch !important;
                align-self: stretch !important;
                aspect-ratio: auto !important;
                inline-size: 100% !important;
                block-size: 100% !important;
                max-inline-size: none !important;
                max-block-size: none !important;
                --tile-size: 100%;
                /* WHY: gridbox locks origin at 50% — wide search scales/settles around the middle. */
                transform-origin: var(--sd-grab-ox, 50%) var(--sd-grab-oy, 50%) !important;
            }

            &.ui-ws-item-icon {
                display: grid;
                transition: background-color 200ms ease, box-shadow 200ms ease;
                --icon-size: 2.2rem;
                --launcher-icon-mask-scale: 1.12;
                /*grid-column: 1 / -1;
                grid-row: 1 / -1;*/
                aspect-ratio: 1 / 1;

                /* WHY: `.shaped` later-layer stretch/fit-content made icon plates non-square. */
                &.shaped:not(.sd-widget-host) {
                    aspect-ratio: 1 / 1 !important;
                    inline-size: min(100%, var(--tile-size, 4rem)) !important;
                    block-size: min(100%, var(--tile-size, 4rem)) !important;
                    /* WHY: `@layer components` `contain:strict` + 1.25rem pad boxes the glyph on WebView. */
                    contain: none !important;
                    padding: 0.35rem !important;
                }

                pointer-events: auto;
                position: relative;
                text-align: center;
                place-content: center;
                place-items: center;
                line-height: 0;
                overflow: hidden;
                contain: layout style;
                cursor: pointer;

                inline-size: 100%;
                block-size: 100%;
                min-inline-size: 0;
                min-block-size: 0;
                max-inline-size: var(--tile-size);
                max-block-size: var(--tile-size);
                padding: 0.8rem;

                &.sd-widget-host,
                &[data-shape="none"] {
                    overflow: visible;
                    aspect-ratio: auto !important;
                    max-inline-size: none !important;
                    max-block-size: none !important;
                    inline-size: 100% !important;
                    block-size: 100% !important;
                    padding: 0;
                    line-height: normal;
                    cursor: default;
                    background: transparent !important;
                    box-shadow: none !important;
                    backdrop-filter: none !important;
                    -webkit-backdrop-filter: none !important;
                    border-radius: 0 !important;
                    clip-path: none !important;
                    filter: none !important;

                    @supports (corner-shape: squircle) {
                        corner-shape: unset;
                    }
                }

                /*
                 * WHY: mix two opaque colors — `… 80%, transparent` showed crisp wallpaper
                 * through the plate. `backdrop-filter` dies on Capacitor WebView and also
                 * inside `.speed-dial-root` `perspective` / `preserve-3d`.
                 */
                background: color-mix(
                    in oklab,
                    var(--color-surface-container, #1a1a1e) 78%,
                    var(--wallpaper-underlying-color, #121214) 22%
                );
                /* INVARIANT: glyph vs plate — not wallpaper ink (white-on-cream). JS luma may overwrite. */
                --sd-figure-ink: var(--color-on-surface, light-dark(#1a1c1f, #e8eaed));
                border: none;
                box-shadow: 0 6px 24px -8px var(--sd-cast-shadow, color-mix(in oklab, #000 38%, transparent));
                backdrop-filter: blur(16px) saturate(1.2);
                -webkit-backdrop-filter: blur(16px) saturate(1.2);
                filter: none;

                :where(html[data-cwsp-native-shell="capacitor"]) & {
                    backdrop-filter: none;
                    -webkit-backdrop-filter: none;
                }

                &:not([data-shape]) {
                    border-radius: 1.5rem !important;

                    @supports (corner-shape: round) {
                        corner-shape: round;
                    }
                }

                /*
                 * WHY: `@layer components` `.shaped` is a later implicit layer — 1.5rem +
                 * stretch/fit-content beat `@layer views` and kept circle as a rounded square.
                 * INVARIANT: `corner-shape: squircle` flattens the 1.5rem arc (looks less round).
                 */
                &[data-shape="circle"] {
                    aspect-ratio: 1 / 1 !important;
                    inline-size: min(100%, var(--tile-size, 4rem)) !important;
                    block-size: min(100%, var(--tile-size, 4rem)) !important;
                    max-inline-size: var(--tile-size, 4rem);
                    max-block-size: var(--tile-size, 4rem);
                    border-radius: 50% !important;

                    @supports (corner-shape: round) {
                        corner-shape: round;
                    }
                }

                &[data-shape="square"] {
                    border-radius: max(0.55rem, 14%) !important;

                    @supports (corner-shape: square) {
                        corner-shape: square;
                    }
                }

                &[data-shape="squircle"] {
                    border-radius: 1.5rem !important;

                    @supports (corner-shape: squircle) {
                        corner-shape: unset;
                    }

                    @supports (corner-shape: round) {
                        corner-shape: round;
                    }
                }

                &[data-shape="wavy"] {
                    @include wavy-shaped(100);
                    
                    @supports (border-shape: inset(0)) {
                        border-shape: var(--clip-path);
                        overflow: hidden !important;
                        corner-shape: superellipse(1);
                        border-radius: 50% !important;
                    }

                    clip-path: var(--clip-path);

                    @supports not (border-shape: inset(0)) {
                        
                    }
                }

                /* WHY: icon is the silhouette — no glass plate; shadow is a black blur clone. */
                &[data-shape="shapeless"] {
                    overflow: visible !important;
                    contain: none;
                    background: transparent !important;
                    box-shadow: none !important;
                    backdrop-filter: none !important;
                    -webkit-backdrop-filter: none !important;
                    border-radius: 0 !important;
                    clip-path: none !important;
                    padding: 0.12rem;

                    @supports (corner-shape: squircle) {
                        corner-shape: unset;
                    }

                    img[data-launcher-icon],
                    img[data-bookmark-favicon],
                    .ui-ws-item-icon-img,
                    ui-icon {
                        object-fit: contain;
                        border-radius: 0;
                    }

                    img.sd-icon-silhouette,
                    ui-icon.sd-icon-silhouette {
                        position: absolute;
                        inset: 0;
                        z-index: 1;
                        pointer-events: none;
                        object-fit: contain;
                        opacity: 0.4;
                        filter: brightness(0) blur(7px);
                        transform: scale(var(--sd-item-icon-scale, var(--sd-launcher-icon-scale, 1))) translateY(8%);
                    }

                    img[data-launcher-icon]:not(.sd-icon-silhouette),
                    img[data-bookmark-favicon]:not(.sd-icon-silhouette),
                    .ui-ws-item-icon-img:not(.sd-icon-silhouette),
                    ui-icon:not(.sd-icon-silhouette) {
                        z-index: 3;
                        filter: none;
                    }

                    --sd-figure-ink: var(--wallpaper-contrast-color, var(--env-launcher-fg, #f7f7f8));

                    &[data-icon-display="glyph"] ui-icon:not(.sd-icon-silhouette) {
                        filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.42));
                    }

                    &[data-icon-display="glyph"] .sd-icon-silhouette {
                        display: none;
                    }
                }

                /* WHY: glyphs appear at compact 0.78; bitmaps keep workspace fill (1.28). */
                &[data-icon-display="glyph"] {
                    --sd-item-icon-scale: 0.78;
                }

                /* Bitmap / glyph zoom — Cap needs inline transform; CSS var is backup. */
                img[data-launcher-icon]:not([data-bookmark-favicon]),
                img[data-bookmark-favicon],
                .ui-ws-item-icon-img,
                ui-icon {
                    transform: scale(var(--sd-item-icon-scale, var(--sd-launcher-icon-scale, 1.28)));
                    transform-origin: center center;
                }

                img[data-icon-pending],
                img[data-launcher-icon]:not([src]),
                ui-icon[data-icon-pending] {
                    opacity: 0;
                    visibility: hidden;
                }

                img[data-launcher-icon]:not([data-bookmark-favicon]) {
                    position: absolute;
                    inset: 0;
                    inline-size: 100%;
                    block-size: 100%;
                    object-fit: cover;
                    object-position: center;
                    pointer-events: none;
                    z-index: 3;
                    filter: drop-shadow(0 1px 3px #0003);
                }

                /*
                 * Bookmark / S2 / chrome favicons — fill the plate shape (clipped by overflow).
                 */
                img[data-bookmark-favicon],
                .ui-ws-item-icon-img[data-bookmark-favicon],
                .ui-ws-item-icon-img:not([data-launcher-icon]) {
                    position: absolute;
                    inset: 0;
                    inline-size: stretch;
                    block-size: stretch;
                    object-fit: cover;
                    object-position: center;
                    image-rendering: auto;
                    border-radius: 0;
                    pointer-events: none;
                    z-index: 3;
                    aspect-ratio: 1 / 1;
                    filter: drop-shadow(0 1px 2px #0002);
                }

                /* Mask path (optional) — ink from `_launcher-icon-mask.scss`. */
                .ui-ws-item-icon-mask[data-launcher-icon] {
                    position: absolute;
                    inset: 0;
                    margin: auto;
                    pointer-events: none;
                    z-index: 3;
                    --launcher-icon-size: var(--icon-size, 2.2rem);
                    --launcher-icon-mask-scale: var(--sd-item-icon-scale, var(--sd-launcher-icon-scale, 1.28));
                }

                ui-icon {
                    position: absolute;
                    inset: 0;
                    inline-size: 100%;
                    block-size: 100%;
                    max-inline-size: none;
                    max-block-size: none;
                    min-inline-size: 0;
                    min-block-size: 0;
                    aspect-ratio: 1 / 1;
                    line-height: 0;
                    z-index: 3;
                    pointer-events: none;
                    filter: drop-shadow(0 1px 2px #0002);

                    &:not([data-launcher-icon]) {
                        --icon-padding: 0.55rem;
                        --icon-size: 1.72rem;
                        --icon-color: var(--sd-figure-ink, var(--color-on-surface, light-dark(#1a1c1f, #e8eaed)));
                        color: var(--icon-color);
                        background: transparent !important;
                    }

                    &[data-launcher-icon] {
                        --icon-padding: 0px;
                        --icon-size: 100%;
                        color: inherit;
                    }
                }
            }

            &.ui-ws-item-label[data-widget] {
                visibility: hidden;
            }

            &.ui-ws-item-label {
                transition: none !important;
                transition-duration: 0ms !important;
                animation: none !important;
                animation-duration: 0ms !important;
                position: absolute;
                inset-inline: 0;
                inset-block-start: 100%;
                pointer-events: none;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                padding-block-start: 0.35rem;
                color: var(--wallpaper-contrast-color, var(--env-launcher-fg, #f7f7f8));
                background: transparent;
                white-space: nowrap;
                overflow: visible;
                filter: none;

                span {
                    transition: none !important;
                    transition-duration: 0ms !important;
                    animation: none !important;
                    animation-duration: 0ms !important;

                    display: inline-flex;
                    place-content: center;
                    place-items: center;
                    overflow: visible;

                    font-size: 0.72rem;
                    font-weight: 500;
                    letter-spacing: 0.01em;
                    color: var(--wallpaper-contrast-color, var(--env-launcher-fg, #f7f7f8));

                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    padding-block: 0.15rem;
                    padding-inline: 0.4rem;
                    max-inline-size: min(100%, 9rem);
                    inline-size: max-content;
                    border-radius: 6px;
                    pointer-events: none;
                    text-align: center;
                    line-height: 1.25;

                    text-shadow:
                        0 1px 2px var(--sd-cast-ink, rgb(0 0 0 / 0.88)),
                        0 0 12px var(--sd-cast-glow, rgb(0 0 0 / 0.45));
                    border: none;
                    background: transparent;
                    backdrop-filter: none;
                    -webkit-backdrop-filter: none;
                    box-shadow: none;
                }
            }

            /*
             * WHY: absolute inset "above" is only for icon-layer captions.
             * Label-layer items already dock via `translate` — applying both double-offsets
             * lower-row titles far above their tiles.
             */
            &:not([data-layer="labels"])[data-label-placement="above"] &.ui-ws-item-label {
                inset-block-start: auto;
                inset-block-end: 100%;
                padding-block-start: 0;
                padding-block-end: 0.35rem;
            }

            &:active {
                will-change: transform;
            }

            &[data-interaction-state="onGrab"],
            &[data-interaction-state="onMoving"] {
                will-change: transform;
                cursor: grabbing;
                z-index: 120;
                transition: none !important;
                transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0);

                &.ui-ws-item-label {
                    opacity: 1;
                    pointer-events: none;
                }
            }

            &[data-interaction-state="onRelax"] {
                will-change: transform;
                z-index: 120;
                transition: none !important;
                transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0);
            }

            &[data-interaction-state="onPlace"] {
                will-change: transform;
                z-index: 120;
                transition: none !important;
                transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0);
            }

            &[data-layer="labels"] {
                z-index: 0;
                filter: none;
                background: transparent !important;
                pointer-events: none !important;
                overflow: visible;
                transition: transform 240ms cubic-bezier(0.22, 0.8, 0.3, 1);
                /* INVARIANT: `--cell-column` is 1-based. If lure wiped it, `--cs-grid-*`
                 * still maps `--cell-x` (including 0) so captions do not auto-flow. */
                grid-column: var(
                    --cell-column,
                    clamp(1, calc(1 + round(nearest, var(--cs-grid-c, 0), 1)), 16)
                ) / span 1 !important;
                grid-row: var(
                    --cell-row,
                    clamp(1, calc(1 + round(nearest, var(--cs-grid-r, 0), 1)), 16)
                ) / span 1 !important;
                place-self: center;

                /*
                 * WHY: Icons use place-self:center in tall grid cells. Captions sit just under the
                 * tile via `translate` (separate from drag `transform`). Host width uses
                 * `--sd-label-max` so long titles can center + ellipsize instead of clipping.
                 */
                --sd-label-gap: 0.8rem;
                --sd-label-max: min(calc(var(--tile-size, 3.5rem) * 2.85), min(94vw, 10.5rem));
                /* WHY: Capacitor WebView has no CSS `translate` — `transform: none` parked captions under tiles. */
                --sd-label-shift: calc((var(--tile-size, 4rem) * 0.5) + var(--sd-label-gap));
                aspect-ratio: auto;
                display: grid;
                justify-items: center;
                align-items: start;
                inline-size: var(--sd-label-max);
                min-inline-size: var(--sd-label-max);
                max-inline-size: var(--sd-label-max);
                /* WHY: auto-height + place-self:center grew long titles into the plate. */
                block-size: 0;
                min-block-size: 0;
                max-block-size: none;
                place-self: center;
                overflow: visible;
                transform: translate3d(0, var(--sd-label-shift), 0);

                &.ui-ws-item-label {
                    background: transparent !important;
                    pointer-events: none !important;
                    /* INVARIANT: undo icon-layer `position:absolute; inset-block-start:100%` or letters sit in gutters. */
                    position: relative !important;
                    inset: unset !important;
                    inline-size: var(--sd-label-max);
                    min-inline-size: var(--sd-label-max);
                    max-inline-size: var(--sd-label-max);
                    margin-inline: 0;
                    padding-block-start: 0;
                    display: grid;
                    justify-items: center;
                    text-align: center;
                    overflow: visible;
                    color: var(--wallpaper-contrast-color, var(--env-launcher-fg, #f7f7f8));
                }

                &.ui-ws-item-label span {
                    pointer-events: none !important;
                    display: block;
                    inline-size: auto;
                    max-inline-size: 100%;
                    margin-inline: auto;
                    text-align: center;
                    white-space: nowrap !important;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-family: inherit;
                    font-size: clamp(0.68rem, calc(0.09 * var(--tile-size, 3.75rem)), 0.82rem);
                    font-weight: 650;
                    letter-spacing: 0.02em;
                    color: var(--wallpaper-contrast-color, var(--env-launcher-fg, #f7f7f8));
                    padding-block: 0.04rem 0.08rem;
                    padding-inline: 0.22rem;
                    border-radius: var(--radius-full);
                    line-height: 1.15;
                    text-shadow:
                        0 1px 2px var(--sd-cast-ink, rgb(0 0 0 / 0.88)),
                        0 0 12px var(--sd-cast-glow, rgb(0 0 0 / 0.45));
                    background: transparent;
                    backdrop-filter: none;
                    -webkit-backdrop-filter: none;
                    box-shadow: none;
                }

                &[data-label-placement="above"] {
                    --sd-label-shift: calc((var(--tile-size, 4rem) * -0.5) - var(--sd-label-gap));
                    align-items: end;

                    &.ui-ws-item-label span {
                        transform: translateY(-100%);
                    }
                }
            }

            &[data-layer="labels"][data-interaction-state="onLabelDocked"] {
                transform: translate3d(0, var(--sd-label-shift), 0) !important;
                transition: none !important;
                cursor: default;
            }

            &[data-layer="labels"][data-interaction-state="onGrab"],
            &[data-layer="labels"][data-interaction-state="onMoving"] {
                transition: none !important;
            }

            &[data-layer="icons"] {
                z-index: 99;
                filter: none;
                touch-action: none;
            }

            &[data-layer="icons"][data-interaction-state="onGrab"],
            &[data-layer="icons"][data-interaction-state="onMoving"],
            &[data-layer="icons"][data-interaction-state="onRelax"],
            &[data-layer="icons"][data-interaction-state="onPlace"] {
                z-index: 120;
            }
        }

        /* Grid-level under siblings of `.ui-ws-item` (DOM children ≈ 2× icons). */
        & > .ui-ws-item-icon-under.underlying-shadow-container,
        & > .ui-ws-item-icon-under {
            background-color: transparent !important;
            pointer-events: none !important;
            overflow: visible !important;
            z-index: 0 !important;
            /* INVARIANT: same cell as the plate — WebView has no CSS-anchor fill. */
            position: relative !important;
            inset: auto !important;
            grid-column: var(--cell-column) / span 1 !important;
            grid-row: var(--cell-row) / span 1 !important;
            place-self: center;
            inline-size: min(100%, var(--tile-size, 4rem));
            block-size: min(100%, var(--tile-size, 4rem));
            filter: blur(12px) !important;
            padding: 0px !important;
            contain: none !important;
            visibility: visible !important;
            content-visibility: visible !important;
            opacity: 1 !important;
            --drag-x: 0px;
            --drag-y: 0px;
            transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0);
            transform-origin: 50% 50%;
            transition: transform 240ms cubic-bezier(0.22, 0.8, 0.3, 1);

            &[data-dragging],
            &[data-interaction-state="onGrab"],
            &[data-interaction-state="onMoving"],
            &[data-interaction-state="onRelax"],
            &[data-interaction-state="onPlace"] {
                z-index: 119 !important;
                transition: none !important;
            }

            &[data-interaction-state="onPlace"],
            &[data-interaction-state="onRelax"] {
                z-index: 0 !important;
            }
        }

        & > .ui-ws-item-icon-under .underlying-shadow-geometry {
            inline-size: 100%;
            block-size: 100%;
            background: #000000af !important;
            transition: filter 200ms ease, box-shadow 200ms ease;
            padding: 0px !important;
            visibility: visible !important;

            /* WHY: match plate clip without copying getComputedStyle (WebView crash on pin). */
            &[data-shape="circle"] {
                border-radius: 50% !important;
            }

            &[data-shape="square"] {
                border-radius: max(0.55rem, 14%) !important;
            }

            &[data-shape="squircle"] {
                border-radius: 1.5rem !important;
            }

            &[data-shape="wavy"] {
                @include wavy-shaped(100);
                clip-path: var(--clip-path);
            }
        }

        & > .ui-ws-item-icon-under:has(+ .ui-ws-item:hover) .underlying-shadow-geometry {
            /*filter: blur(8px) !important;*/
            padding: 0px !important;
            visibility: visible !important;
        }

        /* WHY: shapeless / widgets have no plate under-glow. */
        & > .ui-ws-item-icon-under[data-shape="shapeless"],
        & > .ui-ws-item-icon-under[data-shape="none"],
        & > .ui-ws-item-icon-under:has(+ .ui-ws-item[data-shape="shapeless"]),
        & > .ui-ws-item-icon-under:has(+ .ui-ws-item[data-shape="none"]) {
            display: none !important;
        }
    }

    // Labels are a projection layer: they follow committed grid cells, but
    // never participate in pointer capture, hover scaling, or icon FLIP.
    .speed-dial-label-layer {
        pointer-events: none !important;

        .ui-ws-item {
            pointer-events: none;
            touch-action: auto;
            scale: 1;
            /* WHY: do not zero `transform` — label dock is `translate3d(0, --sd-label-shift, 0)`. */
            z-index: 0;
            grid-column: var(
                --cell-column,
                clamp(1, calc(1 + round(nearest, var(--cs-grid-c, 0), 1)), 16)
            ) / span 1 !important;
            grid-row: var(
                --cell-row,
                clamp(1, calc(1 + round(nearest, var(--cs-grid-r, 0), 1)), 16)
            ) / span 1 !important;
            position: relative;
            transition: none !important;
            transition-duration: 0ms !important;
            animation: none !important;
            animation-duration: 0ms !important;
        }

        .ui-ws-item:hover,
        .ui-ws-item:active {
            scale: 1;
        }
    }

    // Home orient layer: tighter padding and tiles on narrow / short containers.
    .speed-dial-root.app-oriented-desktop {
        .speed-dial-grid.app-oriented-desktop__grid--labels,
        .speed-dial-grid.app-oriented-desktop__grid--icons {
            @container (max-width: 28rem) {
                padding-inline: clamp(0.35rem, 3.2cqw, var(--padding-lg));
                padding-block: clamp(0.35rem, 2.8cqh, var(--padding-lg));
            }

            @container (max-height: 29rem) {
                padding-block: clamp(0.3rem, 2.2cqh, var(--padding-md));
            }
        }

        .ui-ws-item {
            @container (max-width: 28rem) {
                --tile-size: clamp(4rem, 12dvmin, 6rem);

                .ui-ws-item-icon {
                    padding: 0.65rem;
                }
            }
        }
    }

    /*
     * WHY: ShortcutEditor mounts a <dialog class="speed-dial-editor"> via showModal().
     * Host is a full-viewport grid; scrim lives on ::backdrop (top layer).
     */
    .speed-dial-editor {
        --sd-editor-seed: var(--base-color, var(--color-primary, #5a7fff));
        position: fixed;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        max-inline-size: 100%;
        max-block-size: 100%;
        margin: 0;
        border: none;
        padding: 1rem;
        display: grid;
        place-items: center;
        background: transparent;
        color: --u2-color-mod(var(--sd-editor-seed), 100);
        pointer-events: auto;
        contain: none;
        content-visibility: visible;
        overflow: auto;
    }

    .speed-dial-editor::backdrop {
        /* WHY: adaptive scrim from wallpaper seed (same contract as context menu). */
        background: color-mix(
            in oklab,
            --u2-color-mod(var(--base-color, var(--color-primary, #5a7fff)), 920) 58%,
            transparent
        );
        backdrop-filter: blur(10px) saturate(1.08);
        -webkit-backdrop-filter: blur(10px) saturate(1.08);
    }

    .speed-dial-editor__form {
        /*
         * INVARIANT: adaptive colorization via wallpaper `--base-color` + `--u2-color-mod`
         * (same as `.cw-context-menu`). Do not hardcode slate panels here.
         */
        --sd-editor-seed: var(--base-color, var(--color-primary, #5a7fff));
        --sd-editor-ink: --u2-color-mod(var(--sd-editor-seed), 100);
        --sd-editor-muted: color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 100) 70%, transparent);
        --sd-editor-field-bg: --u2-color-mod(var(--sd-editor-seed), 900);
        --sd-editor-field-ink: --u2-color-mod(var(--sd-editor-seed), 100);
        --sd-editor-panel: --u2-color-mod(var(--sd-editor-seed), 860);
        --sd-editor-border: color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 100) 16%, transparent);
        --sd-editor-accent: --u2-color-mod(var(--sd-editor-seed), 520);
        --sd-editor-danger-bg: #7f1d1d;
        --sd-editor-danger-ink: #fff7f7;
        color-scheme: dark;
        inline-size: min(100%, 560px);
        margin-inline: auto;
        border-radius: 18px;
        border: 1px solid var(--sd-editor-border);
        /* WHY: mix surface token + seed panel so wallpaper tint shows through (not opaque slate). */
        background: color-mix(
            in oklab,
            var(--color-surface-container, var(--sd-editor-panel)) 88%,
            transparent
        );
        color: var(--sd-editor-ink);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        /* WHY: never let global .modal-form min-block-size (~90dvb) clip Label above the fold. */
        min-block-size: 0;
        max-block-size: min(86vh, 760px);
        overflow: hidden;
        pointer-events: auto;
        contain: none !important;
        content-visibility: visible !important;
        backdrop-filter: blur(14px) saturate(1.12);
        -webkit-backdrop-filter: blur(14px) saturate(1.12);
        box-shadow:
            0 24px 64px -28px color-mix(in oklab, #000 60%, transparent),
            0 0 0 1px color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 100) 10%, transparent);
    }

    html[data-theme="light"] .speed-dial-editor__form,
    .speed-dial-editor[data-theme="light"] .speed-dial-editor__form,
    .speed-dial-editor__form[data-theme="light"] {
        color-scheme: light only;
        --sd-editor-ink: --u2-color-mod(var(--sd-editor-seed), 900);
        --sd-editor-muted: color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 900) 70%, transparent);
        --sd-editor-field-bg: --u2-color-mod(var(--sd-editor-seed), 140);
        --sd-editor-field-ink: --u2-color-mod(var(--sd-editor-seed), 900);
        --sd-editor-panel: --u2-color-mod(var(--sd-editor-seed), 120);
        --sd-editor-border: color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 900) 14%, transparent);
        --sd-editor-accent: --u2-color-mod(var(--sd-editor-seed), 480);
        --sd-editor-danger-bg: #9f1239;
        --sd-editor-danger-ink: #fff7f7;
        background: color-mix(
            in oklab,
            var(--color-surface-container, var(--sd-editor-panel)) 92%,
            transparent
        );
        color: var(--sd-editor-ink);
        box-shadow:
            0 18px 48px -24px color-mix(in oklab, #0f172a 26%, transparent),
            0 0 0 1px var(--sd-editor-border);
    }

    html[data-theme="dark"] .speed-dial-editor__form,
    .speed-dial-editor[data-theme="dark"] .speed-dial-editor__form,
    .speed-dial-editor__form[data-theme="dark"] {
        color-scheme: dark only;
        --sd-editor-ink: --u2-color-mod(var(--sd-editor-seed), 100);
        --sd-editor-muted: color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 100) 70%, transparent);
        --sd-editor-field-bg: --u2-color-mod(var(--sd-editor-seed), 900);
        --sd-editor-field-ink: --u2-color-mod(var(--sd-editor-seed), 100);
        --sd-editor-panel: --u2-color-mod(var(--sd-editor-seed), 860);
        --sd-editor-border: color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 100) 16%, transparent);
        --sd-editor-accent: --u2-color-mod(var(--sd-editor-seed), 520);
        background: color-mix(
            in oklab,
            var(--color-surface-container, var(--sd-editor-panel)) 88%,
            transparent
        );
        color: var(--sd-editor-ink);
    }

    .speed-dial-editor__form .modal-header {
        display: grid;
        gap: 0.4rem;
        padding: 1rem 1rem 0.75rem;
        border-block-end: none;
        box-shadow: 0 1px 0 var(--sd-editor-border);
    }

    .speed-dial-editor__form .modal-title {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 650;
        line-height: 1.25;
        color: var(--sd-editor-ink);
    }

    .speed-dial-editor__form .modal-description {
        margin: 0;
        font-size: 0.86rem;
        line-height: 1.35;
        color: var(--sd-editor-muted);
    }

    .speed-dial-editor__form .modal-fields {
        display: grid;
        gap: 0.75rem;
        padding: 0.9rem 1rem 1rem;
        overflow: auto;
        min-block-size: 0;
        align-content: start;
    }

    .speed-dial-editor__form .modal-field {
        display: grid;
        gap: 0.35rem;
        pointer-events: auto;
    }

    .speed-dial-editor__form [data-field="span"] .sd-icon-resource-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
    }

    .speed-dial-editor__form input[name="spanCols"],
    .speed-dial-editor__form input[name="spanRows"] {
        min-inline-size: 0;
        inline-size: 100%;
        pointer-events: auto;
    }

    .speed-dial-editor__form .modal-field > :is(span, label) {
        font-size: 0.84rem;
        color: var(--sd-editor-muted);
        /* WHY: normalize sets :where(label){pointer-events:none}; captions must not block. */
        pointer-events: none;
        user-select: none;
        margin: 0;
        font-weight: 600;
    }

    .speed-dial-editor__form :is(input, select, textarea, button, .btn) {
        pointer-events: auto !important;
        position: relative;
        z-index: 1;
    }

    .speed-dial-editor__form :is(input, select, textarea) {
        inline-size: 100%;
        min-inline-size: 0;
        border-radius: var(--radius-md);
        border: 1px solid var(--sd-editor-border);
        background: var(--sd-editor-field-bg);
        color: var(--sd-editor-field-ink);
        caret-color: var(--sd-editor-field-ink);
        padding: 0.55rem 0.7rem;
        outline: none;
        appearance: none;
        /* WHY: form hosts sometimes paint controls but skip hit-testing under content-visibility. */
        contain: none !important;
        content-visibility: visible !important;
    }

    .speed-dial-editor__form :is(input, select, textarea)::placeholder {
        color: color-mix(in oklab, var(--sd-editor-field-ink) 45%, transparent);
    }

    .speed-dial-editor__form textarea {
        resize: vertical;
        min-block-size: 4.4rem;
    }

    .speed-dial-editor__form :is(input, select, textarea):focus {
        border-color: color-mix(in oklab, var(--sd-editor-accent) 64%, --u2-color-mod(var(--sd-editor-seed), 100) 12%);
        box-shadow: 0 0 0 2px color-mix(in oklab, var(--sd-editor-accent) 28%, transparent);
    }

    .speed-dial-editor__form .sd-icon-resource-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 0.45rem;
        min-inline-size: 0;
    }

    .speed-dial-editor__form .sd-icon-resource-row > input {
        inline-size: 100%;
        min-inline-size: 0;
    }

    .speed-dial-editor__form .sd-icon-resource-pick {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 2.4rem;
        block-size: 2.4rem;
        min-inline-size: 2.4rem;
        padding: 0;
        flex: 0 0 auto;
    }

    .speed-dial-editor__form .sd-icon-resource-pick ui-icon {
        --icon-size: 1.25rem;
        --icon-padding: 0;
        inline-size: var(--icon-size);
        block-size: var(--icon-size);
        min-inline-size: var(--icon-size);
        min-block-size: var(--icon-size);
        pointer-events: none;
    }

    .speed-dial-editor__form .modal-actions {
        display: grid;
        grid-template-columns: 1fr auto auto;
        align-items: center;
        justify-items: stretch;
        gap: 0.45rem;
        padding: 0.65rem 0.85rem;
        border-block-start: 1px solid var(--sd-editor-border);
        color: var(--sd-editor-ink);
        background: transparent;
        border: none 0px transparent;
        outline: none 0px transparent;
        min-inline-size: 0;
    }

    .speed-dial-editor__form .modal-actions .modal-actions-spacer {
        display: block;
        min-inline-size: 0;
    }

    .speed-dial-editor__form .modal-actions .btn {
        justify-self: start;
        white-space: nowrap;
        min-inline-size: 0;
        padding: 0.4rem 0.7rem;
    }

    .speed-dial-editor__form .modal-actions .btn.secondary,
    .speed-dial-editor__form .modal-actions .btn.save {
        justify-self: end;
    }

    .speed-dial-editor__form .btn {
        border-radius: var(--radius-md);
        border: 1px solid var(--sd-editor-border);
        padding: 0.46rem 0.86rem;
        font-size: 0.86rem;
        line-height: 1.2;
        cursor: pointer;
        color: var(--sd-editor-ink);
        background: color-mix(in oklab, var(--sd-editor-field-bg) 82%, transparent);
    }

    .speed-dial-editor__form .btn.secondary {
        background: color-mix(in oklab, var(--sd-editor-field-bg) 68%, transparent);
        color: var(--sd-editor-ink);
    }

    .speed-dial-editor__form .btn.save {
        border-color: color-mix(in oklab, var(--sd-editor-accent) 55%, transparent);
        background: color-mix(in oklab, var(--sd-editor-accent) 78%, --u2-color-mod(var(--sd-editor-seed), 920) 22%);
        color: --u2-color-mod(var(--sd-editor-seed), 100);
    }

    html[data-theme="light"] .speed-dial-editor__form .btn.save,
    .speed-dial-editor[data-theme="light"] .speed-dial-editor__form .btn.save,
    .speed-dial-editor__form[data-theme="light"] .btn.save {
        background: color-mix(in oklab, var(--sd-editor-accent) 82%, --u2-color-mod(var(--sd-editor-seed), 120) 18%);
        color: --u2-color-mod(var(--sd-editor-seed), 980);
    }

    .speed-dial-editor__form .btn.danger {
        border-color: color-mix(in oklab, var(--sd-editor-danger-bg) 70%, transparent);
        background: var(--sd-editor-danger-bg);
        color: var(--sd-editor-danger-ink);
    }

    .speed-dial-editor__form .btn:hover {
        filter: brightness(1.08);
    }

    .speed-dial-editor__form [hidden] {
        display: none !important;
    }

    @media (max-width: 820px) {
        .speed-dial-editor {
            place-items: center;
        }
        .speed-dial-editor__form {
            inline-size: 100%;
            max-block-size: 94vh;
        }
    }
}

@layer components {
    :root:has([data-view="home"]),
    html:has([data-view="home"]) {
        /* colors */
        --view-home-bg: linear-gradient(135deg, light-dark(#f8f9fa, #1b1f24) 0%, light-dark(#e9ecef, #0f1216) 100%);
        --view-fg: light-dark(#1a1a1a, #e9ecef);
        --view-border: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12));
        --view-card-bg: light-dark(#ffffff, #1a1f26);
        --view-primary: light-dark(#007acc, #66b7ff);

        /* layout */
        --view-layout: "flex";
        --view-padding: var(--space-8);
        --view-content-max-width: 1200px;
        --view-hero-padding: var(--space-16);
        --view-card-gap: var(--space-6);
    }

    .view-home {
        display: flex;
        align-items: center;
        justify-content: center;
        block-size: 100%;
        padding: 2rem;
        background: var(--view-home-bg);
        color: var(--view-fg);
        overflow-y: auto;

        &__content {
            text-align: center;
            max-inline-size: 800px;
        }

        &__header {
            margin-block-end: 3rem;
        }

        &__title {
            margin: 0;
            font-size: 3rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--view-primary) 0%, light-dark(#0059a6, #3a8ad6) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        &__subtitle {
            margin: 0.5rem 0 0;
            font-size: 1.125rem;
            color: var(--view-fg);
            opacity: 0.7;
        }

        &__actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }

        &__action {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            padding: 1.5rem;
            border: 1px solid var(--view-border);
            border-radius: var(--radius-xl);
            background-color: var(--view-card-bg);
            color: var(--view-fg);
            text-align: center;
            cursor: pointer;
            transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);

            ui-icon {
                opacity: 0.8;
                color: var(--view-primary);
            }

            &:hover {
                transform: translateY(-4px);
                box-shadow: 0 8px 24px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
                border-color: var(--view-primary);

                ui-icon {
                    opacity: 1;
                }
            }

            &:focus-visible {
                outline: 2px solid var(--view-primary);
                outline-offset: 2px;
            }
        }

        &__action-title {
            font-size: 1rem;
            font-weight: 600;
        }

        &__action-desc {
            font-size: 0.8125rem;
            opacity: 0.6;
        }
    }

    /*
     * WHY: desktop launcher must not paint marketing `.view-home` fill over wallpaper.
     * Full host contract also comes from fl-design/ui/home-host-apply (OrientDesktop).
     */
    .view-home.env-home-workspace,
    .view-home.view-home--grid {
        background: transparent !important;
        padding: 0;
        overflow: hidden;
        display: grid;
        align-items: stretch;
        justify-items: stretch;
        /* WHY: host mixin sets pointer-events:none; desktop must receive paste/drop/contextmenu. */
        pointer-events: auto !important;
    }

    .view-home.env-home-workspace > .speed-dial-root,
    .speed-dial-root.app-oriented-desktop {
        pointer-events: auto !important;
    }

    /* Base/minimal shell home should behave as desktop grid host. */
    .view-home--grid {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        justify-items: stretch;
        block-size: 100%;
        inline-size: 100%;
        padding: 0;
        overflow: hidden;
        background: transparent;

        .speed-dial-root {
            position: fixed;
            inset: 0 auto auto 0;
            inline-size: var(--lv-width, 100lvi);
            block-size: var(--lv-height, 100lvb);
            max-inline-size: var(--lv-width, 100lvi);
            max-block-size: var(--lv-height, 100lvb);
            overflow: hidden;
        }
    }

    @container speed-dial (inline-size < 48rem) {
        .view-home {
            --view-hero-padding: var(--space-8);
            --view-card-gap: var(--space-4);
        }
    }

    @container speed-dial (inline-size < 30rem) {
        .view-home__actions {
            grid-template-columns: 1fr;
        }
    }
}

/*
 * WHY: These targeted editor fixes must beat component defaults without relying
 * on unlayered CSS.
 */
@layer overrides {
.speed-dial-editor,
.speed-dial-editor__form,
.speed-dial-editor__form .modal-field,
.speed-dial-editor__form :is(input, select, textarea, button) {
    pointer-events: auto !important;
}

.speed-dial-editor__form {
    contain: none !important;
    content-visibility: visible !important;
    min-block-size: 0 !important;
}

.speed-dial-editor__form .modal-field > label {
    pointer-events: none !important;
}

/* WHY: Cap kept stacking footer groups — flat 3-col grid beats flex wrappers. */
.speed-dial-editor__form .modal-actions {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.speed-dial-editor__form .modal-actions .btn {
    white-space: nowrap !important;
    min-inline-size: 0 !important;
    max-inline-size: none !important;
}

/* WHY: Cap WebView dropped layered grid — button sat under the resource input. */
.speed-dial-editor__form .sd-icon-resource-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 2.5rem !important;
    align-items: stretch !important;
    gap: 0.45rem !important;
    min-inline-size: 0 !important;
    inline-size: 100% !important;
}

.speed-dial-editor__form .sd-icon-resource-row > input {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: none !important;
}

.speed-dial-editor__form .sd-icon-resource-pick {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    inline-size: 2.5rem !important;
    block-size: auto !important;
    min-inline-size: 2.5rem !important;
    max-inline-size: 2.5rem !important;
    min-block-size: 2.5rem !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

.speed-dial-editor__form .sd-icon-resource-pick ui-icon {
    --icon-size: 1.25rem !important;
    --icon-padding: 0 !important;
    inline-size: 1.25rem !important;
    block-size: 1.25rem !important;
    pointer-events: none !important;
}

/* WHY: dialog is a full-viewport host (Cap cannot center a shrink-wrapped <dialog>). */
.sd-icon-picker {
    --sd-editor-seed: var(--base-color, var(--color-primary, #5a9ec8));
    --sd-editor-ink: --u2-color-mod(var(--sd-editor-seed), 100);
    --sd-editor-field-bg: --u2-color-mod(var(--sd-editor-seed), 900);
    --sd-editor-panel: --u2-color-mod(var(--sd-editor-seed), 860);
    --sd-editor-border: color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 100) 16%, transparent);
    --sd-editor-accent: --u2-color-mod(var(--sd-editor-seed), 520);
    color-scheme: dark;
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: 100%;
    max-block-size: 100%;
    margin: 0;
    padding: 1rem;
    display: grid;
    place-items: center;
    place-content: center;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--sd-editor-ink);
    overflow: auto;
    box-shadow: none;
}

html[data-theme="light"] .sd-icon-picker,
.sd-icon-picker[data-theme="light"] {
    color-scheme: light only;
    --sd-editor-ink: --u2-color-mod(var(--sd-editor-seed), 900);
    --sd-editor-field-bg: --u2-color-mod(var(--sd-editor-seed), 140);
    --sd-editor-panel: --u2-color-mod(var(--sd-editor-seed), 120);
    --sd-editor-border: color-mix(in oklab, --u2-color-mod(var(--sd-editor-seed), 900) 14%, transparent);
    --sd-editor-accent: --u2-color-mod(var(--sd-editor-seed), 480);
    color: var(--sd-editor-ink);
}

.sd-icon-picker::backdrop {
    background: color-mix(
        in oklab,
        --u2-color-mod(var(--base-color, var(--color-primary, #5a9ec8)), 920) 58%,
        transparent
    );
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
}

.sd-icon-picker__form {
    display: flex !important;
    flex-direction: column !important;
    inline-size: min(22rem, 100%) !important;
    max-inline-size: 100% !important;
    max-block-size: min(86dvh, 36rem);
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--sd-editor-border);
    border-radius: 18px;
    background: color-mix(
        in oklab,
        var(--color-surface-container-low, var(--sd-editor-panel)) 92%,
        transparent
    );
    color: inherit;
    overflow: hidden;
    box-shadow: 0 24px 64px -28px color-mix(in oklab, #000 60%, transparent);
    backdrop-filter: blur(14px) saturate(1.12);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
    justify-self: center;
    align-self: center;
}

.sd-icon-picker__header {
    display: grid;
    gap: 0.55rem;
    padding: 0.9rem 0.95rem 0.55rem;
}

.sd-icon-picker__title {
    margin: 0;
    font: 650 1.15rem/1.25 ui-sans-serif, system-ui, sans-serif;
    text-align: center;
}

.sd-icon-picker__tabs {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 1fr !important;
    gap: 0.28rem !important;
    inline-size: 100%;
    padding: 0.22rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--sd-editor-field-bg) 42%, transparent);
}

.sd-icon-picker__tabs[hidden] {
    display: none !important;
}

.sd-icon-picker__tab {
    appearance: none !important;
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0.38rem 0.4rem !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: auto !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: inherit !important;
    font: 600 0.74rem/1.2 ui-sans-serif, system-ui, sans-serif !important;
    cursor: pointer;
}

.sd-icon-picker__tab[data-active] {
    background: color-mix(in oklab, var(--sd-editor-accent, currentColor) 28%, transparent) !important;
}

.sd-icon-picker__search {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
    padding: 0.4rem 0.65rem !important;
    border-radius: 0.65rem !important;
    font-size: 0.82rem !important;
}

.sd-icon-picker__search[hidden] {
    display: none !important;
}

.sd-icon-picker__body {
    padding: 0.45rem 0.75rem 0.35rem;
    overflow: auto;
    min-block-size: 0;
    max-block-size: min(28rem, 58dvh);
    background: transparent !important;
}

.sd-icon-picker__section {
    min-inline-size: 0;
}

.sd-icon-picker__section[hidden] {
    display: none !important;
}

.sd-icon-picker__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)) !important;
    gap: 0.5rem 0.4rem !important;
    align-content: start;
    min-inline-size: 0 !important;
}

.sd-icon-picker__grid--browse {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 0.35rem !important;
}

.sd-icon-picker__pack-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.3rem 0.4rem;
    align-items: center;
}

.sd-icon-picker__pack-toolbar .sd-icon-picker__search {
    grid-column: 1 / -1;
}

.sd-icon-picker__pack-back {
    appearance: none !important;
    margin: 0;
    padding: 0.2rem 0.5rem;
    border: 0 !important;
    border-radius: 999px !important;
    background: color-mix(in oklab, var(--sd-editor-field-bg, currentColor) 55%, transparent) !important;
    color: inherit;
    font: 600 0.72rem/1.2 ui-sans-serif, system-ui, sans-serif;
    cursor: pointer;
}

.sd-icon-picker__pack-title {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.74rem;
    opacity: 0.78;
}

.sd-icon-picker__pack-wrap {
    position: relative;
    min-inline-size: 0;
}

.sd-icon-picker__pack-browse {
    appearance: none !important;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    z-index: 1;
    display: grid !important;
    place-items: center;
    margin: 0 !important;
    padding: 0 !important;
    inline-size: 1.2rem !important;
    block-size: 1.2rem !important;
    min-inline-size: 1.2rem !important;
    min-block-size: 1.2rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: color-mix(in oklab, var(--sd-editor-panel, Canvas) 82%, transparent) !important;
    color: inherit;
    cursor: pointer;
}

.sd-icon-picker__pack-browse ui-icon {
    --icon-size: 0.72rem !important;
    --icon-padding: 0 !important;
    inline-size: 0.72rem !important;
    block-size: 0.72rem !important;
    pointer-events: none;
}

.sd-icon-picker__card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto max-content !important;
    justify-items: center !important;
    align-content: start !important;
    align-items: start !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    margin: 0 !important;
    padding: 0.2rem 0.08rem 0.15rem !important;
    min-inline-size: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    border: 0 !important;
    border-radius: 0.7rem !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    cursor: pointer !important;
    overflow: hidden !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    position: static !important;
    z-index: auto !important;
    text-align: center !important;
}

.sd-icon-picker__card:hover,
.sd-icon-picker__card:focus-visible {
    background: color-mix(in oklab, var(--sd-editor-accent, currentColor) 14%, transparent) !important;
    outline: none;
}

.sd-icon-picker__card img {
    display: block !important;
    grid-row: 1 !important;
    flex: 0 0 auto !important;
    inline-size: 3rem !important;
    block-size: 3rem !important;
    max-inline-size: 3rem !important;
    max-block-size: 3rem !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

.sd-icon-picker__card-label {
    display: block !important;
    grid-row: 2 !important;
    font-size: 0.62rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    opacity: 0.88;
}

.sd-icon-picker__card:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

.sd-icon-picker__footer {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem 0.75rem;
    border-block-start: 1px solid var(--sd-editor-border);
}

.sd-icon-picker__cancel {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0.42rem 0.86rem !important;
    inline-size: auto !important;
    width: auto !important;
    min-inline-size: 0 !important;
    max-inline-size: none !important;
    border: 1px solid var(--sd-editor-border) !important;
    border-radius: 0.65rem !important;
    background: color-mix(in oklab, var(--sd-editor-field-bg) 68%, transparent) !important;
    color: inherit !important;
    font: 600 0.82rem/1.2 ui-sans-serif, system-ui, sans-serif;
    cursor: pointer;
}

.sd-widget-picker {
    inline-size: min(90cqi, 92vw);
    max-block-size: 80vh;
    padding: 0.85rem;
    border: none;
    border-radius: 0.85rem;
    background: Canvas;
    color: CanvasText;
}

.sd-widget-picker__list {
    display: grid;
    gap: 0.4rem;
    max-block-size: 60vh;
    overflow: auto;
    margin-block: 0.6rem;
}

.sd-widget-picker__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    inline-size: 100%;
    padding: 0.45rem 0.55rem;
    border: 1px solid color-mix(in oklab, CanvasText 14%, transparent);
    border-radius: 0.55rem;
    background: transparent;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.sd-widget-picker__item img {
    inline-size: 2.2rem;
    block-size: 2.2rem;
    object-fit: contain;
}
}