/*
 * Conditional visibility — fallbacks for hosts outside a Filament panel.
 *
 * Filament's own visibleJs pipeline does the hiding: `x-cloak` until Alpine
 * boots, then a reactive `fi-hidden` class binding on the component wrapper
 * (see JourneyComponentRenderer::applyCondition). Both selectors are styled by
 * a panel's theme CSS, which a host rendering this schema outside a panel may
 * not load — so carry the two rules here as well. They are identical to the
 * panel's, so double-loading is harmless.
 */
[x-cloak] {
    display: none !important;
}

.fi-hidden {
    display: none;
}

/*
 * Conditional visibility — collapse the grid cell of a hidden component.
 *
 * A journey component's own wrapper is marked `fi-hidden` when its condition is
 * unmet, by the visibleJs class binding above. But that
 * wrapper lives *inside* the schema grid item that occupies a grid track:
 *
 *     .fi-grid-col > .fi-sc-component > <component wrapper, gets `fi-hidden`>
 *
 * Hiding only the inner wrapper collapses its content while the grid cell keeps
 * occupying a track, so the schema grid's `gap` is still reserved on both sides
 * of it — the empty gap you see where a hidden component should be. Collapsing
 * the grid cell itself removes it from the grid entirely, taking its gap with it.
 *
 * The `> ... >` child combinators scope this to the component's *own* cell, so a
 * visible layout that merely contains a hidden child is never collapsed. `:has()`
 * is reactive, so this tracks the class binding toggling `fi-hidden` at runtime too.
 */
.fi-grid-col:has(> .fi-sc-component > .fi-hidden) {
    display: none !important;
}

/*
 * Same problem, one level out, for the non-contained wizard. There each journey
 * component is wrapped in its own Section (a bordered card), so a hidden
 * conditional leaves behind an empty card rather than a bare gap:
 *
 *     .fi-grid-col > … > .fi-section-content > .fi-grid-col > .fi-sc-component > `fi-hidden`
 *
 * The rule above collapses the component's inner cell, but the Section's own grid
 * cell still occupies a track. Collapse that outer cell too when the Section wraps
 * nothing but a hidden component. `:only-child` keys on the wrapper Section (which
 * holds exactly one component), so a real multi-field Section that merely contains
 * one hidden field is left alone — only its hidden field's cell collapses.
 */
.fi-grid-col:has(> .fi-sc-component > .fi-sc-section .fi-section-content > .fi-grid-col:only-child > .fi-sc-component > .fi-hidden) {
    display: none !important;
}