/* Panneau — modèle canonique ; son emploi : canon_panel.md. */

@layer components {
    .panel {
        display: flex;
        flex-direction: column;
        gap: var(--panel-space, var(--canon-space-4));
        padding: var(--panel-padding, var(--canon-space-6));
    }

    .panel {
        border: var(--canon-line-width) solid var(--panel-line, var(--canon-theme-line));
        border-inline-start: var(--panel-accent-width, var(--canon-line-width)) solid var(--panel-accent, var(--panel-line, var(--canon-theme-line)));
        border-radius: var(--panel-radius, var(--canon-radius-card));
        background-color: var(--panel-surface, var(--canon-theme-surface));
        box-shadow: var(--panel-shadow, none);
        backdrop-filter: var(--panel-backdrop, none);
    }
}

/* Part locale — les réglages que l'app pose sur cet objet, contexte par contexte. */

@layer components {
    .generator,
    .workspace {
        --panel-padding: var(--canon-space-edge);
        --panel-space: 0px;
        --panel-line: var(--local-color-decor-glass-bright);
        --panel-radius: var(--local-radius-field);
        --panel-surface: var(--local-color-decor-panel);
    }
    .generator,
    .sizing .workspace {
        --panel-backdrop: blur(50px);
    }
    .generator-main,
    .workspace-fields,
    .workspace-panel,
    .figure,
    .graphs {
        --panel-padding: 0px;
        --panel-space: 0px;
        --panel-line: var(--local-color-decor-glass-bright);
        --panel-radius: var(--local-radius-field);
        --panel-surface: var(--local-color-decor-panel-inner);
    }
    .generator-main,
    .workspace-panel,
    .graphs {
        --panel-padding: var(--canon-space-edge);
    }
    .access,
    .welcome,
    .tools {
        --panel-line: transparent;
        --panel-radius: 0px;
        --panel-surface: var(--canon-theme-raised);
    }
    .access {
        --panel-padding: 40px;
        --panel-space: 20px;
    }
    .welcome {
        --panel-padding: 30px;
        --panel-space: 12px;
    }
    .tools {
        --panel-padding: 20px;
        --panel-space: 20px;
    }
    .creations-category {
        --panel-space: 0px;
    }
    .generator-preview-item {
        --panel-padding: 4px 12px;
        --panel-space: 0px;
        --panel-line: var(--local-color-decor-glass-bright);
        --panel-radius: var(--local-radius-field);
        --panel-surface: var(--local-color-decor-panel-inner);
    }
    @media (max-width: 600px) {
        .access {
            --panel-padding: 30px 25px;
        }
    }
}