/**
 * Siteclick Visual Editor — split-view chrome (Laravel side).
 * Loaded only inside the editor fragment, so it never affects normal admin pages.
 */

/* .siteclick-ve is a plain (static) wrapper: its absolutely-positioned children
   (toolbars + frame) position against the .siteclick-website-preview overlay,
   exactly like the standard preview — so clicks reach the iframe. */

/* ==================================================================
   Default for the draggable width. The overlay GEOMETRY that consumes this
   variable lives in shared.css (head-loaded): this file only loads via the
   <link> in the AJAX fragment, which caused a width flash on open. This
   :root default stays here for the standalone native shell, which does not
   load shared.css but does use the
   calc(100vw - var(--sc-ve-width) - 40px) sidebar rules.
   ================================================================== */
:root {
    --sc-ve-width: 70vw;
    /* EaseInOutExpo — one shared curve for opening, revealing and hovering
       inside the editor chrome. Durations stay as they are; only the shape
       of the movement changes. */
    --sc-ease-expo: cubic-bezier(0.87, 0, 0.13, 1);
}

/* The seam grip (run 38, EDW-1): on the viewer's left edge, inside the viewer
   (.siteclick-ve > .siteclick-ve-resizer), so it moves with the viewer and exists while the viewer
   does. A rest sidebar or a modal simply lies above it; below 1225 px shared.css hides it.
   Run 39c (EDW-1): look, hit strip (centred on the seam) and cursor come from .sc-grip (parts/sc-grip.css). */
.siteclick-ve-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100002;
}

/* While dragging, the iframe must not swallow pointer events. */
.siteclick-ve.is-resizing iframe {
    pointer-events: none;
}

/* Run 38 (EDW-1, P2a): while the width is dragged, the edit sidebars follow on their edges only: their
   iframes keep the width measured on pointerdown (--sc-ve-iframe-w, inline per iframe by
   siteclickVeWidth.drag) and get the new width on a pause or the release. */
html.sc-ve-dragging .siteclick-editor-sidebar {
    overflow: clip;
}

html.sc-ve-dragging .siteclick-editor-sidebar iframe {
    width: var(--sc-ve-iframe-w, 100%);
}

/* Run 38 (NAV-8): the editor and the Design Hub need a wider work area before an open pane turns into
   an overlay (siteclickToggle.fit()); the edit sidebar starts at the left edge (no left rail). */
html:not(.sc-canvas) .siteclick-wrap[data-siteclick-preview-open="true"],
html:not(.sc-canvas) .siteclick-wrap:has(.siteclick-editor-sidebar.active) {
    --sc-min-work: 830px;
}

html:not(.sc-canvas) .siteclick-editor-sidebar {
    left: 0;
}

/* While the viewer width is dragged, the resizer writes --sc-ve-width on every
   pointermove: the sidebar width (calc on that var) snaps at once, but
   shared.css' left transition (250ms, !important) lags behind, so the right
   edge (left + width) of a CLOSED sidebar briefly drifted from 0 and slid
   into the screen as a strip. The flag is on body: the editor sidebars live
   OUTSIDE #siteclick-visual-editor, so .siteclick-ve.is-resizing cannot
   reach them. Higher specificity than shared.css' single-class rule, so this
   wins regardless of stylesheet order. Open/closed state never changes on a
   resize, only the transition is switched off for a moment. */
body.sc-ve-resizing .siteclick-sidebar-rest-left {
    transition: none !important;
}

/* One left edit sidebar (round 19, v.15): a MAIN that replaces another MAIN
   does not slide; without this rule every level switch looks like a new
   sidebar. Same recipe as sc-ve-resizing above. */
body.sc-ve-swap .siteclick-editor-sidebar {
    transition: none !important;
}

/* For the same reason the chrome surfaces that move along must not transition:
   their width/offset hangs on the same sidebar var, so with a transition they
   lagged behind the drag. */
body.sc-ve-resizing .siteclick-content-in,
body.sc-ve-resizing .siteclick-header,
body.sc-ve-resizing .siteclick-subheader,
body.sc-ve-resizing .siteclick-footer {
    transition: none !important;
}

/* The libraries hang their width on the same --sc-ve-width (section 10):
   parked and invisible, their heavy grids (font tiles, icons, media grid)
   would re-layout on every drag frame. So take them out of the layout while
   dragging; after release they come back at the final width in one go. */
body.sc-ve-resizing .siteclick-sidebar-rest.sc-lib:not(.active),
body.sc-ve-resizing .siteclick-sidebar-rest[data-sidebar="sidebar-media"]:not(.active) {
    display: none;
}

/* The toolbar must never overflow to the left: the title block shrinks along,
   the buttons on the right keep their width. `flex: 0 1 auto` (not 1) so the
   hover surface of the block hugs the content instead of filling half the bar. */
.siteclick-ve-bar .siteclick-ve-bar-in .siteclick-ve-page {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
}

.siteclick-ve-bar-right {
    flex: 0 0 auto;
}

/* ------------------------------------------------------------- top bar */

/* Slightly taller than the default 40px so title + URL fit under each other;
   the frame/subbar offsets further down compute with this 48px. Background and
   text colour are explicit: wp-admin lacks .siteclick-container (and with it
   the shared.css toolbar colours), and shared.css' `.siteclick-container a`
   coloured the URL dark-on-dark. */
.siteclick-ve .siteclick-website-preview-toolbar-top {
    height: 48px;
    background: var(--sc-color-dark);
    color: var(--sc-color-white);
}

.siteclick-ve-bar {
    container: vebar / inline-size;
}

.siteclick-ve-bar .siteclick-ve-bar-in {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 48px;
    padding: 0 12px;
}

/* ---- page title + URL (left in the topbar, next to the close button) ---- */

/* Title + slug are one block with one filling hover surface: page switching
   and title/slug editing belong together. The separate buttons inside no
   longer carry their own hover background (except the pencil, which is a
   route of its own). */
.siteclick-ve-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    gap: 0;
    padding: 3px 8px;
    margin-left: -8px;
    border-radius: 5px;
}

.siteclick-ve-page:hover {
    background: var(--ve-hover);
}

/* Titelregel = titelknop (paginawissel) + potlood (titel/slug-paneel), direct
   naast elkaar en op dezelfde regelhoogte uitgelijnd. */
.siteclick-ve-page-titlerow {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}

.siteclick-ve-page-title {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ve-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    padding: 0;
    cursor: pointer;
    max-width: 420px;
}

.siteclick-ve-page-title [data-ve-page-title] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Caret and pencil: directly next to each other, same opacity and same
   vertical axis as the title line (no loose floating glyphs). */
.siteclick-ve-page-caret {
    flex: 0 0 auto;
    width: 10px;
    height: 6px;
    margin-right: 4px;
    opacity: 0.6;
}

.siteclick-ve-page:hover .siteclick-ve-page-caret {
    opacity: 1;
}

/* URL line = the slug editor + the separate open button next to it. */
.siteclick-ve-page-urlrow {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* The page URL under the title: shares the hover surface of .siteclick-ve-page.
   Extra specificity (.siteclick-ve …) so shared.css' `.siteclick-container a`
   no longer overrides the link colour. */
.siteclick-ve .siteclick-ve-page-url {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: 12px;
    line-height: 16px;
    color: var(--ve-ink-subtle);
    text-decoration: none;
    max-width: 400px;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 4px;
}

/* Open the page in a new tab: the URL line itself opens the slug panel,
   so this button is the only discoverable way to the real page. */
.siteclick-ve .siteclick-ve-page-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    color: var(--sc-color-white);
    text-decoration: none;
}

.siteclick-ve .siteclick-ve-page-open:hover {
    color: var(--sc-color-white);
    background: var(--ve-hover);
}

.siteclick-ve-page-open svg {
    width: 12px;
    height: 12px;
}

.siteclick-ve .siteclick-ve-page-url:hover {
    text-decoration: none;
}

/* Base parts of the URL (domain + slashes): subtle ink (run 39c, H6.3), full ink on hover. Hovering
   the block lifts host and slug to readable ink; these rules sit before the
   URL-hover rules (equal specificity) so the URL hover still wins. */
.siteclick-ve .siteclick-ve-url-host {
    color: var(--ve-ink-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
}

.siteclick-ve .siteclick-ve-page:hover .siteclick-ve-url-host {
    color: var(--ve-ink);
}

.siteclick-ve .siteclick-ve-page:hover .siteclick-ve-url-slug {
    color: var(--ve-ink);
    background: var(--ve-chip-hover);
}

.siteclick-ve .siteclick-ve-page-url:hover .siteclick-ve-url-host {
    color: var(--ve-ink);
}

/* Underline only when the line really is a page link. */
.siteclick-ve .siteclick-ve-page-url:not([data-ve-edit-page]):hover .siteclick-ve-url-host {
    text-decoration: underline;
}

/* The slug as its own chip inside the URL: legible white on a light surface,
   so it is clear that precisely this part is clickable and editable. */
.siteclick-ve .siteclick-ve-url-slug {
    flex: 0 1 auto;
    color: var(--ve-ink);
    background: var(--ve-chip);
    padding: 0 6px;
    margin: 0 1px;
    border-radius: 3px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chip lights up on hover over the (whole, clickable) slug line. */
.siteclick-ve .siteclick-ve-page-url:hover .siteclick-ve-url-slug {
    background: var(--sc-color-primary);
    color: var(--ve-ink);
}

/* ---- status-chip (Concept/Gepubliceerd) ---- */

.siteclick-ve-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: var(--ve-ink);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.siteclick-ve-status[hidden] {
    display: none;
}

.siteclick-ve-status:hover {
    background: rgba(255, 255, 255, 0.12);
}

.siteclick-ve-status-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--sc-color-orange); /* concept */
}

.siteclick-ve-status.is-publish .siteclick-ve-status-dot,
.siteclick-ve-status-dot-publish {
    background: var(--sc-color-green);
}

.siteclick-ve-status-dot-draft {
    background: var(--sc-color-orange);
}

/* Status options in the sidebar: small cards with title + explanation. */
.siteclick-ve-status-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.siteclick-ve-status-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    border: 1px solid var(--sc-color-border-strong, #e2e6ea);
    /* Round 8 (Dave 2): white cards in a dark sidebar: token. */
    background: var(--sc-color-surface, #fff);
    color: var(--sc-color-text, #1f2733);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.12s var(--sc-ease-expo), background 0.12s var(--sc-ease-expo);
}

.siteclick-ve-status-option:hover,
.siteclick-ve-status-option.is-active {
    border-color: var(--sc-color-primary);
}

.siteclick-ve-status-option.is-active {
    box-shadow: 0 0 0 1px var(--sc-color-primary) inset;
}

.siteclick-ve-status-option-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-color-text, #1f2733);
}

.siteclick-ve-status-option-desc {
    font-size: 12px;
    color: var(--sc-color-text-muted, #5b6573);
    line-height: 1.4;
}

/* ---- Page settings sidebar ----
   Round 16 (r.19-24): the panel uses the node-panel recipe (sc-np-tabs,
   sc-np-esf-field, sc-np-fieldset from np-fields.css) and the shared card
   grid (np-cardgrid.css, .np-cardgrid-standalone). The own block/region card
   rules are gone as a result: no second recipe next to the panel. */

/* Animations on this page: per level an effect with (for an effect) timing
   and easing next to it. */
.siteclick-ve-anim-level {
    margin-top: 10px;
}

.siteclick-ve-anim-extra {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    margin-top: 6px;
}

.siteclick-ve-anim-extra[hidden] {
    display: none;
}

/* URL preview under the slug field in the page sidebar. */
.siteclick-ve-url-preview {
    margin-top: 6px;
    font-size: 11px;
    color: var(--sc-color-text-muted, #5b6573);
    word-break: break-all;
}

/* .siteclick-ve-tabs (libraries, pickers, link picker) is the one tab strip:
   sizes in parts/sc-tabs.css, colours in ui/ui-tabs.css (run 36a1, TAB-2). */

.siteclick-ve-bar-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* Exactly the same 20px square as every other Siteclick close button
   (shared.css scopes that under .siteclick-container; explicit here so it is
   also right when the editor is injected into wp-admin), only inline in the
   bar instead of absolutely positioned. */
.siteclick-ve-close.siteclick-panel-close {
    position: static;
    color: var(--sc-color-white);
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 auto;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
}

.siteclick-ve-close.siteclick-panel-close i {
    position: relative;
    top: 1px;
}

/* ===== Editor sidebars outside .siteclick-container (wp-admin injection) =====
   shared.css scopes the sidebar base (close-button square, light background,
   text colour) under .siteclick-container; in wp-admin that class is missing
   on the body, which made the close button invisible and rendered panels
   dark-on-dark. Repeat the essentials here, scoped to the editor sidebar
   wrappers; in the app these are no-ops with the same values. */
.siteclick-editor-sidebars .siteclick-panel-close,
.siteclick-editor-sidebars-sub .siteclick-panel-close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background: var(--sc-color-primary);
    color: var(--sc-color-white, #fff);
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    line-height: 20px;
    margin: 10px;
    z-index: 3;
}

.siteclick-editor-sidebars .siteclick-panel-close i,
.siteclick-editor-sidebars-sub .siteclick-panel-close i {
    position: relative;
    top: 1px;
}

/* The static VE panels (page/status/marketing/section) can open dynamically
   as MAIN (.siteclick-editor-sidebar); the iframe layout rules above then set
   padding:0, so restore the default panel padding for these form panels.
   min-height:0 + overflow:auto makes this surface the scroller: without those
   two, the flex rule above clips everything below the visible height.
   Libraries have their own sticky-toolbar scroller (.sc-lib). */
.siteclick-editor-sidebar[data-sidebar^="sidebar-ve-"]:not(.sc-lib) .siteclick-panel-content-in {
    padding: 1rem;
    min-height: 0;
    overflow: auto;
}

/* The format sidebar (subeditor shell, round 18a) is an iframe host: the
   16 px come from the host document itself (f.259), otherwise the padding is
   doubled. :not(.sc-lib) only to beat the rule above (0,4,0); without that
   extra class this lost on specificity and the padding was still doubled. */
.siteclick-editor-sidebar[data-sidebar="sidebar-ve-style-editor"]:not(.sc-lib) .siteclick-panel-content-in {
    padding: 0;
}

/* 8.2 rest-width: the VE dock geometry of the editor sidebars has lived in
   shared.css (head-loaded) since round 11; this file only loads with the AJAX
   fragment, so the parked sub-sidebar jumped one frame. */

/* ---- sub-toolbar (Editor / Marketing) ---- */

.siteclick-ve-subbar {
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    box-sizing: border-box;
    height: 40px;
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 3px;
    /* f.218: no extra bottom space any more; with 8px bottom padding every button
       got 2.5px above and 10.5px below in the same 40px bar. */
    padding: 0 12px;
    background: var(--sc-color-dark, #1f2733);
    border-top: 1px solid var(--sc-chrome-line);
    color: var(--ve-ink);
}

/* EF-07: the Scroll switch can do nothing under prefers-reduced-motion. */
.siteclick-ve [data-ve-effect].is-disabled {
    opacity: .4;
    pointer-events: none;
}
/* shared.css only gives i/span/input in a .siteclick-action-small a left
   margin; this button starts with an <svg>, so the icon stuck to the button
   edge (r.33). Same 0.5rem as the rest of the button row. */
.siteclick-action-small > .siteclick-ve-replay-icon {
    margin-left: 0.5rem;
}

/* Replay effects: spinning icon as loading state while the preview
   re-initialises (the size is at the bottom with the SVG icons). */
[data-ve-replay-effects].is-loading {
    opacity: 0.6;
    pointer-events: none;
}

[data-ve-replay-effects].is-loading .siteclick-ve-replay-icon {
    animation: siteclick-ve-replay-spin 0.8s linear infinite;
}

@keyframes siteclick-ve-replay-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Narrow window: replay label gone (span icon, so outside shared.css'
   `i + span` rule), the ↻ icon stays operable. */
@media screen and (max-width: 1224px) {
    [data-ve-replay-effects] .siteclick-ve-replay-icon + span {
        display: none;
    }
    /* Without a label the icon is alone in the button; the 0.5rem left margin and
       the padding-right of .siteclick-action-small make it symmetric. */
    [data-ve-replay-effects] .siteclick-ve-replay-icon {
        margin-right: 0;
    }
}

/* The frame starts below top bar (48px) + subbar (40px). Run 31 (A16): the
   ground behind the iframe is the fixed chrome ground (#1B1B1B in both themes),
   margin --sc-ve-gutter instead of the 2rem of shared.css.
   Run 31 (A15): the chrome (ve-bar, subbar, bottom bar, tab pill) stays black in
   both themes (23d), so its ink is fixed too: the dark-theme text scale, never
   the theme text tokens. */
.siteclick-ve {
    --sc-ve-gutter: 1rem;
    --ve-ink: var(--sc-color-white);
    --ve-ink-subtle: color-mix(in srgb, var(--sc-color-white) 60%, var(--sc-color-black));
    --ve-ink-faint: color-mix(in srgb, var(--sc-color-white) 33.3%, var(--sc-color-black));
    --ve-ground: var(--sc-color-text-soft-bg);
    --ve-hover: color-mix(in srgb, var(--sc-color-white) 8%, transparent);
    --ve-chip: var(--sc-ve-chip);
    --ve-chip-hover: var(--sc-ve-chip-hover);
}

.siteclick-ve .siteclick-website-preview-frame {
    top: 88px;
    background: var(--ve-ground);
}

.siteclick-ve .siteclick-website-preview-frame-in {
    inset: var(--sc-ve-gutter);
}

/* The rail (34px at .5rem) does not fit in the margin: the frame shifts over. */
.siteclick-ve:has(> .siteclick-ve-rail:not([hidden])) .siteclick-website-preview-frame-in {
    left: calc(var(--sc-ve-gutter) + 34px + 0.5rem);
}

/* 8.1 containment: the scaled iframe (fractional scale = sub-pixel rounding)
   may never bleed outside the preview column. */
.siteclick-ve .siteclick-website-preview-frame,
.siteclick-ve .siteclick-website-preview-frame-in {
    max-width: 100%;
    overflow: hidden;
}

/* Section mode has no sub-toolbar: frame directly under the topbar. */
.siteclick-ve-section .siteclick-website-preview-frame {
    top: 48px;
}

/* ---- marker rail (header / page / footer / panel) ----
   A 34px strip left of the frame (frame-in sits on --sc-ve-gutter), outside the
   build: it costs no layout in the preview and shifts nothing. Two lanes:
   a narrow scroll lane (minimap of the WHOLE document with the viewport thumb)
   and next to it the segment lane, which moves 1:1 with the preview and clips
   at the rail edge, so a header's height is right and the footer only appears
   as it approaches (crossRequest RP-2, t.37-46). */
.siteclick-ve-rail {
    position: absolute;
    left: 0.5rem;
    top: calc(88px + var(--sc-ve-gutter));
    bottom: calc(40px + var(--sc-ve-gutter));
    width: 34px;
    z-index: 5;
    pointer-events: none;
}

/* t.44: the rail can be switched off in the bottom bar. */
.siteclick-ve-rail[hidden] {
    display: none;
}

.siteclick-ve-rail-track {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    pointer-events: auto;
}

/* Viewport thumb: which part of the document is in view. Pointerdown on it
   (or on the lane) scrolls and keeps dragging (54-ve-shell.js). */
.siteclick-ve-rail-thumb {
    position: absolute;
    left: 0;
    width: 6px;
    min-height: 8px;
    border-radius: 3px;
    background: var(--sb-thumb-color);
    cursor: grab;
}

.siteclick-ve-rail-thumb[hidden] {
    display: none;
}

.siteclick-ve-rail-segs {
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 26px;
    overflow: hidden;
}

.siteclick-ve-rail-seg {
    position: absolute;
    left: 0;
    width: 26px;
    border-radius: 4px;
    color: #f59e0b;
    background: color-mix(in srgb, currentColor 22%, transparent);
    box-shadow: inset 2px 0 0 currentColor;
    pointer-events: auto;
    cursor: pointer;
}

/* Since round 19 the page carries its own colour (LEVEL_DOT.page), so rail,
   breadcrumb pill and subbar accent point at the same level. */
.siteclick-ve-rail-seg[data-ve-rail-seg="page"] {
    color: #22B8CF;
}

.siteclick-ve-rail-seg[hidden] {
    display: none;
}

.siteclick-ve-rail-seg:hover {
    background: color-mix(in srgb, currentColor 34%, transparent);
}

/* No document (or an empty document): outline only; the segment stays,
   because clicking it is the way to its tab. */
.siteclick-ve-rail-seg.is-empty {
    background: transparent;
    box-shadow: inset 2px 0 0 currentColor, inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent);
}

/* t.40: the document type sits INSIDE the segment, rotated vertically, and
   stays on the visible part (the shell sets --sc-seg-label-y). */
.siteclick-ve-rail-label {
    position: absolute;
    left: 50%;
    top: var(--sc-seg-label-y, 50%);
    transform: translate(-50%, -50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 10px;
    font-weight: var(--sc-font-weight-ui, 500);
    letter-spacing: 0.06em;
    color: var(--sc-color-white);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0.92;
}

.siteclick-ve-rail-seg.is-short .siteclick-ve-rail-label {
    display: none;
}

/* Image field in the marketing sidebar: np-fields.css supplies
   .sc-np-image-wrap + the :hover show rule, but the overlay buttons and the
   add button live in np-panel.css, which belongs to the panel iframe and is
   not loaded here. Same values, sidebar scope. */
.siteclick-editor-sidebar[data-sidebar="sidebar-ve-marketing"] .np-media img {
    max-width: 100%;
    border-radius: 6px;
    display: block;
}

.siteclick-editor-sidebar[data-sidebar="sidebar-ve-marketing"] .np-media .sc-np-image-wrap {
    max-width: 100%;
}

.siteclick-editor-sidebar[data-sidebar="sidebar-ve-marketing"] .np-media .sc-np-actions {
    display: none;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1;
}

.siteclick-editor-sidebar[data-sidebar="sidebar-ve-marketing"] .np-media .sc-np-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 4px;
    border-radius: 100%;
    background: var(--sc-color-dark);
    color: var(--sc-color-white);
    cursor: pointer;
}

.siteclick-editor-sidebar[data-sidebar="sidebar-ve-marketing"] .np-media .sc-np-icon:hover {
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
}

.siteclick-editor-sidebar[data-sidebar="sidebar-ve-marketing"] .np-media .sc-np-icon svg {
    display: block;
    width: 12px;
    height: 12px;
}

.siteclick-editor-sidebar[data-sidebar="sidebar-ve-marketing"] .np-media .np-media-add {
    display: block;
    width: 100%;
    border: 1px dashed var(--sc-color-border-strong);
    border-radius: 8px;
    background: transparent;
    padding: 14px 8px;
    text-align: center;
    color: var(--sc-color-text-muted);
    cursor: pointer;
}

.siteclick-editor-sidebar[data-sidebar="sidebar-ve-marketing"] .np-media .np-media-add:hover {
    border-color: var(--sc-color-primary);
    color: var(--sc-color-primary);
}

/* Small, muted caption under a sidebar heading. The class comes from the old
   marketing VIEW (now gone), but four other VE sidebars have meanwhile adopted
   it as a shared form: sidebar_nav_name, sidebar_section_public and
   sections/partials/type_sidebar. So it stays until those four let go. */
.siteclick-ve-panel-sub {
    font-size: 12px;
    color: var(--sc-color-text-muted, #5b6573);
    margin-bottom: 10px;
}

/* The preview cards of the marketing sidebar (search engines/networks) have
   lived in public/css/visual-editor/marketing-preview.css since 18b, scoped on
   .sc-mkt; that file only loads in sidebar_marketing.php. Only the headings
   outline stays here. */

/* Headings outline (r.50): a DEVELOPER view: per line the tag as it ends up
   in the HTML, monospace, with the angle brackets in a calmer colour.
   It sits in the dark marketing sidebar, so the colours are literal. */
.sc-ve-headings-code {
    display: flex;
    flex-direction: column;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.7;
}

.sc-ve-heading-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.sc-ve-htag {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-ve-htag .p { color: #8A94A6; }
.sc-ve-htag .t { color: #7C9CF5; font-weight: 600; }
.sc-ve-htag .v { color: #ECECF1; }
.sc-ve-htag.is-missing,
.sc-ve-htag.is-missing .p,
.sc-ve-htag.is-missing .v { color: var(--sc-color-danger); }
.sc-ve-htag.is-muted,
.sc-ve-htag.is-muted .p,
.sc-ve-htag.is-muted .t,
.sc-ve-htag.is-muted .v { color: #A1A1AA; }

.sc-ve-heading-badge {
    flex: 0 0 auto;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: #A1A1AA;
}

/* SVG icons instead of text glyphs in the VE bars. */
.siteclick-ve-replay-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    vertical-align: -1px;
}

/* ------------------------------------------------ left brick-edit panel */

.siteclick-ve-left-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid var(--sc-color-border, #e2e6ea);
    flex: 0 0 auto;
}

.siteclick-ve-left-title {
    font-weight: 600;
    font-size: 14px;
}

.siteclick-ve-left-close {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
    color: var(--sc-color-text, #1f2733);
}

/* Breadcrumb of the selected node's ancestors (Blok › Rij › Kolom › …). */
.siteclick-ve-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--sc-color-border, #e2e6ea);
    flex: 0 0 auto;
    min-height: 0;
}

.siteclick-ve-breadcrumb:empty {
    display: none;
}

.siteclick-ve-breadcrumb-step {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--sc-color-text-muted, #5b6573);
    line-height: 1.2;
}

.siteclick-ve-breadcrumb-step:hover {
    background: var(--sc-color-surface-hover, #eef2f6);
    color: var(--sc-color-text, #1f2733);
}

.siteclick-ve-breadcrumb-step.is-active {
    color: var(--sc-color-text, #1f2733);
    font-weight: 600;
}

.siteclick-ve-breadcrumb-sep {
    color: var(--sc-color-border, #c7ced6);
    font-size: 12px;
    user-select: none;
}

.siteclick-ve-left-body {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
}

.siteclick-ve-panel-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.siteclick-ve-left-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sc-color-panel-bg, #fff);
    z-index: 2;
}

/* --------------------------------------- save bar (inline in the top bar) */

/* No own right border/margin: the bar-right-gap sets the distance and a
   border skewed the alignment (other feedback #8). */
.siteclick-ve-savebar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.siteclick-ve-savebar[hidden] {
    display: none;
}

.siteclick-ve-savebar-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--sc-color-yellow);
    /* NAFIX27C-1: the bar is always black; brighten the yellow instead of a new literal (4,18 -> ~8:1). */
    filter: brightness(1.5);
    white-space: nowrap;
}

/* Compact buttons so they fit the 40px top bar. */
.siteclick-ve-savebar .button {
    white-space: nowrap;
}

/* While saving: swap the buttons for the standard dots loader. */
.siteclick-ve-save-loader {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.siteclick-ve-save-loader[hidden] {
    display: none;
}

.siteclick-ve-save-loader-label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--sc-color-white);
}

.siteclick-ve-savebar.is-saving .siteclick-ve-savebar-label,
.siteclick-ve-savebar.is-saving .button {
    display: none;
}

.siteclick-ve-savebar,
.siteclick-ve-bar-right > *,
.siteclick-ve-close {
    flex: 0 0 auto;
}

@container vebar (max-width: 760px) {
    .siteclick-ve-savebar-label {
        display: none;
    }
}

@container vebar (max-width: 620px) {
    .siteclick-ve-page-urlrow,
    .siteclick-ve .siteclick-ve-page-url {
        display: none;
    }
}

@container vebar (max-width: 480px) {
    .sc-bar-switch-label,
    .siteclick-ve-page {
        display: none;
    }
}

/* The old body-overlay add-chooser + section-picker are removed — adding a brick
   now loads the sections in the native sidebar (see .siteclick-ve-sections). */


/* ===================================================================
   Per-level edit sidebars (brick / column / component)
   The WP ACF panel is hosted in a same-origin (to WP) iframe inside the
   sidebar's .siteclick-panel-content-in, so the panel must fill that slot.
   =================================================================== */

.siteclick-editor-sidebar .siteclick-panel-body,
.siteclick-editor-sidebar .siteclick-panel-body-in,
.siteclick-editor-sidebar .siteclick-panel-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.siteclick-editor-sidebar .siteclick-panel-content-in {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    /* Anchor for the absolute loader shown while the panel iframe loads. */
    position: relative;
}

/* Loader over the panel while its (heavy) fields document loads. Styled here,
   container-independent, so it also renders correctly in the wp-admin shell
   (where the sidebars are injected outside .siteclick-container). */
.siteclick-editor-sidebar .siteclick-panel-content-in > .siteclick-loader-template-absolute {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Round 8 (S5-1): the loading surface was hardcoded white and gave a white
       flash on EVERY panel switch in an otherwise dark editor. */
    background: var(--sc-color-panel-bg, #fff);
}

.siteclick-editor-sidebar .siteclick-panel-content-in .siteclick-loader-inline-absolute {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.siteclick-ve-sidebar-iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    border: 0;
    /* Round 8 (S5-1): the iframe itself painted white until the document had its
       own background: token, and the document additionally sets
       html{background:#000} as the very first head rule. */
    background: var(--sc-color-panel-bg, #fff);
}

/* ===================================================================
   Sections picker (dark library-style sidebar)
   =================================================================== */

/* "+" card visual on an empty image slot (still used by the component picker
   cards without a preview image). */
.siteclick-ve-sections-empty-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.3);
}

.siteclick-ve-sections-empty-visual span {
    font-size: 42px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.75);
}
/* ===================================================================
   Styling sub-sidebars (title / text / button layout pickers)
   =================================================================== */

.siteclick-ve-styling-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 1rem;
}

/* Round 8 (S5-9): in a panel-content-in the 1rem padding is already on the
   container; the own inset came on top of it, doubled. */
.siteclick-panel-content-in > .siteclick-ve-styling-list,
.siteclick-ve-linkpick .siteclick-ve-styling-list { padding: 0; }

/* Level dot in the panel title (VE-6: recognisable level, no paths). */
.siteclick-ve-level-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    flex: 0 0 auto;
}

/* Empty panel footers take no space (VE-6); status is compact grey. */
.siteclick-sidebar-rest .siteclick-panel-footer:empty {
    display: none;
}

/* Link picker sub-sidebar (wysiwyg link from the node panel). */
.siteclick-ve-linkpick {
    padding: 1rem;
}

.siteclick-ve-linkpick .siteclick-ve-styling-list {
    padding: 0;
}

/* Round 21a (B3): the base `overflow: hidden` of .siteclick-panel-content-in
   makes it the scrollport of the sticky search bar and options row; visible
   lets the real scroller (.siteclick-panel-content) count. */
.siteclick-sidebar-rest[data-sidebar="sidebar-editor-link"] .siteclick-panel-content-in {
    overflow: visible;
}

/* Round 21a (B3/B6): sticky search bar above a card list (link picker panes
   Pagina/Collectie-item and the option picker). Opaque, so the cards do not
   show through while they scroll underneath. */
.siteclick-ve-linkpick-search {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-top: -8px;
    padding: 8px 0;
    background: var(--sc-color-panel-bg, #fff);
}

.siteclick-ve-linkpick-search [data-ve-link-search-clear] {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 22px;
    height: 22px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--sc-color-text-muted);
    font-size: 16px;
    line-height: 22px;
    cursor: pointer;
}

.siteclick-ve-linkpick-search [data-ve-link-search-clear]:hover {
    color: var(--sc-color-text);
}

/* Options line at the bottom of the link sidebar: 'new tab' on the left, the
   secondary remove action on the right; the primary action is in the footer.
   Round 21a (B2): a fixed row, sticky at the bottom of the content above the footer. */
.siteclick-ve-linkpick-options {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 0;
    padding: 10px 0 14px;
    background: var(--sc-color-panel-bg, #fff);
}

.siteclick-ve-linkpick-blank {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Round 21a (B2): the new-tab switch -- same size and colours as the
   .siteclick-switch of shared.css, driven by aria-checked. */
.siteclick-ve-linkpick-blank [role="switch"] {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--sc-color-surface-alt);
    background: var(--sc-color-surface);
    cursor: pointer;
}

.siteclick-ve-linkpick-blank [role="switch"]::after {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(50% - 2px);
    background: var(--sc-color-panel-bg);
    transition: left 0.15s ease;
}

.siteclick-ve-linkpick-blank [role="switch"][aria-checked="true"] {
    border-color: var(--sc-color-primary);
    background: var(--sc-color-primary);
}

.siteclick-ve-linkpick-blank [role="switch"][aria-checked="true"]::after {
    left: 50%;
}

.siteclick-ve-linkpick-blank:has([role="switch"]:disabled) {
    opacity: 0.45;
    cursor: default;
}

.siteclick-ve-linkpick-blank [role="switch"]:disabled {
    cursor: default;
}

.siteclick-ve-linkpick-remove {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 12px;
    color: var(--sc-color-text-muted, #5b6573);
    text-decoration: underline;
    cursor: pointer;
}

.siteclick-ve-linkpick-remove:hover {
    color: var(--sc-color-danger);
}

.siteclick-ve-linkpick-subtitle {
    font-weight: 600;
    margin: 16px 0 8px;
}

/* Round 21b (r.122): the anchor chips of the chosen page (Pagina pane). */
.siteclick-ve-linkpick-anchors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.siteclick-ve-linkpick-anchor {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    padding: 4px 10px;
    border: 1px solid var(--sc-color-surface-alt);
    border-radius: 5px;
    background: var(--sc-color-surface);
    color: var(--sc-color-text);
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.siteclick-ve-linkpick-anchor > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--sc-color-text-muted);
}

.siteclick-ve-linkpick-anchor:hover {
    border-color: var(--sc-color-primary);
}

.siteclick-ve-linkpick-anchor.is-active {
    border-color: var(--sc-color-primary);
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
}

.siteclick-ve-linkpick-anchor.is-active > span {
    color: inherit;
}

.siteclick-ve-linkpick-hint {
    font-size: 12px;
    color: var(--sc-color-text-muted);
}

/* Every format option carries its own 'edit' pencil (opens the global style
   editor for THAT object); that replaced the separate ⚙ button under the list,
   which could only edit the active variant. */
.siteclick-ve-styling-item {
    position: relative;
}

/* Round, 24px, icon 14px, always visible; the node panel pencils (.np-card-edit /
   .np-row-edit in np-fields.css) keep their own size. */
.siteclick-ve-styling-edit {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--sc-color-border-strong);
    border-radius: 50%;
    background: var(--sc-color-panel-bg);
    color: var(--sc-color-text-muted);
    cursor: pointer;
    transition: background-color 0.12s var(--sc-ease-expo), color 0.12s var(--sc-ease-expo), border-color 0.12s var(--sc-ease-expo);
}

.siteclick-ve-styling-edit:hover,
.siteclick-ve-styling-edit:focus-visible {
    background: var(--sc-color-primary);
    border-color: var(--sc-color-primary);
    color: var(--sc-color-bg);
}

.siteclick-ve-styling-edit svg {
    width: 14px;
    height: 14px;
}

/* Room for the pencil: the sample text must not run underneath it. */
.siteclick-ve-styling-item .siteclick-ve-styling-card {
    padding-right: 44px;
}

.siteclick-ve-styling-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--sc-color-border-strong, #e2e6ea);
    /* Round 8 (S5-5/S5-9, Jeroen 74) → 18a: the SAMPLE in it is the shared dark
       .np-sample plate (white text), so the site typography always stays
       legible. */
    background: var(--sc-color-surface, #fff);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.12s var(--sc-ease-expo), box-shadow 0.12s var(--sc-ease-expo);
}

.siteclick-ve-styling-card:hover {
    border-color: var(--sc-color-primary);
}

/* The styling that is currently applied to the component. */
.siteclick-ve-styling-card.is-active {
    border-color: var(--sc-color-primary);
    box-shadow: 0 0 0 1px var(--sc-color-primary) inset;
}

.siteclick-ve-styling-thumb {
    flex: 0 0 auto;
    width: 96px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 4px;
    background: var(--sc-color-bg-light, #f4f6f8);
}

.siteclick-ve-styling-thumb img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.siteclick-ve-styling-label {
    flex: 1 1 auto;
    font-size: 14px;
    color: var(--sc-color-text, #1f2733);
}

/* Round 21a (B4/B6/B7): muted path and explanation under a card label. */
.siteclick-ve-styling-sub,
.siteclick-ve-styling-desc {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--sc-color-text-muted, #5b6573);
    overflow-wrap: anywhere;
}

/* Live sample on the shared dark plate (.np-sample, np-cardgrid.css: one
   renderer for panel card and picker, KR-L1 round 18a). The label moves
   below it; on the right there is room for the pencil of
   .siteclick-ve-styling-item. */
.siteclick-ve-styling-card:has(.np-sample) {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 40px 8px 8px;
}

.siteclick-ve-styling-card .np-sample + .siteclick-ve-styling-label {
    padding: 0 4px;
    font-size: 11px;
    color: var(--sc-color-text-muted, #8a94a1);
}

/* ===================================================================
   Add-brick: sections loaded in the sidebar (replaces the old overlay)
   =================================================================== */

.siteclick-ve-sections {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 1rem;
}

.siteclick-ve-sections-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===================================================================
   Media browser (media library: dark picker sidebar + page/
   design-studio mounts). Unscoped: also loads in wp-admin, where
   .siteclick-container is missing.
   =================================================================== */

.siteclick-media-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-top: 14px;
}

/* Round 7 (Dave 25): the WHOLE picker sidebar is a drop target for uploads;
   shared.js sets .is-dragover on the sidebar. */
.siteclick-sidebar-rest[data-sidebar="sidebar-media"].is-dragover,
.siteclick-media-browser.is-dragover {
    outline: 2px dashed var(--sc-color-primary);
    outline-offset: -6px;
}

.siteclick-media-main {
    flex: 1 1 auto;
    min-width: 0;
}

.siteclick-media-detail {
    position: relative;
    flex: 0 0 320px;
    max-width: 320px;
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 8px;
    padding: 12px;
}

.siteclick-media-detail[hidden] {
    display: none;
}

/* Masonry (round 16, r.908-910): library and search results share one view.
   The columns are filled by siteclickMediaMasonry (62-media-add.js): a JS
   balancer, because "Load more" must ADD cards without the existing ones
   jumping; CSS columns always redistribute everything. */
.siteclick-media-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

/* Fallback while a host still hangs its cards directly in the block (no
   columns): the same bandwidth as the old auto-fill grid. */
.siteclick-media-grid > .siteclick-media-card {
    flex: 1 1 130px;
    max-width: 100%;
}

.sc-mmason-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
}

.siteclick-media-card {
    position: relative;
    border: 1px solid rgba(128, 128, 128, 0.25);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

/* Hover pencil (picker mode): the detail route next to one-click picking. */
.siteclick-media-card-edit {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease;
}

.siteclick-media-card:hover .siteclick-media-card-edit,
.siteclick-media-card:focus-within .siteclick-media-card-edit { opacity: 1; }

.siteclick-media-card-edit:hover { background: rgba(0, 0, 0, 0.75); }

.siteclick-media-card:hover {
    border-color: var(--sc-color-primary);
}

.siteclick-media-card.is-selected {
    border-color: var(--sc-color-primary);
    box-shadow: 0 0 0 1px var(--sc-color-primary) inset;
}

/* Natural aspect ratio (r.910): the masonry sets --sc-media-ar on the card
   from the known dimensions. Without dimensions (svg) the tile falls back to 1/1. */
.siteclick-media-card-thumb {
    position: relative;
    aspect-ratio: var(--sc-media-ar, 1 / 1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(128, 128, 128, 0.12);
}

.siteclick-media-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.siteclick-media-card-icon {
    font-size: 28px;
    opacity: 0.6;
}

/* Server processing (video transcode): state over the thumb until the job is done. */
.siteclick-media-card-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
}

.siteclick-media-card.is-failed { border-color: #e05252; }

.siteclick-media-card-name {
    font-size: 11px;
    padding: 6px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.siteclick-media-pagination {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.siteclick-media-detail-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(128, 128, 128, 0.12);
    border-radius: 6px;
    margin-bottom: 10px;
    min-height: 120px;
}

.siteclick-media-detail-preview img {
    max-width: 100%;
    max-height: 220px;
    display: block;
}

.siteclick-media-detail-meta {
    font-size: 11px;
    opacity: 0.7;
    margin-bottom: 10px;
    word-break: break-all;
}

/* Media provenance in the editor (MED-2); same block as media-library.css. */
.siteclick-media-detail-provenance dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 8px 0 12px;
    font-size: 12px;
}

.siteclick-media-detail-provenance dt {
    color: var(--sc-color-text-muted);
}

.siteclick-media-detail-provenance dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.siteclick-media-detail-label {
    display: block;
    font-size: 12px;
    margin: 8px 0 4px;
}

.siteclick-media-detail input[type="text"],
.siteclick-media-detail input[type="number"],
.siteclick-media-detail select,
.siteclick-media-detail textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 13px;
}

.siteclick-media-detail textarea {
    resize: vertical;
}

.siteclick-media-detail-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

/* ── Section type badge (§5.4) in the VE section picker; same principle as
   site-sections.css (the picker does not load that file). ── */
.sc-sectiontype-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.12);
    color: #eee;
}
.sc-sectiontype-variabelen { background: rgba(242, 140, 56, 0.25); color: #f2a961; }
.sc-sectiontype-vast       { background: rgba(226, 85, 79, 0.22);  color: #f08a85; }

/* The page-switch sidebar itself lives in css/visual-editor/page-switch.css
   (CP-L1); only this one rule stays here.
   '+ Page' as footer action next to Cancel; opens the 'New page' sidebar
   (native-only). [hidden] explicit: shared.css' .button-display otherwise
   beats the UA attribute. */
.siteclick-ve-pageswitch-new[hidden] { display: none; }

/* Z-134 (§13.4) / test round 2 #11: global format from the editor: the
   Design Studio part-editor fragment in an ordinary editor sidebar. The layout
   (flex column down to the footer) comes from the shared
   .siteclick-editor-sidebar rules above; only what is its own is here.
   Sits one layer above the node sidebars (1000000005): it opens FROM such a
   panel and must land on top of it. */
.siteclick-sidebar-rest[data-sidebar="sidebar-ve-style-editor"].siteclick-editor-sidebar {
    z-index: 1000000006 !important;
}

.siteclick-sidebar-rest[data-sidebar="sidebar-ve-style-editor"] .siteclick-panel-content-in {
    display: flex;
    flex-direction: column;
}

/* Host + iframe fill the lower pane: the host document keeps its own internal
   scroller, the sidebar does not scroll along (t.155). */
.siteclick-ve-styleeditor-host {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.siteclick-ve-styleeditor-iframe {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: 100%;
    border: 0;
}

/* Text-effect sub-sidebar: the node-panel document fills the whole content
   surface (the panel has its own tabs, sample line and buttons). */
.siteclick-sidebar-rest[data-sidebar="sidebar-editor-effect"] .siteclick-panel-content,
.siteclick-sidebar-rest[data-sidebar="sidebar-editor-effect"] .siteclick-panel-content-in,
.siteclick-sidebar-rest[data-sidebar="sidebar-se-bg-layers"] .siteclick-panel-content,
.siteclick-sidebar-rest[data-sidebar="sidebar-se-bg-layers"] .siteclick-panel-content-in {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}

.siteclick-ve-effect-iframe {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
}

.siteclick-ve-styleeditor-status {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 60px;
    z-index: 2;
    padding: 6px 16px;
    font-size: 12px;
    color: var(--sc-color-text-muted, #5b6573);
    background: var(--sc-color-bg-light, #f4f6f8);
    border-top: 1px solid var(--sc-color-border, #e2e6ea);
}

.siteclick-ve-styleeditor-status:empty {
    display: none;
}

.siteclick-panel-footer .button[hidden] {
    display: none;
}

/* ── Subeditor (64-subeditor.js) ────────────────────────────────────
   Dark sample block above the settings; sits in
   .siteclick-panel-body-in OUTSIDE .siteclick-panel-content, with the splitter
   between them. --se-split is the drag position per type (localStorage);
   without a stored position the splitter sits at 50/50 (t.157). */

/* The sample is a flow element BEFORE the scroller, but shared.css keeps
   .siteclick-panel-content absolute (top:40;bottom:0), so the scroller paints
   over it and the block is invisible. The same flex column applies to every
   sidebar that got a sample block via siteclickSubeditor.attach()
   (.has-se-block): .siteclick-panel-body-in is the surface between title bar
   (40px) and footer (60px) and the scroller takes part in the flex column. */
.siteclick-editor-sidebar.has-se-block .siteclick-panel-body,
.siteclick-editor-sidebar[data-sidebar="sidebar-ve-style-editor"] .siteclick-panel-body {
    height: 100%;
}

.siteclick-editor-sidebar.has-se-block .siteclick-panel-body-in,
.siteclick-editor-sidebar[data-sidebar="sidebar-ve-style-editor"] .siteclick-panel-body-in {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 40px 0 60px;
}

/* t.155: the host document scrolls itself, so this pane must NOT scroll
   along; otherwise the iframe moves up and the light sidebar ground shows. */
.siteclick-editor-sidebar.has-se-block .siteclick-panel-content,
.siteclick-editor-sidebar[data-sidebar="sidebar-ve-style-editor"] .siteclick-panel-content {
    position: static;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
    background: var(--sc-color-panel-bg);
}

/* The attached panel iframe fills the lower pane just like the format host. */
.has-se-block .siteclick-panel-content-in {
    height: 100%;
    padding: 0;
}

.siteclick-subeditor-preview {
    position: relative;
    /* Round 20 (b.19): the bottom bar carries four groups (devices, zoom,
       ground, tools) and does not always fit in ±380px. The groups shrink on the
       WIDTH OF THE BLOCK, not on that of the window; same recipe as
       np-cardgrid.css. */
    container-type: inline-size;
    container-name: sepreview;
    flex: 0 0 var(--se-split, 50%);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Without this the (not yet rescaled) iframe holds back the splitter
       position: min-height:auto is the height of the content. */
    min-height: 0;
    /* The bottom bar is absolute (shared.css) at the bottom of this block. */
    padding-bottom: 40px;
    /* FIX32 (r.83): the ground of the sample (stage.css --se-ground), not of the
       panel: content, so black in both themes (white with the ground switch). */
    background: var(--sc-color-sample-dark);
}

.siteclick-subeditor-preview[hidden] {
    display: none;
}

/* The grip between preview and settings. Run 40c (SUB-1): the grip recipe
   (.sc-grip.sc-grip--y, parts/sc-grip.css: pill 32 x 4, hover 2 px primary
   line), as a band of --sc-grip-hit in the column (no overlap with the bottom
   bar); 64-subeditor.js drags it through siteclickGrip (axis 'y'). The grip
   look is outside the canvas only, so the canvas keeps the 8 px band with its
   1 px line. */
html:not(.sc-canvas) .siteclick-subeditor-splitter.sc-grip.sc-grip--y {
    position: relative;
    flex: 0 0 auto;
    margin-top: 0;
    z-index: 3;
    background: var(--sc-color-panel-bg);
}

.siteclick-subeditor-splitter[hidden] {
    display: none;
}

html.sc-canvas .siteclick-subeditor-splitter {
    position: relative;
    flex: 0 0 8px;
    cursor: row-resize;
    background: var(--sc-color-panel-bg);
}

html.sc-canvas .siteclick-subeditor-splitter::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--sc-chrome-line);
}

html.sc-canvas .siteclick-subeditor-splitter:hover::before,
html.sc-canvas .siteclick-subeditor-splitter:focus-visible::before {
    background: var(--sc-color-primary);
}

.siteclick-subeditor-hint {
    margin-left: auto;
    font-size: 11px;
    color: var(--sc-color-text-subtle, #8a94a1);
    white-space: nowrap;
}

.siteclick-subeditor-hint[hidden] {
    display: none;
}

/* The frame centres the stage and never scrolls (round 21, r.6): Passend
   fits the sample, and at a fixed zoom the shell narrows the stage document
   through --se-view-w, so an overflow is clipped symmetrically. The padding
   is a margin in screen pixels that does not scale with the zoom; the shell
   subtracts the same FRAME_PAD (64-subeditor.js). `safe` on align-items only:
   a sample taller than the frame stays top-aligned. */
.siteclick-subeditor-frame {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: safe center;
    min-height: 0;
    overflow: hidden;
    padding: var(--se-frame-pad, 16px);
    box-sizing: border-box;
}

/* Run 22c (r.121): an adapter with scroll (the form) scrolls at a fixed zoom,
   top-aligned so the part the hub tab names can be centred. */
.siteclick-subeditor-frame.is-scroll {
    overflow: auto;
    align-items: flex-start;
}
/* Run 23a (r.254): the scrolled frame keeps its bottom padding. */
.siteclick-subeditor-frame.is-scroll::after {
    content: '';
    display: block;
    height: var(--se-frame-pad, 16px);
}

/* The layout space of the sample: width/height come from the module
   (document size × zoom). The surface itself (iframe or DOM host) sits in it
   and only carries the transform. The stage clips: the host inside it carries the
   full document width, and without clipping that surplus becomes phantom
   scroll room in the frame. */
.siteclick-subeditor-stage {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
}

.siteclick-subeditor-iframe {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    transform-origin: 0 0;
    background: var(--sc-color-sample-dark);
}

/* Run 28c (r.868): loading state of the stage — no white default box, one loader. */
.siteclick-subeditor-preview.is-loading .siteclick-subeditor-iframe {
    visibility: hidden;
}

.siteclick-subeditor-loader {
    position: absolute;
    inset: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Light/dark (b.20): only the GROUND and the stage flip; the design tokens
   of the site stay, otherwise the sample lies. The document side is
   sc-se-light on the body of the sample (stage.css).
   The splitter stays dark (round 21, r.4). */
.siteclick-subeditor-preview.is-light,
.siteclick-subeditor-preview.is-light .siteclick-subeditor-iframe {
    background: #fff;
}

/* A group without buttons (surface:false) is still a 2rem pill. */
.siteclick-subeditor-preview .siteclick-actions-small-group[hidden] {
    display: none;
}

/* The zoom slider of the preview block. It carries its own class instead of
   the viewer's .siteclick-preview-range-input, because that class is queried
   document-wide by the viewer code (40-sidebars.js, 55-ve-crumbs-styling.js)
   and a second element with it made those readers pick the wrong slider.
   Shape copied from .siteclick-preview-range-input (shared.css). */
.siteclick-se-range {
    -webkit-appearance: none;
    width: 100px;
    height: 2px;
    background: var(--sc-color-transparent);
    cursor: pointer;
    position: relative;
    top: -2px;
}

/* track */
.siteclick-se-range::-webkit-slider-runnable-track {
    height: 2px;
    background: var(--sc-color-text-subtle);
    border-radius: 2px;
    margin-top: -1px;
}

.siteclick-se-range::-moz-range-track {
    height: 2px;
    background: var(--sc-color-text-subtle);
    border-radius: 2px;
    margin-top: -1px;
}

/* thumb */
.siteclick-se-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: var(--sc-color-white);
    border-radius: 50%;
    margin-top: -5px;
}

.siteclick-se-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--sc-color-white);
    border-radius: 50%;
    border: none;
    margin-top: -5px;
}

/* Narrow block: the px label of the device buttons goes away (the device name
   is in title) and the zoom slider gets shorter. Above 420px everything is
   spelled out. */
@container sepreview (max-width: 419px) {
    .siteclick-subeditor-preview [data-se-scale] .siteclick-action-small i + span {
        display: none;
    }

    .siteclick-subeditor-preview .siteclick-se-range {
        width: 72px;
    }
}

/* Type switch in the link sidebar: the one tab strip (round 27, r.12). */
.siteclick-ve-linkpick .siteclick-ve-tabs {
    margin-bottom: 12px;
}

/* The icon library opens, like the media browser, from a node sidebar
   (active at 1000000005) and must lie on top of it. At the base z-index
   (1000000003) it partly slid BEHIND the panel: the in-animation looked like
   a jump and the grid was cut off on the left. */
.siteclick-sidebar-rest[data-sidebar="sidebar-ve-icons"] {
    z-index: 1000000006 !important;
}

/* ===================================================================
   Generic library setup (.sc-lib, library_shell.php)
   Font, icon, component, section and template pickers share one skeleton:
   sticky toolbar with search field + tab pills, below it the results block,
   and a footer that only exists when there is something to apply (no
   Cancel: the cross closes). Change here and it applies everywhere.
   The base `overflow: hidden` of .siteclick-panel-content-in makes that
   element itself the scrollport of the sticky toolbar, hence visible, so
   the real scroller (.siteclick-panel-content) counts. */
.sc-lib .siteclick-panel-content-in {
    overflow: visible;
}

/* Round 16 (r.857): a library ALWAYS has the same inner space as an edit
   sidebar, also when it opens as a dock panel: .siteclick-editor-sidebar
   sets padding:0 for the node-panel iframes, and the restore rule above
   excludes .sc-lib. Spec (0,3,0) so the stylesheet order no longer decides;
   same recipe as native-editor/media-editor.css for the media-editor panels.
   The tab strip (.sc-lib-tabs, margin: 0 -1rem) relies on this. */
.siteclick-container .siteclick-sidebar-rest.sc-lib .siteclick-panel-content-in {
    padding: 1rem;
}

/* Run 28c (DSH-4): loader library tiles (sidebar_loaders.php). */
[data-sidebar="sidebar-ve-loaders"] .np-loop { --np-loop-min: 96px; }
[data-sidebar="sidebar-ve-loaders"] .ds-card-visual { height: 64px; font-size: 32px; }
[data-sidebar="sidebar-ve-loaders"] .ds-card-visual svg { width: 1em; height: 1em; }

/* Library without an apply button (component/section picker: a card click
   places directly): no footer, so not the 60px that shared.css reserves for it
   either. Bottom space is independent of the footer; with 0 the last card row
   stuck to the bottom edge while a library WITH a footer did have room (r.857). */
.sc-lib-nofooter .siteclick-panel-content {
    padding-bottom: 1rem;
}

/* Footer contract of siteclickLibrary (media-upload-2 B1): one green,
   full-width primary action at the bottom of every library. Spec (0,5,0) beats
   the 30px buttons in shared.css regardless of load order; 12 + 36 + 12 = the
   60px footer height that .siteclick-panel-content already reserves. */
.siteclick-container .sc-lib .siteclick-panel-footer {
    padding: 12px 1rem;
}

.siteclick-container .sc-lib .siteclick-panel-footer .siteclick-buttons-inline-justified > .button {
    height: 36px;
    line-height: 36px;
    font-size: 0.9rem;
}

.sc-lib-toolbar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 12px;
    background: var(--sc-color-dark, #1f2733);
}

.sc-lib-search {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 13px;
}

.sc-lib-search::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

/* Design tile scope (round 18b): the wrapper .sc-dl-{id} and the button
   layer rules serve the design hub cards as well; the library tiles
   themselves (.sc-dl-item) live in siteclick-library.css (run 27c, LIB-1). */
/* The wrapper only carries the scope id .sc-dl-{id} for the per-object CSS;
   the tile visual stays the flex item of .np-tile-art. */
.sc-dl {
    display: contents;
}

/* Button tile (hub card and library tile): the structural layer rules of the
   theme (style.css 'four layers' + base.css .sc-bg), scoped on .sc-dl.
   The admin does not load the theme; without them every background layer has
   size 0 (measured on dev, 17-09). */
.sc-dl .sc-btn { position: relative; z-index: 0; display: inline-flex; }
.sc-dl .sc-btn-in { display: inline-flex; align-items: center; line-height: 1em; }
.sc-dl .sc-bl { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box; }
.sc-dl .sc-bl > .sc-bgs,
.sc-dl .sc-btn > .sc-bgs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sc-dl .sc-bg { position: absolute; inset: 0; z-index: -1; }
.sc-dl .sc-bg-in { display: block; width: 100%; height: 100%; }
.sc-dl .sc-bg > .sc-fill { position: absolute; inset: 0; opacity: 0; }

/* Fixed column width via auto-fill: the grid fills the panel width exactly,
   so never a half-cut tile column on the right edge. */
.siteclick-ve-icons-results {
    display: grid;
    /* FIXED column size (round 11): with minmax(…, 1fr) every row stretched the
       tiles to the remaining width, so two rows never had the same tile size.
       84px is 84px, on every line. Round 18b: the tile with the name below it is
       the only tile form, because in one grid with eleven sets an icon without
       a name cannot be found again. */
    grid-template-columns: repeat(auto-fill, 84px);
    gap: 6px;
    align-content: flex-start;
    padding-bottom: 12px;
}

.siteclick-ve-icon-tile {
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    cursor: pointer;
}

/* max-* instead of fixed sizes: the icon scales inside the tile on its own
   aspect ratio instead of being cropped. No `fill` here: theme icons carry
   fill=currentColor themselves, external sources stroke=currentColor on a
   fill=none root; a CSS fill would smear the latter. */
.siteclick-ve-icon-tile svg {
    width: 22px;
    height: 22px;
    /* The vendored theme SVGs are IcoMoon exports with a viewBox that starts at
       y=0 while the glyph runs to y=-113 (em box 1000, ascent 850): the default
       overflow:hidden of the <svg> root clipped up to 11% of the top. The tile
       has ample 12px head room, so letting it overflow visibly is enough.
       External sources (Lucide/Tabler/…) have correct viewBoxes and notice
       nothing.

       The viewBox of the theme SVGs is normalised at the SOURCE (round 7:
       y 0 → -50 in Files/assets/fonts/icons/svg/*.svg), so no optical nudge
       here any more; it would now shift twice. */
    overflow: visible;
}

.siteclick-ve-icon-tile.is-active {
    border-color: var(--sc-color-primary);
    box-shadow: 0 0 0 1px var(--sc-color-primary);
}

/* Text choices (None/Theme) and catalogue tiles run over the full grid width
   instead of one column. */
.siteclick-ve-icon-tile-text {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

/* Round 11: the icon in a 48px square with the name as second line below it.
   Fixed tile height = straight rows, however long the name is. */
.siteclick-ve-icon-tile-cat {
    aspect-ratio: auto;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    height: 80px;
    padding: 8px 4px 6px;
    min-width: 0;
}

.siteclick-ve-icon-tile-cat > span:first-child {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.siteclick-ve-icon-tile-cat .siteclick-ve-icon-tile-slug {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    opacity: 0.7;
}

/* Sentinel of lazy loading (round 18b): must have a box, otherwise the
   IntersectionObserver never sees it. Empty it is a thin strip; while loading
   the dots loader sits in it. */
.siteclick-ve-icons-sentinel {
    min-height: 8px;
    padding-bottom: 12px;
    text-align: center;
}

/* Section type sidebar (sidebar-ve-section-type): dots + variables panel;
   colours/markup identical to the section overview (site-sections.css). */
.sc-sectiontype-dot-vrij       { background: var(--sc-color-blue); }
.sc-sectiontype-dot-variabelen { background: var(--sc-color-orange); }
.sc-sectiontype-dot-vast       { background: #c0392b; }

[data-sidebar="sidebar-ve-section-type"] .sc-section-variables {
    margin: 0 1rem 1rem;
    padding: 10px;
    background: var(--sc-overlay-subtle);
    border: 1px solid var(--sc-color-surface-alt);
    border-radius: 6px;
}
[data-sidebar="sidebar-ve-section-type"] .sc-section-variable-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    align-items: center;
}
[data-sidebar="sidebar-ve-section-type"] .sc-section-variable-row input,
[data-sidebar="sidebar-ve-section-type"] .sc-section-variable-row select {
    padding: 6px 8px;
    border: 1px solid var(--sc-color-surface-alt);
    border-radius: 4px;
    font-size: 12px;
    min-width: 0;
}
[data-sidebar="sidebar-ve-section-type"] .sc-section-variable-row [data-var-label]   { flex: 1 1 30%; }
[data-sidebar="sidebar-ve-section-type"] .sc-section-variable-row [data-var-type]    { flex: 0 0 auto; }
[data-sidebar="sidebar-ve-section-type"] .sc-section-variable-row [data-var-default] { flex: 1 1 40%; }
[data-sidebar="sidebar-ve-section-type"] .sc-section-variables-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

/* ===================================================================
   Font library (sidebar-ve-fonts): the same dark library sidebar as the
   icons; only the tile form differs (lines instead of a grid, each line in
   its own face).
   =================================================================== */

/* Opens from a node sidebar (1000000005) or from the format sidebar
   (1000000006): on top of those, like the media browser. */
.siteclick-sidebar-rest[data-sidebar="sidebar-ve-fonts"] {
    z-index: 1000000007 !important;
}

.siteclick-ve-fonts-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
}

/* Run 26b (DSH-4): the site's own fonts on top of the results. */
.siteclick-ve-fonts-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Tile = heading line (name + origin) with below it a whole sample SENTENCE
   in the font itself: the component text as the field sends it along,
   otherwise a pangram. In the old 120px sample column no sentence fit. */
.siteclick-ve-font-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    cursor: pointer;
}

/* Run 28c (DSH-6, r.762): the chosen fonts at the top of the library. */
.siteclick-ve-font-tile.is-site {
    border-color: var(--sc-color-primary);
}

.siteclick-ve-font-tile-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.siteclick-ve-font-tile-sample {
    font-size: 22px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.siteclick-ve-font-tile-name {
    font-size: 12px;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Origin + licence per family (Jeroen 161): only fonts we may use, and that
   can be seen on the tile. */
.siteclick-ve-font-tile-meta {
    font-size: 10px;
    opacity: 0.45;
    white-space: nowrap;
}

.siteclick-ve-font-tile.is-active {
    border-color: var(--sc-color-primary);
    box-shadow: 0 0 0 1px var(--sc-color-primary);
}

/* Chunked loading (round 16): the catalogue has ~1867 families, so the list
   grows per block of 60 tiles instead of all at once. */
.siteclick-ve-fonts-more {
    align-self: flex-start;
    margin-top: 4px;
}

/* ===================================================================
   ROUND 8 — cluster B2: consistency sweep over the editor chrome.
   Deliberately at the end: all rules below correct earlier rules in
   this file (equal specificity, later wins).
   =================================================================== */

/* ── 1. No white flash, no white strip ────────────────────────────── */
/* Run 38 (EDW-1, P2b): the seam is the viewer's own border-left, inside its transform: it moves with the
   open motion and is there as long as the editor is open. Next to an open viewer the main editor sidebar
   draws no border; without a viewer (Design Hub) it keeps its border-right. The sub sidebar and the
   sub-live-editor draw none, so the seam stays one line. */
@media (min-width: 1225px) {
    html:not(.sc-canvas) .siteclick-container .siteclick-editor-sidebar:not(.siteclick-editor-sidebar-sub) {
        border-right: 1px solid var(--sc-color-hairline);
    }
    html:not(.sc-canvas) .siteclick-container .siteclick-wrap[data-siteclick-preview-open="true"] .siteclick-editor-sidebar:not(.siteclick-editor-sidebar-sub) {
        border-right: 0;
    }
    html:not(.sc-canvas) .siteclick-container .siteclick-website-preview.sc-ve-host {
        border-left: 1px solid var(--sc-color-hairline);
    }

    /* Run 40a (NAV-1, B2): the viewer steps once with the work area, so it has no width transition; only its own
       open/close slides. Same selector and value as rail-right.css (0,5,1 !important), this sheet loads later. */
    html:not(.sc-canvas) .siteclick-container .siteclick-wrap .siteclick-website-preview.sc-ve-host {
        transition: transform var(--sc-motion-pane) !important;
    }
}
/* The bottom bar stays on the chrome token. */
.siteclick-container .siteclick-ve .siteclick-website-preview-toolbar.siteclick-website-preview-toolbar-bottom {
    border-top: 1px solid var(--sc-chrome-line);
}

/* ── 2. Toolbars as dark as the header ──────────────────────────────
   The header is full black (--sc-color-black); the preview toolbars stood on
   #202123 and looked grey. The panel title follows the theme through the
   panel tokens and its hairline (ui-sidebar.css). */
.siteclick-ve .siteclick-website-preview-toolbar-top,
.siteclick-ve-subbar {
    background: var(--sc-color-black, #000);
}
/* border-box: the 48px height is the basis for the frame offsets, so the
   line must not come on top of it. r.79: no top line, the app header above
   draws that seam (toggles.css). */
.siteclick-ve .siteclick-website-preview-toolbar-top {
    box-sizing: border-box;
    border-bottom: 1px solid var(--sc-chrome-line);
}
/* Fill the content box (47px with the border) instead of a fixed 48px. */
.siteclick-ve-bar .siteclick-ve-bar-in { height: 100%; }

/* ── 3. Bottom bar (Jeroen 119) ─────────────────────────────────────
   The COLOUR + horizontal scroll of .siteclick-website-preview-toolbar-bottom
   are in shared.css: that bar also exists outside the editor (ordinary site
   preview) and shared.css is the only source there. Here only what is
   editor-specific. */
.siteclick-ve-styling-card:hover,
.siteclick-ve-styling-card.is-active { border-color: var(--sc-color-primary); }

/* ── 5. One tab language (Jeroen 104; round 27, r.12) ──────────────────
   .siteclick-ve-tab in a SIDEBAR (link picker, pickers) is the one tab strip
   (parts/sc-tabs.css); here only its distance below. Only the bottom margin,
   so the strip keeps the bleed of the recipe (run 36a1, TAB-2). */
.siteclick-sidebar-rest .siteclick-ve-tabs {
    margin-bottom: 12px;
}
/* Round 18 (f.146): icon tabs in the link picker — a glyph instead of a label
   keeps six tabs on one row; the name sits in `title` and, round 21a (B5),
   slides out next to the glyph of the active tab. */
.siteclick-sidebar-rest .siteclick-ve-tabs.is-icons .siteclick-ve-tab {
    padding: 0 9px;
}
.siteclick-ve-tab-icon svg {
    display: block;
    width: 14px;
    height: 14px;
}
.siteclick-ve-tab-text {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.25s var(--sc-ease-expo), margin 0.25s var(--sc-ease-expo);
}
.is-active > .siteclick-ve-tab-text {
    max-width: 9em;
    margin-left: 6px;
}

/* Round 21a (D1): the linkchip -- shell copy of the .sc-linkchip rules in
   native-editor/np-panel.css (LK-FIELD); keep both identical. */
.sc-linkchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; text-align: left; }
.sc-linkchip:hover { border-color: var(--sc-color-primary); }
.sc-linkchip svg { flex: 0 0 auto; width: 14px; height: 14px; }
.sc-linkchip svg[hidden] { display: none; }
.sc-linkchip-ext, .sc-linkchip-blank { color: var(--sc-color-text-muted); }
.sc-linkchip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-linkchip[data-link-kind="none"] .sc-linkchip-text { color: var(--sc-color-text-muted); }
/* ── 7. Statuskaarten leesbaar in donker (Dave 2) ───────────────────── */
.siteclick-ve-status-option-title { color: var(--sc-color-text, #1f2733); }
.siteclick-ve-status-option-desc { color: var(--sc-color-text-muted, #5b6573); }
.siteclick-ve-status-option:hover { background: var(--sc-color-surface-alt); }

/* Breadcrumb v2: the whole chain (including the node itself) as pills in the
   panel title; a dot without a word did not say which part it was. Form
   borrowed from the responsive tabs (.sc-np-tab): an inactive pill is a
   label, only the current one carries a surface. */
/* r.211: the chain fills the title instead of being centred by shared.css
   (.siteclick-panel-title-in centres its items), so a breadcrumb starts at the
   left edge like a breadcrumb should. shared.css stays untouched. */
.siteclick-panel-title-title:has(.siteclick-ve-crumb) {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}
.siteclick-ve-crumb {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    margin-right: 10px;
    padding: 0 8px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--sc-color-text-muted);
    font: inherit;
    font-size: 12px;
    line-height: 22px;
    cursor: pointer;
    transition: background 0.12s var(--sc-ease-expo, ease), color 0.12s var(--sc-ease-expo, ease);
}
.siteclick-ve-crumb:last-child { margin-right: 0; }
.siteclick-ve-crumb:hover,
.siteclick-ve-crumb:focus-visible {
    background: var(--sc-color-surface-alt);
    color: var(--sc-color-text);
}
.siteclick-ve-crumb.is-current {
    background: var(--sc-color-surface-alt);
    color: var(--sc-color-text);
    font-weight: 600;
    cursor: default;
    pointer-events: none;
}
.siteclick-ve-crumb-dot {
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    border-radius: 50%;
}
.siteclick-ve-crumb-label {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* r.107-109 (24a): pills never shrink. The title is the scroll container
   instead: the chain scrolls horizontally (scrollbar hidden, the wheel scrolls
   sideways via 55-ve-crumbs-styling.js) and the shell scrolls the active pill
   into view after every render. Specificity (0,3,0) beats shared.css without
   touching it. */
.siteclick-container .siteclick-panel-title-title:has(.siteclick-ve-crumb) {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.siteclick-container .siteclick-panel-title-title:has(.siteclick-ve-crumb)::-webkit-scrollbar { display: none; }
.siteclick-ve-crumb,
.siteclick-ve-crumb.is-current {
    flex: 0 0 auto;
    max-width: none;
}
/* r.87-97 (24b): a caret on every pill from Sectie down, and on the extra
   pill for the next level (.is-next), opens the breadcrumb menu
   (crumb-menu.css). The active pill itself stays unclickable; only its caret
   takes the pointer. The ::after widens the 4px chevron to a usable target
   (r.548: 4px, 1px stroke, .45). */
.siteclick-ve-crumb-caret {
    position: relative;
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -1px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    opacity: .45;
    transform: rotate(45deg);
}
.siteclick-ve-crumb-caret::after {
    content: '';
    position: absolute;
    inset: -8px;
}
.siteclick-ve-crumb-caret:hover { opacity: 1; }
.siteclick-ve-crumb.is-current .siteclick-ve-crumb-caret {
    pointer-events: auto;
    cursor: pointer;
}
/* Measured (18-09): with six dots + the active pill the chain is 301px, but
   the title 262px; shared.css reserves 40px on the right for an icon that the
   edit sidebar does not have. That space goes to the breadcrumb, and if it
   still does not fit, only the label of the active pill may truncate (never
   the pill itself out of view). */
.siteclick-container .siteclick-sidebar-rest .siteclick-panel-title-in:has(.siteclick-ve-crumb) {
    padding-right: 8px;
}
/* The separator sits in the 12px gutter NEXT TO the pill, so outside the hover surface. */
.siteclick-ve-crumb:not(:last-child)::after {
    content: '\203A';
    position: absolute;
    top: 0;
    left: 100%;
    width: 10px;
    color: var(--sc-color-text-subtle);
    text-align: center;
    pointer-events: none;
}

/* ── 8. One ghost button in dark chrome (round 11) ──────────────────
   Footer buttons, the secondary action in a library footer and the status
   chip each looked different on the black surface (light grey fill, or just
   a thin outline that disappeared). One recipe: filled transparent white, no
   border, fuller on hover. The status chip keeps its pill shape + dot. */
.siteclick-editor-sidebar .siteclick-panel-footer .button.button-grey,
.siteclick-editor-sidebar-sub .siteclick-panel-footer .button.button-grey,
.siteclick-editor-sidebar .sc-more-toggle,
.siteclick-editor-sidebar-sub .sc-more-toggle,
.sc-lib .siteclick-panel-footer .button.button-grey,
.siteclick-ve-status {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 0 !important;
    color: #fff !important;
}

.siteclick-editor-sidebar .siteclick-panel-footer .button.button-grey:hover,
.siteclick-editor-sidebar-sub .siteclick-panel-footer .button.button-grey:hover,
.siteclick-editor-sidebar .sc-more-toggle:hover,
.siteclick-editor-sidebar-sub .sc-more-toggle:hover,
.sc-lib .siteclick-panel-footer .button.button-grey:hover,
.siteclick-ve-status:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

/* ── 8b. Panel footer: one row, overflow under '…' (r19 v.38) ───────
   window.siteclickPanelFooter (48b-panel-footer.js) fills the row; the gap and
   the 40px of '…' live there as GAP / MORE_W. All buttons one size. */
.siteclick-panel-footer .sc-pf.siteclick-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
}
.siteclick-container .siteclick-panel-footer .sc-pf.siteclick-buttons .button {
    flex: 1 0 auto;
    box-sizing: border-box;
    width: auto;
    height: 30px;
    line-height: 30px;
    margin: 0 !important;
    padding: 0 10px;
    white-space: nowrap;
    text-align: center;
}
/* Measuring: nothing stretches, so offsetWidth = the natural width. */
.siteclick-container .siteclick-panel-footer .sc-pf.sc-pf-measure.siteclick-buttons .button { flex: 0 0 auto; }
/* b.35: 40px instead of 30. The glyph stays 14px, but 30px made '…' the
   narrowest button in a row where everything else carries `padding: 0 10px`.
   This width IS MORE_W in 48b-panel-footer.js — keep the two in step. */
.siteclick-panel-footer .sc-pf .sc-pf-more {
    display: block;
    flex: 0 0 40px;
    height: 30px;
    margin: 0;
}
.siteclick-panel-footer .sc-pf .sc-pf-more[hidden] { display: none; }
.siteclick-container .siteclick-panel-footer .sc-pf.siteclick-buttons .sc-pf-more .sc-more-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    padding: 0;
}
.siteclick-panel-footer .sc-pf .sc-more-menu {
    max-width: 300px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}
/* .sc-more-item is written for <a>; here it is a <button>. */
.siteclick-panel-footer .sc-pf .sc-more-item {
    width: 100%;
    border: 0;
    background: none;
    /* b.35: an explicit colour, never `inherit`. With `inherit` this rule
       (0,3,0) also beat the danger rule (0,2,0 / 0,1,0), so 'Verwijderen' was
       never red, and the rest of the colour came from whichever ancestor the
       host happened to set. The tokens follow the theme. */
    color: var(--sc-color-text);
    font: inherit;
    text-align: left;
}
.siteclick-panel-footer .sc-pf .sc-more-item:hover {
    color: var(--sc-color-text-strong);
}
/* Same specificity as the rule above and later in the file, so danger wins. */
.siteclick-panel-footer .sc-pf .sc-more-item-danger,
.siteclick-panel-footer .sc-pf .sc-more-item-danger:hover {
    color: var(--sc-color-danger);
}
.siteclick-panel-footer .sc-pf .sc-more-item > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The dropdown menu itself is dark (shared.css is light) and the items carry
   an icon + a danger accent. */
.siteclick-editor-sidebar .sc-more-item,
.siteclick-editor-sidebar-sub .sc-more-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
}
/* Even without an icon the label column stays (not every action has one). */
.siteclick-editor-sidebar .sc-more-item-icon,
.siteclick-editor-sidebar-sub .sc-more-item-icon {
    flex: 0 0 14px;
    line-height: 0;
}
.siteclick-editor-sidebar .sc-more-item-danger,
.siteclick-editor-sidebar-sub .sc-more-item-danger {
    color: var(--sc-color-danger);
}
/* Divider above the first danger item: delete is set apart from the
   ordinary actions. */
.siteclick-editor-sidebar .sc-more-item:not(.sc-more-item-danger) + .sc-more-item-danger,
.siteclick-editor-sidebar-sub .sc-more-item:not(.sc-more-item-danger) + .sc-more-item-danger {
    border-top: 1px solid var(--sc-chrome-line);
}
/* Checked item (tick) and admin-only item (tag) in the more menu. */
/* Run 36a1 (KLN-1): not in the header section menu, which marks the active item itself. */
.sc-more-item[aria-checked="true"]:not(.siteclick-ve-viewitem):not(.sc-bar-section-item)::after {
    content: "\2713";
    margin-left: 8px;
    padding-left: 8px;
    color: var(--sc-color-primary);
}
.sc-more-item-admin {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.sc-more-item-admin::after {
    content: "Admin";
    margin-left: auto;
    padding: 1px 6px;
    border-radius: var(--sc-radius-sm);
    background: var(--sc-overlay-subtle);
    color: var(--sc-color-text-muted);
    font-size: 11px;
}
/* The drop-up itself on the neutral editor surface tokens, no colour of
   its own (r.4). */
.siteclick-editor-sidebar .sc-more-menu,
.siteclick-editor-sidebar-sub .sc-more-menu {
    background: var(--sc-color-surface);
    color: var(--sc-color-text);
    border-color: var(--sc-color-surface-alt);
}
.siteclick-editor-sidebar .sc-more-item:hover,
.siteclick-editor-sidebar-sub .sc-more-item:hover {
    background: var(--sc-color-surface-alt);
}

/* ── 9. Panel scrolls in its own gutter (round 11) ──────────────────
   A long panel ran behind the footer because only the inner layer
   scrolled. The gutter itself stays invisible: only the thumb is visible. */
.siteclick-editor-sidebar .siteclick-panel-content,
.siteclick-sidebar-rest .siteclick-panel-content {
    overflow-y: auto;
}

.siteclick-editor-sidebar .siteclick-panel-content::-webkit-scrollbar-track,
.siteclick-sidebar-rest .siteclick-panel-content::-webkit-scrollbar-track {
    background: transparent;
}

/* ── 10. A library is as wide as the editor (round 11) ──────────────
   The pickers opened at the narrow sidebar width while they show a grid;
   the same width as the viewer makes every library one calm surface. */
@media screen and (min-width: 1225px) {
    .siteclick-container .siteclick-sidebar-rest.sc-lib,
    .siteclick-container .siteclick-sidebar-rest[data-sidebar="sidebar-media"] {
        width: var(--sc-ve-width) !important;
        max-width: calc(100vw - 40px) !important;
        right: 40px !important;
    }
    /* The parked state of a rest sidebar is translateX(100%): exactly its own
       width. The 40px inset above therefore stays in view as a strip
       (screen-high, over the right toggle rail). So when parked, slide 40px
       further out; .active keeps transform:none, so the animation path stays
       unchanged. */
    .siteclick-container .siteclick-sidebar-rest.sc-lib:not(.active),
    .siteclick-container .siteclick-sidebar-rest[data-sidebar="sidebar-media"]:not(.active) {
        transform: translateX(calc(100% + 40px));
    }

    /* Round 13: the sections/components library carries, next to .sc-lib, ALSO
       .siteclick-editor-sidebar (left:0, dock width from shared.css). The
       sc-lib rule above (0,3,0 + !important) beat that dock width and put the
       library at 70vw while left:0 stayed: a surface covering the whole
       viewer (right:40px was lost through over-constraint). A library that is
       also a dock panel follows the dock geometry. */
    .siteclick-container .siteclick-sidebar-rest.sc-lib.siteclick-editor-sidebar {
        width: calc(100vw - var(--sc-ve-width) - 40px) !important;
        max-width: 100% !important;
        right: auto !important;
    }
}

/* ── 11. Page actions in the bottom toolbar (t.221-225) ─────────────
   b.22: the group keeps the shared look of every other action group in the
   app (shared.css sets background + radius + height); only the GREEN ICON
   still says "this is an action, not a view state". The green border, the
   green fill and the green hover were the one bordered button group in the
   whole app, so they are gone; shared.css' hover wins again. Same 0.5rem
   icon margin as the replay icon (shared.css only spaces i/span/input).
   There is deliberately no colour rule on .siteclick-ve-action: the group
   inherits shared.css' --sc-color-text-subtle like every other action group,
   and shared.css' hover/active white is the only white left. */
.siteclick-action-small > .siteclick-ve-action-icon {
    width: 13px;
    height: 13px;
    margin-left: 0.5rem;
    vertical-align: -2px;
    color: var(--sc-color-green);
}

.siteclick-ve-action.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Narrow window: labels gone, icons stay operable (same rule as the replay
   button; svg falls outside shared.css' `i + span`). */
@media screen and (max-width: 1224px) {
    .siteclick-ve-action .siteclick-ve-action-icon + span {
        display: none;
    }
}

/* Source page in the duplicate sidebar: one card width, otherwise the shared
   .sc-visual from shared.css. */
.siteclick-ve-pagedup-shot {
    margin: 0 0 12px;
}

.siteclick-ve-pagedup-shot .sc-visual {
    max-width: 240px;
}

/* b.22: 'Voorbeeld vernieuwen' was the only underlined text link acting as a
   button in an editor sidebar. Same ghost shape as the other small buttons in
   this dark chrome; the class stays as the JS hook (57-ve-page-settings.js). */
.siteclick-ve-pagedup-refresh {
    display: inline-block;
    box-sizing: border-box;
    height: 24px;
    margin-top: 8px;
    padding: 0 10px;
    border: 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--sc-color-text-strong);
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
}

.siteclick-ve-pagedup-refresh:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* r.119/126: 'Nieuwe pagina' and 'Pagina dupliceren' are subs docked against
   the open main (left: 30vw, shared.css); without a main they dock beside the rail.
   !important: shared.css docks every sub with !important (r.7235, r.9983). */
body:not(:has(.siteclick-editor-sidebar.active)) [data-sidebar="sidebar-ve-pagenew"].active,
body:not(:has(.siteclick-editor-sidebar.active)) [data-sidebar="sidebar-ve-pageduplicate"].active {
    left: var(--sc-rail-w) !important;
}

/* esh-04: left moves with transform, so a sub without a main slides from 0 to
   -30vw on close instead of jumping to 30vw first (and a main that opens or
   closes beside it slides too). */
.siteclick-editor-sidebar-sub[data-sidebar="sidebar-ve-pagenew"],
.siteclick-editor-sidebar-sub[data-sidebar="sidebar-ve-pageduplicate"] {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), left 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Run 31 (A15): ink on the black chrome. The group names in the subbar (and the
   tab pill) beat sc-header.css' bar-slot ink (0,2,0, dark in light); the view
   buttons beat subbar.css (0,3,1), whose hover/active rules (0,4,1) load later
   and win on the tie; the bottom bar groups beat shared.css (0,1,0), whose
   hover/active white (!important) stays. */
.siteclick-container .siteclick-ve-subbar .siteclick-bar-main-text {
    color: var(--ve-ink);
}

.siteclick-container .siteclick-ve .siteclick-ve-subbar .siteclick-bar-nav button,
.siteclick-container .siteclick-ve .siteclick-ve-subbar .siteclick-ve-status-dot-unknown + [data-ve-status-text] {
    color: var(--ve-ink-subtle);
}

.siteclick-ve .siteclick-website-preview-toolbar-bottom .siteclick-actions-small-group {
    color: var(--ve-ink-subtle);
}

/* Run 31 (A17): below 768 the bottom bar shows less: no labels (group name,
   'Bewerken', the active px, 'Instellingen') and no free width, so the device
   buttons stay one icon group inside the viewport. Beats shared.css' 'labels
   always visible' rule (0,3,2) and view-menu.css by specificity. */
@media screen and (max-width: 767px) {
    .siteclick-ve .siteclick-website-preview-toolbar-bottom .siteclick-ve-bar-label,
    .siteclick-ve .siteclick-website-preview-toolbar-bottom .siteclick-ve-modeswitch > span,
    .siteclick-container .siteclick-ve .siteclick-website-preview-toolbar-bottom .siteclick-action-small i + span,
    .siteclick-ve .siteclick-website-preview-toolbar-bottom .siteclick-ve-responsive > .siteclick-action-small:not(.siteclick-preview-mode) {
        display: none;
    }
}