/* =====================================================================
   SOTI Pulse — Nav search palette (design 5)
   Loaded site-wide from MasterPage. Self-contained: it must not assume
   search.css is present, so the design tokens it needs are declared
   locally with fallbacks and scoped to the palette's own class names.
   ===================================================================== */

.palette-veil,
.palette,
.mover-veil,
.mover,
.qsearch {
    --ns-pulse-50: #F3EFFE;
    --ns-pulse-75: #ECE2FE;
    --ns-pulse-100: #DED7FA;
    --ns-pulse-200: #CDB3FD;
    --ns-pulse-300: #C1A0FD;
    --ns-ink-900: #111125;
    --ns-ink-700: #303044;
    --ns-ink-600: #525567;
    --ns-ink-500: #5C5C6F;
    --ns-ink-400: #828294;
    --ns-ink-300: #B3BBC4;
    --ns-ink-200: #DDE1E5;
    --ns-ink-100: #F8F9FC;
    --ns-ink-050: #FAFBFC;
    --ns-white: #FFFFFF;
    --ns-ai-wash: #FBFAFF;
    --ns-r-md: 8px;
    --ns-r-lg: 12px;
    --ns-r-xl: 16px;
    --ns-r-pill: 999px;
    --ns-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ns-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --ns-shadow-focus: 0 0 0 3px rgba(193, 160, 253, 0.45);
}

/* ============================ site css firewall ============================ */

.palette input,
.palette button,
.palette a,
.palette kbd,
.palette ul,
.palette li,
.palette p,
.mover input,
.mover button,
.mover a,
.mover kbd,
.mover ul,
.mover li,
.mover p,
a.qsearch,
button.qsearch,
.qsearch kbd {
    margin: 0;
    padding: 0;
    border: 0 solid transparent;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    background-image: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    letter-spacing: normal;
    text-align: inherit;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-text-fill-color: currentColor;
}

.palette input:focus,
.palette input:focus-visible,
.palette button:focus,
.palette button:focus-visible,
.palette a:focus,
.palette a:focus-visible,
.mover input:focus,
.mover input:focus-visible,
.mover button:focus,
.mover button:focus-visible,
.mover a:focus,
.mover a:focus-visible,
a.qsearch:focus,
button.qsearch:focus {
    outline: 0;
    border-color: transparent;
    box-shadow: none;
}

.palette a:hover,
.palette a:focus,
.mover a:hover,
.mover a:focus {
    text-decoration: none;
}

.palette ul,
.palette ol,
.mover ul,
.mover ol {
    list-style: none;
}

.palette img,
.palette svg,
.mover img,
.mover svg,
.qsearch svg {
    display: block;
    max-width: none;
    vertical-align: middle;
}

/* ============================ collapsed trigger ============================ */

a.qsearch,
button.qsearch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    width: auto;
    flex-shrink: 0;
    padding: 0 8px 0 10px;
    border: 1px solid var(--ns-ink-200);
    border-radius: var(--ns-r-pill);
    background: var(--ns-ink-100);
    color: var(--ns-ink-500);
    font: 500 13px/1 var(--ns-font);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.18s var(--ns-ease-out), background 0.18s var(--ns-ease-out);
}

a.qsearch:hover,
button.qsearch:hover {
    border-color: var(--ns-pulse-200);
    background: var(--ns-white);
    text-decoration: none;
}

a.qsearch:focus-visible,
button.qsearch:focus-visible {
    outline: 0;
    border-color: var(--ns-pulse-300);
    box-shadow: var(--ns-shadow-focus);
}

.qsearch__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--ns-ink-400);
}

.qsearch__label {
    flex-shrink: 0;
    white-space: nowrap;
}

.qsearch__kbd {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    height: 19px;
    padding: 0 5px;
    border: 1px solid var(--ns-ink-200);
    border-radius: 5px;
    background: var(--ns-white);
    color: var(--ns-ink-400);
    font: 500 10.5px/1 var(--ns-font);
}

.qsearch__kbd kbd {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

/* The nav links now absorb the squeeze themselves: their fixed 1.875rem margins became a
   gap clamp that compresses to 0.75rem, so the trigger no longer has to shed parts across a
   band of widths to keep "Customer Portal" un-overlapped. One tier is left. Below 2xl the
   label and the kbd chip drop together — the magnifier alone is the whole affordance, and
   the chip advertises a shortcut that is only reachable on a keyboard anyway. Above 2xl the
   pill is the full icon + "Search" + ⌘K. The pill itself never flexes; it is flex-none in the
   nav markup, so this tier changes what it contains, never whether the links fit. */
@media (max-width: 1535px) {
    .qsearch__label,
    .qsearch__kbd {
        display: none;
    }
}

/* ============================ veil + panel ============================ */

/* The palette's own class rules tie with Tailwind preflight's [hidden]{display:none} on
   specificity and win on source order, so the hidden attribute alone does not take these
   layers off the page. Every full-viewport layer therefore declares its own [hidden] rule
   and rests at pointer-events:none, so a veil that is not .on can never eat clicks
   regardless of where an exit animation was interrupted. */
.palette-veil[hidden],
.palette[hidden],
.mover-veil[hidden],
.mover[hidden] {
    display: none !important;
}

.palette-veil {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(17, 17, 37, 0.38);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.palette-veil.on {
    opacity: 1;
    pointer-events: auto;
}

.palette {
    position: fixed;
    z-index: 110;
    top: 84px;
    left: 50%;
    width: min(720px, calc(100vw - 48px));
    max-height: min(78vh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ns-pulse-75);
    border-radius: var(--ns-r-xl);
    background: var(--ns-white);
    box-shadow: 0 24px 64px rgba(17, 17, 37, 0.28);
    font: 400 14px/1.45 var(--ns-font);
    color: var(--ns-ink-900);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-8px) scale(0.99);
    transition: opacity 0.18s var(--ns-ease-out), transform 0.18s var(--ns-ease-out);
}

.palette.on {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%);
}

/* ============================ bar ============================ */

.palette__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    height: 56px;
    padding: 0 14px;
    border-bottom: 1px solid var(--ns-ink-200);
}

.palette__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--ns-ink-400);
}

.palette input.palette__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ns-ink-900);
    font: 500 17px/1 var(--ns-font);
}

.palette input.palette__input::placeholder {
    color: var(--ns-ink-400);
    font: 400 17px/1 var(--ns-font);
    opacity: 1;
}

.palette input.palette__input:focus,
.palette input.palette__input:focus-visible {
    outline: 0;
    border: 0;
    box-shadow: none;
}

.palette button.palette__esc {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.palette kbd,
.mover kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 1px solid var(--ns-ink-200);
    border-radius: 5px;
    background: var(--ns-white);
    color: var(--ns-ink-500);
    font: 500 11px/1 var(--ns-font);
}

/* ============================ chips ============================ */

.palette__chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 10px 14px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--ns-ink-200);
}

.palette__chips::-webkit-scrollbar {
    display: none;
}

.palette button.pchip,
.mover button.pchip {
    flex-shrink: 0;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--ns-ink-200);
    border-radius: var(--ns-r-pill);
    background: var(--ns-white);
    color: var(--ns-ink-600);
    font: 500 13px/1 var(--ns-font);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.18s var(--ns-ease-out), background 0.18s var(--ns-ease-out), color 0.18s var(--ns-ease-out);
}

.palette button.pchip:hover,
.mover button.pchip:hover {
    border-color: var(--ns-pulse-200);
    background: var(--ns-pulse-50);
}

.palette button.pchip.on,
.mover button.pchip.on {
    border-color: var(--ns-pulse-300);
    background: var(--ns-pulse-50);
    color: var(--ns-ink-900);
    font-weight: 600;
}

.palette button.pchip:focus-visible,
.mover button.pchip:focus-visible {
    outline: 0;
    box-shadow: var(--ns-shadow-focus);
}

/* ============================ scroll body ============================ */

.palette__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 0;
}

.palette p.pmsg,
.mover p.pmsg {
    margin: 0;
    padding: 26px 18px;
    color: var(--ns-ink-500);
    font: 400 13.5px/1.45 var(--ns-font);
    text-align: center;
}

.plane {
    padding: 6px 0 10px;
}

.plane + .plane {
    border-top: 1px solid var(--ns-ink-100);
}

.plane__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 16px;
}

.plane__label {
    color: var(--ns-ink-400);
    font: 600 10.5px/1 var(--ns-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.palette button.plane__all,
.mover button.plane__all {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--ns-ink-600);
    font: 500 12px/1 var(--ns-font);
    cursor: pointer;
}

.palette button.plane__all:hover,
.mover button.plane__all:hover {
    color: var(--ns-ink-900);
    text-decoration: underline;
}

.palette button.plane__all:focus-visible,
.mover button.plane__all:focus-visible {
    outline: 0;
    box-shadow: var(--ns-shadow-focus);
    border-radius: 4px;
}

/* A lane whose facet count is nonzero but whose items all lost the shared result page still
   renders, so a type-dominated query cannot make Community or Marketplace silently vanish. */
.palette button.plane__more,
.mover button.plane__more {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 8px 16px;
    color: var(--ns-ink-500);
    font: 400 13px/1.45 var(--ns-font);
    text-align: left;
    cursor: pointer;
}

.palette button.plane__more:hover,
.mover button.plane__more:hover {
    background: var(--ns-ink-050);
    color: var(--ns-ink-900);
}

.palette button.plane__more:focus-visible,
.mover button.plane__more:focus-visible {
    outline: 0;
    box-shadow: var(--ns-shadow-focus);
    border-radius: 4px;
}

/* ============================ rows ============================ */

.palette a.pitem,
.mover a.pitem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    color: inherit;
    font: 400 14px/1.45 var(--ns-font);
    text-decoration: none;
    cursor: pointer;
}

.palette a.pitem:hover,
.mover a.pitem:hover {
    text-decoration: none;
}

.palette a.pitem:hover,
.palette a.pitem.hi,
.mover a.pitem:hover,
.mover a.pitem.hi {
    background: var(--ns-ink-050);
}

.pitem__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--ns-r-md);
    background: var(--ns-pulse-50);
    color: var(--ns-ink-600);
}

.pitem__tile[data-type="help"] {
    background: #E8F3FB;
    color: #0E7CC0;
}

.pitem__tile[data-type="release"] {
    background: #FAF0E2;
    color: #C2731B;
}

.pitem__tile[data-type="video"] {
    background: #E7F5EE;
    color: #2E9E6B;
}

.pitem__tile[data-type="article"] {
    background: #F1ECFD;
    color: #7B54D9;
}

.pitem__tile[data-type="discussion"] {
    background: #FBEDF5;
    color: #C24A8B;
}

.pitem__tile[data-type="compatibility"] {
    background: #E8F3FB;
    color: #0E7CC0;
}

.pitem__tile[data-type="marketplace"] {
    background: #E4F4F6;
    color: #0E93A6;
}

.pitem__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pitem__title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ns-ink-900);
    font: 600 14.5px/1.3 var(--ns-font);
}

.pitem__title mark {
    background: var(--ns-pulse-100);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

.pitem__meta {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ns-ink-500);
    font: 400 12px/1.3 var(--ns-font);
}

.pitem__go {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--ns-ink-300);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s var(--ns-ease-out), transform 0.18s var(--ns-ease-out);
}

.pitem:hover .pitem__go,
.pitem.hi .pitem__go {
    opacity: 1;
    transform: none;
}

/* ============================ ai slot ============================ */

.aislot {
    margin: 6px 14px 10px;
    padding: 11px 12px;
    border: 1px solid var(--ns-pulse-75);
    border-radius: var(--ns-r-lg);
    background: linear-gradient(135deg, var(--ns-pulse-50), var(--ns-ai-wash));
}

.aislot__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aislot__spark {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.sparkpulse {
    animation: ns-sparkpulse 1.3s var(--ns-ease-out) infinite;
}

@keyframes ns-sparkpulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(1.12);
    }
}

.aislot__text {
    flex: 1;
    min-width: 0;
}

.aislot__label {
    color: var(--ns-ink-900);
    font: 600 13.5px/1.2 var(--ns-font);
}

.aislot__sub {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ns-ink-500);
    font: 400 12px/1.35 var(--ns-font);
}

.palette button.aislot__cta,
.mover button.aislot__cta {
    flex-shrink: 0;
    height: 28px;
    padding: 0 14px;
    border: 1px solid var(--ns-pulse-300);
    border-radius: var(--ns-r-pill);
    background: var(--ns-pulse-300);
    color: var(--ns-ink-900);
    font: 600 12.5px/1 var(--ns-font);
    cursor: pointer;
    transition: filter 0.18s var(--ns-ease-out);
}

.palette button.aislot__cta:hover,
.mover button.aislot__cta:hover {
    filter: brightness(1.05);
}

.palette button.aislot__cta:focus-visible,
.mover button.aislot__cta:focus-visible {
    outline: 0;
    box-shadow: var(--ns-shadow-focus);
}

.palette button.aislot__signin,
.mover button.aislot__signin {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--ns-ink-900);
    font: 600 12px/1.35 var(--ns-font);
    text-decoration: underline;
    cursor: pointer;
}

.palette button.aislot__chev,
.mover button.aislot__chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: var(--ns-r-md);
    background: transparent;
    color: var(--ns-ink-500);
    cursor: pointer;
    transition: transform 0.18s var(--ns-ease-out), background 0.18s var(--ns-ease-out);
}

.palette button.aislot__chev:hover,
.mover button.aislot__chev:hover {
    background: var(--ns-white);
}

.palette button.aislot__chev.on,
.mover button.aislot__chev.on {
    transform: rotate(180deg);
}

.palette button.aislot__chev:focus-visible,
.mover button.aislot__chev:focus-visible {
    outline: 0;
    box-shadow: var(--ns-shadow-focus);
}

.aislot__dots {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0 2px 32px;
}

.aislot__dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ns-pulse-300);
    animation: ns-aidot 1.1s var(--ns-ease-out) infinite;
}

.aislot__dots i:nth-child(2) {
    animation-delay: 0.14s;
}

.aislot__dots i:nth-child(3) {
    animation-delay: 0.28s;
}

@keyframes ns-aidot {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

.aislot__body {
    margin-top: 10px;
    color: var(--ns-ink-700);
    font: 400 13.5px/1.55 var(--ns-font);
}

.palette .aislot__body p,
.mover .aislot__body p {
    margin: 0 0 8px;
    font: inherit;
}

.palette .aislot__body p:last-child,
.mover .aislot__body p:last-child {
    margin-bottom: 0;
}

.palette .aislot__body ul,
.mover .aislot__body ul {
    margin: 0 0 8px;
    padding-left: 18px;
    list-style: disc;
}

.palette .aislot__body li,
.mover .aislot__body li {
    margin-bottom: 4px;
    font: inherit;
    list-style: inherit;
}

.aislot__body strong {
    color: var(--ns-ink-900);
    font-weight: 600;
}

.aislot__body .cite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    margin: 0 1px;
    border-radius: 5px;
    background: var(--ns-pulse-200);
    color: var(--ns-ink-900);
    font: 700 9.5px/1 var(--ns-font);
    vertical-align: super;
}

.aislot__srcs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ns-pulse-75);
}

.palette a.aisrc,
.mover a.aisrc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 260px;
    height: 28px;
    padding: 0 11px 0 7px;
    border: 1px solid var(--ns-pulse-75);
    border-radius: var(--ns-r-pill);
    background: var(--ns-white);
    color: var(--ns-ink-700);
    font: 500 12px/1 var(--ns-font);
    text-decoration: none;
}

.palette a.aisrc:hover,
.mover a.aisrc:hover {
    border-color: var(--ns-pulse-300);
    background: var(--ns-pulse-50);
    text-decoration: none;
}

.aisrc__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: var(--ns-pulse-100);
    color: var(--ns-ink-900);
    font: 700 10.5px/1 var(--ns-font);
}

.aisrc__t {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ============================ suggestions ============================ */

.psuggs {
    display: flex;
    flex-direction: column;
}

.palette button.psugg,
.mover button.psugg {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 16px;
    border: 0;
    background: transparent;
    color: var(--ns-ink-700);
    font: 400 13.5px/1.3 var(--ns-font);
    text-align: left;
    cursor: pointer;
}

.palette button.psugg:hover,
.mover button.psugg:hover {
    background: var(--ns-ink-050);
}

.palette button.psugg svg,
.mover button.psugg svg {
    flex-shrink: 0;
    color: var(--ns-ink-400);
}

.palette button.psugg span,
.mover button.psugg span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ============================ footer ============================ */

.palette__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 9px 14px;
    border-top: 1px solid var(--ns-ink-200);
    background: var(--ns-ink-050);
}

.palette button.pfoot__all,
.mover button.pfoot__all {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--ns-ink-700);
    font: 500 12.5px/1 var(--ns-font);
    text-align: left;
    cursor: pointer;
}

.palette button.pfoot__all:hover,
.mover button.pfoot__all:hover {
    color: var(--ns-ink-900);
    text-decoration: underline;
}

.palette button.pfoot__all:focus-visible,
.mover button.pfoot__all:focus-visible {
    outline: 0;
    box-shadow: var(--ns-shadow-focus);
    border-radius: 4px;
}

.pfoot__hints {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    color: var(--ns-ink-400);
    font: 400 11.5px/1 var(--ns-font);
    white-space: nowrap;
}

/* ============================ mobile overlay ============================ */

html.nav-search-open,
html.nav-search-open body {
    overflow: hidden;
}

.mover-veil {
    position: fixed;
    inset: 0;
    z-index: 79;
    background: var(--ns-white);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.mover-veil.on {
    opacity: 1;
    pointer-events: auto;
}

.mover {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ns-white);
    color: var(--ns-ink-900);
    font: 400 14px/1.45 var(--ns-font);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.2s var(--ns-ease-out), transform 0.2s var(--ns-ease-out);
}

.mover.on {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.mover__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top));
    border-bottom: 1px solid var(--ns-ink-200);
}

.mover__field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ns-pulse-300);
    border-radius: var(--ns-r-pill);
    background: var(--ns-white);
    box-shadow: var(--ns-shadow-focus);
}

.mover__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--ns-ink-400);
}

.mover input.mover__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ns-ink-900);
    font: 500 16px/1 var(--ns-font);
    -webkit-appearance: none;
    appearance: none;
}

.mover input.mover__input::placeholder {
    color: var(--ns-ink-400);
    font: 400 16px/1 var(--ns-font);
    opacity: 1;
}

.mover input.mover__input:focus,
.mover input.mover__input:focus-visible {
    outline: 0;
    border: 0;
    box-shadow: none;
}

.mover input.mover__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

.mover button.mover__cancel {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    padding: 0 2px;
    color: var(--ns-ink-600);
    font: 500 14px/1 var(--ns-font);
    cursor: pointer;
}

.mover button.mover__cancel:focus-visible {
    outline: 0;
    box-shadow: var(--ns-shadow-focus);
    border-radius: 4px;
}

.mover__chips {
    padding: 10px 12px;
}

.mover__scroll {
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
}

.mover__foot {
    flex-shrink: 0;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ns-ink-200);
    background: var(--ns-ink-050);
}

.mover button.mover__all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: var(--ns-r-md);
    background: var(--ns-pulse-300);
    color: var(--ns-ink-900);
    font: 600 14px/1 var(--ns-font);
    cursor: pointer;
}

.mover button.mover__all:focus-visible {
    outline: 0;
    box-shadow: var(--ns-shadow-focus);
}

.mover .aislot {
    margin: 8px 12px 10px;
}

.mover .plane__head,
.mover a.pitem,
.mover button.psugg,
.mover p.pmsg {
    padding-left: 12px;
    padding-right: 12px;
}

.mover a.pitem {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* ============================ dark ============================ */

html.dark .palette-veil,
html.dark .palette,
html.dark .mover-veil,
html.dark .mover,
html.dark .qsearch {
    --ns-pulse-50: #182A40;
    --ns-pulse-75: #2A405F;
    --ns-pulse-100: #2A405F;
    --ns-pulse-200: #2362BA;
    --ns-pulse-300: #387FE3;
    --ns-ink-900: #F2F5F9;
    --ns-ink-700: #C5CDD8;
    --ns-ink-600: #9AA4B2;
    --ns-ink-500: #828D9C;
    --ns-ink-400: #6B7585;
    --ns-ink-300: #4A5260;
    --ns-ink-200: #2C333D;
    --ns-ink-100: #1F252D;
    --ns-ink-050: #1C222A;
    --ns-white: #1B2027;
    --ns-ai-wash: #1B2230;
    --ns-shadow-focus: 0 0 0 3px rgba(56, 127, 227, 0.40);
}

/* ============================ reduced motion ============================ */

@media (prefers-reduced-motion: reduce) {
    .palette-veil,
    .palette,
    .mover-veil,
    .mover,
    .qsearch,
    .pchip,
    .pitem__go,
    .aislot__cta,
    .aislot__chev {
        transition: none !important;
    }

    .palette {
        transform: translateX(-50%);
    }

    .mover {
        transform: none;
    }

    .sparkpulse,
    .aislot__dots i {
        animation: none !important;
    }
}