@layer base {
    /* 
     * Global Layout Skeleton
     * Uses ch units for optimal reading metrics and min() to avoid media queries.
     * Incorporates env() to safely wrap content away from hardware notches.
     */

    main {
        /* Standardbreite, ideal für Formulare, Lesbarkeit & Text (~800px) */
        --layout-max-width: 100ch; 
        
        max-inline-size: min(var(--layout-max-width), 100%);
        margin-inline: auto;

        /* 
         * Responsive padding that respects iPhone/iOS safe areas.
         * max() ensures we always have at least --space-4 (1.5rem) of padding, 
         * even if safe-area-inset is 0.
         */
        padding-inline: max(var(--space-4), env(safe-area-inset-left)) max(var(--space-4), env(safe-area-inset-right));
        padding-block: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-bottom));
    }

    /* 
     * Modifier for more width (~1200px+)
     * 
     * How to use:
     * 1. In your app/views/layouts/application.html.erb:
     *    <main class="<%= yield(:layout_class) %>">
     * 2. In your specific view (e.g., table or dashboard index.html.erb):
     *    <% content_for :layout_class, "layout-wide" %>
     */
    main.layout-wide {
        --layout-max-width: 150ch; 
    }

    /* 
     * Reusable optimal reading width for text-heavy panels or articles 
     * Applies perfectly to 60-80 characters per line.
     */
    .readable-measure {
        max-inline-size: min(65ch, 100%);
        margin-inline: auto;
    }
}