/* Focused public content. Header, side panels and their motion keep their own layout. */
html.ds-theme body.sd-focused-body .sd-main {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html.ds-theme body.sd-focused-body .ds-desktop-center {
    container-name: none;
    container-type: normal;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

html.ds-theme body.sd-focused-body .ds-focused-standalone {
    width: 100%;
    min-width: 0;
    padding: 0;
}

html.ds-theme body.sd-focused-body .ds-content-frame {
    --ds-content-max: 920px;
    container-name: ds-home-content ds-focused-content;
    container-type: inline-size;
    display: grid;
    align-content: start;
    gap: 16px;
    box-sizing: border-box;
    width: min(100%, var(--ds-content-max)) !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    transform: none;
    /* Actual sidebar rectangles drive the frame on every motion frame. */
    transition: none !important;
    animation: none !important;
}

html.ds-theme body.sd-focused-body .ds-content-frame[data-content-kind="article"] { --ds-content-max: 740px; }
html.ds-theme body.sd-focused-body .ds-content-frame[data-content-kind="task"] { --ds-content-max: 960px; }
html.ds-theme body.sd-focused-body .ds-content-frame[data-content-kind="form"] { --ds-content-max: 560px; }

html.ds-theme body.sd-focused-body .ds-content-frame > * { min-width: 0; }

/* A visible content surface separates the center from the surrounding page gutters. */
html.ds-theme body.sd-focused-body.sd-home-panels .ds-content-frame {
    padding: 20px;
    border: 1px solid #cbd8e8;
    border-radius: 16px;
    background: #eef3f9;
    box-shadow: 0 4px 18px rgba(18, 49, 92, .06);
}

/* Preserve the tool directory's three columns inside the newly padded surface. */
@container ds-focused-content (min-width: 860px) {
    html.ds-theme body.sd-focused-body.sd-home-panels .sd-tool-page { --sd-tool-hub-columns: 3; }
}

@media (min-width: 1100px) {
    html.ds-theme body.sd-focused-body .ds-content-frame.is-content-positioned {
        width: var(--ds-content-width) !important;
        margin-left: var(--ds-content-inset) !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 1099px) {
    html.ds-theme body.sd-focused-body .sd-main {
        width: calc(100% - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    html.ds-theme body.sd-focused-body .ds-content-frame {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 12px;
    }
    html.ds-theme body.sd-focused-body.sd-home-panels .ds-content-frame {
        padding: 12px;
        border-radius: 14px;
    }
    html.ds-theme body.sd-focused-body .ds-focused-standalone > .ds-content-frame[data-content-kind="form"] {
        width: min(100%, 560px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    html.ds-theme body.sd-focused-body .ds-content-frame :is(input, select, textarea) { font-size: 16px; }
    /* Only known viewport toasts are portalled; native dialogs keep their app scope. */
    html.ds-theme body.sd-focused-body > :is(.sd-stock-toast, .sd-news__toast, .hm-toast,
        .sd-tool-toast, .sd-investment-toast, .sd-watch-toast)[data-content-overlay] {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 479px) {
    html.ds-theme body.sd-focused-body.sd-home-panels .ds-content-frame {
        padding: 10px;
        border-radius: 12px;
    }
}