/* Simulation landing page + session stub — @layer split: theme (colors) + components (layout) */

/* Theme layer — colors, backgrounds, shadows only */
@layer theme {
    .simulation-landing-page {
        .landing-header {
            .industry-badge {
                background: oklch(from var(--accent-primary) l c h / 0.1);
                border-color: oklch(from var(--accent-primary) l c h / 0.2);
                color: var(--accent-primary);
            }

            .landing-description {
                color: var(--text-secondary);
            }
        }

        .info-card {
            background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.04));
            backdrop-filter: blur(12px);
            border-color: oklch(from var(--glass-tint) l c h / 0.08);

            .info-icon {
                color: var(--accent-primary);
            }

            .info-icon--duration {
                color: var(--color-info);
            }

            .info-label {
                color: var(--text-secondary);
            }

            .info-sub {
                color: var(--text-secondary);
            }
        }

        .skills-section {
            background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.04));
            backdrop-filter: blur(12px);
            border-color: oklch(from var(--glass-tint) l c h / 0.08);

            .section-label {
                color: var(--text-secondary);
            }

            .skill-chip {
                background: oklch(from var(--accent-primary) l c h / 0.1);
                border-color: oklch(from var(--accent-primary) l c h / 0.2);
                color: var(--accent-primary);
            }
        }

        .background-section {
            .section-label {
                color: var(--text-secondary);
            }

            .background-detail {
                background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.04));
                backdrop-filter: blur(12px);
                border-color: oklch(from var(--glass-tint) l c h / 0.08);

                &[open] {
                    border-color: oklch(from var(--accent-primary) l c h / 0.2);
                }

                summary {
                    &::after {
                        border-inline-end-color: var(--text-secondary);
                        border-block-end-color: var(--text-secondary);
                    }

                    .detail-icon {
                        color: var(--accent-primary);
                    }
                }

                .detail-content p {
                    color: var(--text-secondary);
                }

                .step-item {
                    .step-number {
                        background: oklch(from var(--accent-primary) l c h / 0.15);
                        border-color: oklch(from var(--accent-primary) l c h / 0.25);
                        color: var(--accent-primary);
                    }

                    p {
                        color: var(--text-secondary);
                    }
                }
            }
        }

        .disclaimer-card {
            background: light-dark(oklch(75% 0.15 85 / 0.08), oklch(75% 0.15 85 / 0.06));
            border-color: light-dark(oklch(75% 0.15 85 / 0.2), oklch(75% 0.15 85 / 0.15));

            .disclaimer-icon {
                background: light-dark(oklch(75% 0.15 85 / 0.15), oklch(75% 0.15 85 / 0.12));
                color: light-dark(oklch(55% 0.18 85), oklch(75% 0.15 85));
            }

            h3 {
                color: light-dark(oklch(55% 0.18 85), oklch(75% 0.15 85));
            }

            p {
                color: light-dark(oklch(45% 0.1 85), oklch(80% 0.1 85 / 0.8));
            }
        }

        .landing-actions {
            .back-link {
                color: var(--text-secondary);

                &:hover {
                    color: var(--text-primary);
                }
            }
        }

        .error-state {
            svg {
                color: var(--color-error);
            }

            p {
                color: var(--text-secondary);
            }
        }
    }

    /* Session stub theme */
    .simulation-session-page {
        .session-stub {
            .stub-icon {
                background: oklch(from var(--accent-primary) l c h / 0.1);
                border-color: oklch(from var(--accent-primary) l c h / 0.2);
                color: var(--accent-primary);
            }

            p {
                color: var(--text-secondary);
            }
        }
    }
}

/* Components layer — layout, sizing, spacing only */
@layer components {
    .simulation-landing-page {
        position: relative;
        max-inline-size: 800px;
        margin-inline: auto;
        padding: var(--space-2xl) var(--space-lg);

        /* Header — centered */
        .landing-header {
            position: relative;
            z-index: 1;
            text-align: center;
            margin-block-end: var(--space-2xl);

            .industry-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 6px 16px;
                border-radius: 100px;
                font-size: var(--fs-xsmall);
                font-weight: var(--fw-medium);
                border: 1px solid;
                margin-block-end: var(--space-lg);
            }

            h1 {
                font-family: var(--font-heading);
                font-size: clamp(1.8rem, 4vw, 2.5rem);
                font-weight: var(--fw-bold);
                letter-spacing: -0.02em;
                margin-block-end: var(--space-md);
            }

            .landing-description {
                font-size: var(--fs-large);
                max-inline-size: 600px;
                margin-inline: auto;
                line-height: 1.7;
            }
        }

        /* Info cards — 3 column grid */
        .info-cards {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-lg);
            margin-block-end: var(--space-xl);
        }

        .info-card {
            border-radius: 16px;
            border: 1px solid;
            padding: var(--space-xl);
            text-align: center;

            .info-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-inline: auto;
                margin-block-end: var(--space-sm);
            }

            .info-label {
                font-size: var(--fs-xsmall);
                margin-block-end: 4px;
                font-weight: var(--fw-regular);
            }

            .info-value {
                font-family: var(--font-heading);
                font-size: var(--fs-large);
                font-weight: var(--fw-semibold);
                text-transform: capitalize;
            }

            .info-sub {
                font-size: var(--fs-xxsmall);
                opacity: 0.7;
                margin-block-start: 4px;
            }
        }

        /* Skills section */
        .skills-section {
            position: relative;
            z-index: 1;
            border-radius: 16px;
            border: 1px solid;
            padding: var(--space-xl);
            margin-block-end: var(--space-xl);

            .section-label {
                font-size: var(--fs-xsmall);
                margin-block-end: var(--space-md);
                font-weight: var(--fw-regular);
            }

            .skills-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }

            .skill-chip {
                padding: 6px 14px;
                border-radius: 8px;
                font-size: var(--fs-xsmall);
                font-weight: var(--fw-medium);
                border: 1px solid;
            }
        }

        /* Background section — details elements */
        .background-section {
            position: relative;
            z-index: 1;
            margin-block-end: var(--space-xl);

            .section-label {
                font-size: var(--fs-xsmall);
                margin-block-end: var(--space-md);
                font-weight: var(--fw-regular);
            }

            .background-detail {
                border-radius: 12px;
                border: 1px solid;
                margin-block-end: var(--space-sm);
                overflow: hidden;
                transition: border-color 0.2s ease;

                summary {
                    display: flex;
                    align-items: center;
                    gap: var(--space-sm);
                    padding: var(--space-md) var(--space-lg);
                    cursor: pointer;
                    font-family: var(--font-heading);
                    font-weight: var(--fw-semibold);
                    font-size: var(--fs-small);
                    list-style: none;
                    user-select: none;

                    &::-webkit-details-marker {
                        display: none;
                    }

                    &::after {
                        content: '';
                        margin-inline-start: auto;
                        inline-size: 8px;
                        block-size: 8px;
                        border-inline-end: 2px solid;
                        border-block-end: 2px solid;
                        transform: rotate(-45deg);
                        transition: transform 0.2s ease;
                    }

                    .detail-icon {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-shrink: 0;
                    }
                }

                &[open] summary::after {
                    transform: rotate(45deg);
                }

                .detail-content {
                    padding: 0 var(--space-lg) var(--space-lg);

                    p {
                        line-height: 1.7;
                        white-space: pre-wrap;
                    }
                }

                .steps-list {
                    display: flex;
                    flex-direction: column;
                    gap: var(--space-md);
                }

                .step-item {
                    display: flex;
                    gap: var(--space-md);
                    align-items: flex-start;

                    .step-number {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-shrink: 0;
                        inline-size: 28px;
                        block-size: 28px;
                        border-radius: 50%;
                        font-size: var(--fs-xsmall);
                        font-weight: var(--fw-semibold);
                        border: 1px solid;
                    }

                    p {
                        line-height: 1.6;
                        padding-block-start: 3px;
                    }
                }
            }
        }

        /* Disclaimer card */
        .disclaimer-card {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: flex-start;
            gap: var(--space-lg);
            padding: var(--space-lg);
            border-radius: 16px;
            border: 1px solid;
            margin-block-end: var(--space-2xl);

            .disclaimer-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                inline-size: 40px;
                block-size: 40px;
                border-radius: 10px;
            }

            h3 {
                font-family: var(--font-heading);
                font-weight: var(--fw-semibold);
                font-size: var(--fs-small);
                margin-block-end: 4px;
            }

            p {
                font-size: var(--fs-xsmall);
                line-height: 1.6;
            }
        }

        /* Action buttons */
        .landing-actions {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-md);

            .start-button {
                font-size: var(--fs-large);
                padding: var(--space-md) var(--space-2xl);
            }

            .back-link {
                font-size: var(--fs-xsmall);
                text-decoration: none;
            }
        }

        /* Error state */
        .error-state {
            position: relative;
            z-index: 1;
            text-align: center;
            padding: var(--space-3xl) var(--space-xl);

            svg {
                margin-inline: auto;
                margin-block-end: var(--space-lg);
            }

            h2 {
                font-family: var(--font-heading);
                font-size: var(--fs-xl);
                font-weight: var(--fw-semibold);
                margin-block-end: var(--space-sm);
            }

            p {
                margin-block-end: var(--space-lg);
            }
        }
    }

    /* Session stub page */
    .simulation-session-page {
        position: relative;
        min-block-size: calc(100dvb - 80px);
        display: flex;
        align-items: center;
        justify-content: center;

        .session-stub {
            position: relative;
            z-index: 1;
            text-align: center;
            padding: var(--space-3xl) var(--space-xl);

            .stub-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                inline-size: 80px;
                block-size: 80px;
                margin-inline: auto;
                margin-block-end: var(--space-lg);
                border-radius: 50%;
                border: 1px solid;
            }

            h1 {
                font-family: var(--font-heading);
                font-size: var(--fs-xxl);
                font-weight: var(--fw-bold);
                margin-block-end: var(--space-sm);
            }

            p {
                font-size: var(--fs-small);
                margin-block-end: var(--space-xl);
            }
        }
    }

    /* Responsive */
    @media (max-width: 640px) {
        .simulation-landing-page {
            padding: var(--space-lg) var(--space-md);

            .info-cards {
                grid-template-columns: 1fr;
            }

            .disclaimer-card {
                flex-direction: column;
                text-align: center;

                .disclaimer-icon {
                    margin-inline: auto;
                }
            }
        }
    }
}