/* retoor <retoor@molodetz.nl> */

@layer layout {
    .splash-page .splash { padding-block: 0; }

    .splash-page .hero { padding-block: var(--space-8) var(--space-7); }

    .splash-page .section {
        padding-block: var(--space-7);
        border-block-start: var(--border-hairline) solid var(--color-border-subtle);
    }

    @media (max-width: 48rem) {
        .splash-page .hero { padding-block: var(--space-7) var(--space-6); }
        .splash-page .section { padding-block: var(--space-6); }
    }
}

@layer components {
    .splash-page h1 {
        font-size: var(--text-2xl);
        font-weight: var(--weight-regular);
        letter-spacing: var(--tracking-tight);
        max-inline-size: 24ch;
    }

    .splash-page .hero-lead {
        margin-block-start: var(--space-4);
        max-inline-size: 60ch;
        font-size: var(--text-lg);
        color: var(--color-text-secondary);
    }

    .splash-page .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
        margin-block-start: var(--space-6);
    }

    .splash-page .hero-note {
        margin-block-start: var(--space-4);
        font-size: var(--text-sm);
        color: var(--color-text-disabled);
    }

    .splash-page h2 {
        font-size: var(--text-xl);
        font-weight: var(--weight-regular);
        letter-spacing: var(--tracking-tight);
    }

    .splash-page .section-lead {
        margin-block-start: var(--space-2);
        max-inline-size: 65ch;
        color: var(--color-text-secondary);
        font-size: var(--text-sm);
    }

    .splash-page .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
        gap: var(--space-4);
        margin-block-start: var(--space-5);
    }

    .splash-page .card {
        display: block;
        padding: var(--space-5);
        background: var(--color-surface-raised);
        border: var(--border-hairline) solid var(--color-border-subtle);
        border-radius: var(--radius-md);
        color: var(--color-text-primary);
        transition: border-color var(--dur-fast) var(--ease-standard),
                    box-shadow var(--dur-fast) var(--ease-standard);
    }

    .splash-page a.card:hover {
        border-color: var(--color-border-strong);
        box-shadow: var(--shadow-1);
        opacity: 1;
    }

    .splash-page a.card:focus-visible { outline: none; box-shadow: var(--focus-ring); }

    .splash-page .card h3 {
        font-size: var(--text-md);
        font-weight: var(--weight-medium);
        color: var(--color-text-primary);
    }

    .splash-page .card p {
        margin-block-start: var(--space-2);
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
    }

    .splash-page .chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        list-style: none;
        margin-block-start: var(--space-5);
    }

    .splash-page .chip {
        padding-block: var(--space-1);
        padding-inline: var(--space-3);
        background: var(--color-surface-sunken);
        border: var(--border-hairline) solid var(--color-border-subtle);
        border-radius: var(--radius-full);
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
    }

    .splash-page .server-card-wrap {
        max-inline-size: 34rem;
        margin-block-start: var(--space-5);
    }

    .splash-page .server-settings { margin-block-start: var(--space-3); }

    .splash-page .setting {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-3);
        padding-block: var(--space-2);
        border-block-end: var(--border-hairline) solid var(--color-border-subtle);
    }
    .splash-page .setting:last-child { border-block-end: 0; }

    .splash-page .setting dt {
        inline-size: 5rem;
        flex-shrink: 0;
        font-size: var(--text-sm);
        color: var(--color-text-disabled);
    }

    .splash-page .setting dd {
        flex: 1;
        min-inline-size: 0;
        font-size: var(--text-sm);
        color: var(--color-text-primary);
    }

    .splash-page .setting .endpoint {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-2);
    }
    .splash-page .setting .endpoint + .endpoint { margin-block-start: var(--space-1); }

    .splash-page .setting .host {
        font-family: var(--font-mono);
        overflow-wrap: anywhere;
    }

    .splash-page .setting .security {
        display: inline-block;
        padding-inline: var(--space-1);
        border: var(--border-hairline) solid var(--color-border-subtle);
        border-radius: var(--radius-xs);
        font-size: var(--text-xs);
        color: var(--color-text-secondary);
        white-space: nowrap;
    }

    .splash-page .card-action {
        margin-block-start: var(--space-4);
        font-size: var(--text-sm);
    }

    .splash-page .principles {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
        gap: var(--space-5);
        margin-block-start: var(--space-5);
    }

    .splash-page .principle dt {
        font-weight: var(--weight-medium);
        color: var(--color-text-primary);
    }

    .splash-page .principle dd {
        margin-block-start: var(--space-2);
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
    }

    .splash-page .footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2) var(--space-4);
        margin-block-end: var(--space-3);
        font-size: var(--text-sm);
    }
    .splash-page .footer-links a { color: var(--color-text-secondary); }
    .splash-page .footer-links a:hover { color: var(--color-text-primary); opacity: 1; }

    @media (max-width: 30rem) {
        .splash-page .hero-actions { flex-direction: column; align-items: stretch; }
        .splash-page .setting dt { inline-size: 100%; }
    }
}

@layer overrides {
    @media (max-width: 48rem) {
        .splash-page nav .nav-inner {
            flex-wrap: wrap;
            gap: var(--space-2);
            padding-block: var(--space-2);
        }

        .splash-page nav .nav-left {
            flex-wrap: wrap;
            gap: var(--space-2) var(--space-4);
        }

        .splash-page nav .nav-links {
            display: flex;
            position: static;
            flex-direction: row;
            flex-wrap: wrap;
            gap: var(--space-1);
            background: none;
            border-block-end: 0;
            box-shadow: none;
            padding: 0;
        }
    }
}