/*
 * PLAYHUB VISUAL LAYOUT FOUNDATION
 * --------------------------------
 * Shared spacing and readable content surfaces for every image-based layout.
 * Theme-specific colors still come from the selected layout CSS variables.
 */

/* Genuine outer spacing: content never touches the illustrated viewport edge. */
body.visual-layout .page-shell:not(.chat-page-shell) {
    width: min(1240px, calc(100% - 48px));
    padding-right: clamp(20px, 2.8vw, 40px);
    padding-left: clamp(20px, 2.8vw, 40px);
}

/* Standalone pages need a solid reading surface over detailed artwork. */
body.visual-layout .page-shell:not(.chat-page-shell) > .editor-shell,
body.visual-layout .page-shell:not(.chat-page-shell) > .document,
body.visual-layout .page-shell:not(.chat-page-shell) > .error-page {
    padding: clamp(24px, 3.5vw, 44px);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 16px 38px rgb(0 0 0 / 22%);
}

/* Dashboard headers and sections retain separate structure but gain side room. */
body.visual-layout .page-shell:not(.chat-page-shell) > .dashboard-header,
body.visual-layout .page-shell:not(.chat-page-shell) > .workspace-section {
    padding-right: clamp(20px, 2.8vw, 36px);
    padding-left: clamp(20px, 2.8vw, 36px);
}

/* Nested sections already sit inside the padded editor panel. */
body.visual-layout .editor-shell > .workspace-section {
    padding-right: clamp(16px, 2vw, 26px);
    padding-left: clamp(16px, 2vw, 26px);
}

/* Keep row content away from panel borders. */
body.visual-layout .character-row,
body.visual-layout .play-row,
body.visual-layout .room-row,
body.visual-layout .admin-user-row,
body.visual-layout .log-row {
    padding-right: 14px;
    padding-left: 14px;
}

@media (max-width: 680px) {
    body.visual-layout .page-shell:not(.chat-page-shell) {
        width: 100%;
        padding-right: 12px;
        padding-left: 12px;
    }

    body.visual-layout .page-shell:not(.chat-page-shell) > .editor-shell,
    body.visual-layout .page-shell:not(.chat-page-shell) > .document,
    body.visual-layout .page-shell:not(.chat-page-shell) > .error-page {
        padding: 20px 18px;
    }

    body.visual-layout .page-shell:not(.chat-page-shell) > .dashboard-header,
    body.visual-layout .page-shell:not(.chat-page-shell) > .workspace-section,
    body.visual-layout .editor-shell > .workspace-section {
        padding-right: 18px;
        padding-left: 18px;
    }
}