/* Baseline responsive rules — load after feature CSS */

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img,
video,
canvas {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

pre,
code {
    max-width: 100%;
    overflow-x: auto;
    word-break: break-word;
}

@media (max-width: 1024px) {
    .main-content {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        box-sizing: border-box;
    }
}

@media (max-width: 640px) {
    .container {
        padding: clamp(1rem, 4vw, 1.5rem) clamp(0.75rem, 3vw, 1.25rem);
        border-radius: 1rem;
    }

    .homepage-container {
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }
}

/* Lockin Study Hub only (#app wraps main) */
#app > header {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-top: max(var(--space-lg, 1rem), env(safe-area-inset-top));
}

#app #main-content {
    padding-left: max(var(--space-xl, 1rem), env(safe-area-inset-left));
    padding-right: max(var(--space-xl, 1rem), env(safe-area-inset-right));
    padding-bottom: max(var(--space-3xl, 2rem), env(safe-area-inset-bottom));
}

@media (max-width: 768px) {
    #app #main-content {
        padding-top: max(var(--space-lg, 1rem), env(safe-area-inset-top));
        padding-right: max(var(--space-md, 0.75rem), env(safe-area-inset-right));
        padding-bottom: max(var(--space-2xl, 1.5rem), env(safe-area-inset-bottom));
        padding-left: max(var(--space-md, 0.75rem), env(safe-area-inset-left));
    }
}