/* Header switcher (round 27, LST-4, contract D6): a sheet from under the header
   over everything. The host sits outside .siteclick-bar-header with its own
   layer: below the header (rail + 5), above panes and rails, below tip, modal
   overlay and modal. One phase on --sc-motion: the sheet slides down, the veil
   fades; half <-> full is a height transition. Colours from tokens only.
   Round 28 (HDR-2): the sheet is a column and only the list scrolls (no gap above
   the sticky list head); half = auto height per kind, held at --sc-switcher-min
   while the first load runs; glass over the content; 'Alle …' on the bottom edge;
   fades and arrows per side via data-sc-fade.
   Run 29a (LOOP-2): the cards are the one .sc-loop (LOOP-1); half = that loop in one
   row on every width (also phones), so an item keeps its width half <-> full. */
.sc-switcher {
    --sc-switcher-min: 340px;
    --sc-switcher-bg: var(--sc-glass-bg);
    interpolate-size: allow-keywords;
    position: fixed;
    top: var(--sc-top);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: calc(var(--sc-z-rail) + 4);
    pointer-events: none;
}

.sc-switcher[data-sc-switcher="organizations"] {
    --sc-switcher-min: 200px;
}

.sc-switcher[hidden] {
    display: none;
}

.sc-switcher-veil {
    position: absolute;
    inset: 0;
    background: var(--sc-overlay-soft);
    opacity: 0;
    transition: opacity var(--sc-motion);
    pointer-events: auto;
}

.sc-switcher-sheet {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    background: var(--sc-switcher-bg);
    -webkit-backdrop-filter: var(--sc-glass-blur);
    backdrop-filter: var(--sc-glass-blur);
    color: var(--sc-color-text);
    box-shadow: inset 0 -1px 0 var(--sc-color-hairline), var(--sc-shadow-pop);
    transform: translateY(-100%);
    transition: transform var(--sc-motion), height var(--sc-motion);
    pointer-events: auto;
}

html.sc-switcher-open .sc-switcher-veil {
    opacity: 1;
}

html.sc-switcher-open .sc-switcher-sheet {
    transform: none;
}

.sc-switcher[data-sc-switcher-size="full"] .sc-switcher-sheet {
    height: calc(100dvh - var(--sc-top) - var(--sc-bottom, 0px));
}

/* The live editor's resizer lies above every layer; it must not catch clicks on the sheet. */
html.sc-switcher-open .siteclick-ve-resizer {
    pointer-events: none;
}

.sc-switcher-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px 20px 0;
}

/* First load: the loader holds the natural height of the kind (MEET-HDR-0 P2). */
.sc-switcher-body:empty {
    min-height: var(--sc-switcher-min);
}

.sc-switcher .sc-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding-bottom: 16px;
}

.sc-switcher .sc-list-body {
    position: relative;
}

/* 'Alle …' on the bottom edge, only in half; hidden while the sheet is closed. */
.sc-switcher .sc-switcher-all {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, 50%);
    opacity: 0;
    transition: opacity var(--sc-motion);
}

html.sc-switcher-open .sc-switcher-all {
    opacity: 1;
}

.sc-switcher[data-sc-switcher-size="full"] .sc-switcher-all {
    display: none;
}

.sc-switcher-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.sc-switcher-title {
    margin-right: auto;
    font-size: 15px;
    font-weight: var(--sc-font-weight-ui, 500);
    color: var(--sc-color-text-strong);
}

.sc-switcher-close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--sc-radius-md);
    background: transparent;
    color: var(--sc-color-text-muted);
    cursor: pointer;
}

.sc-switcher-close:hover {
    background: var(--sc-color-surface);
    color: var(--sc-color-text-strong);
}

/* Half: one row of cards that scrolls sideways and fades at the edges; no 'Meer'. */
.sc-switcher[data-sc-switcher-size="half"] .sc-switcher-items {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    --sc-fade-l: 0px;
    --sc-fade-r: 0px;
    mask-image: linear-gradient(90deg, transparent, var(--sc-color-black) var(--sc-fade-l), var(--sc-color-black) calc(100% - var(--sc-fade-r)), transparent);
    /* Run 36a1 (KLN-1, r.2): overflow-x also clips y; room for the hover lift of .sc-visual-screen, the box keeps its place. */
    padding-block: 10px;
    margin-block: -10px;
}

.sc-switcher[data-sc-switcher-size="half"] .sc-loop {
    flex-wrap: nowrap;
}

/* The marketing templates have no loop: a fixed card column. */
.sc-switcher[data-sc-switcher-size="half"] .sc-switcher-items:not(.sc-loop) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 220px;
    gap: 16px;
}

.sc-switcher-items[data-sc-fade~="l"] {
    --sc-fade-l: 32px;
}

.sc-switcher-items[data-sc-fade~="r"] {
    --sc-fade-r: 32px;
}

.sc-switcher[data-sc-switcher-size="half"] .sc-switcher-items > * {
    scroll-snap-align: start;
}

.sc-switcher-scroll {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--sc-radius-full);
    background: var(--sc-color-surface);
    color: var(--sc-color-text-strong);
    box-shadow: var(--sc-shadow-pop);
    cursor: pointer;
}

.sc-switcher-scroll[data-sc-switcher-scroll="-1"] {
    left: 8px;
}

.sc-switcher-scroll[data-sc-switcher-scroll="1"] {
    right: 8px;
}

.sc-switcher[data-sc-switcher-size="half"] .sc-list-body:has(> .sc-switcher-items[data-sc-fade~="l"]) > [data-sc-switcher-scroll="-1"],
.sc-switcher[data-sc-switcher-size="half"] .sc-list-body:has(> .sc-switcher-items[data-sc-fade~="r"]) > [data-sc-switcher-scroll="1"] {
    display: block;
}

/* Run 38b (LST-4, Overig): phones only. 'Alle …' sits in the flow under the cards instead of
   on the bottom edge, so it never covers the bar or the prefilters; the sheet never grows past
   the room between header and bottom bar, and nothing paints outside it (the list scrolls in
   .sc-switcher-body). Same selectors as above, later in the file: these win on order. */
@media (max-width: 767px) {
    .sc-switcher-sheet {
        max-height: calc(100dvh - var(--sc-top) - var(--sc-bottom, 0px));
        overflow: clip;
    }

    .sc-switcher .sc-switcher-all {
        position: static;
        transform: none;
        align-self: center;
        margin: 8px 0 12px;
    }
}