/* Explain: App-specific layout utilities and grid definitions. */
.site-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.shell {
    width: 100%;
    max-width: 78rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.shell-narrow {
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 768px) {
    .shell,
    .shell-narrow {
        padding-inline: 2rem;
    }
}

.section-block {
    padding-block: 3.25rem;
}

@media (min-width: 768px) {
    .section-block {
        padding-block: 5rem;
    }
}

.grid-auto {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.split {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 900px) {
    .split {
        grid-template-columns: 1.05fr 0.95fr;
    }
}

.dash-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 1024px) {
    .dash-grid {
        grid-template-columns: 16rem 1fr;
    }
}

.auth-shell {
    min-height: calc(100vh - 6rem);
    display: grid;
    place-items: center;
    padding-block: 3rem;
}