/* Shared article containment layer. Fixes the offending element instead of clipping the page. */
.postGridLayout,
.grid-layout,
.post-content-column,
.markdown-body,
.markdown-body > *,
.chat-content-wrap,
.chat-bubble,
.status-box,
.tip-box,
.article-history {
    min-width: 0;
    box-sizing: border-box;
}

.post-content-column,
.markdown-body {
    width: 100%;
    max-width: 100%;
}

.markdown-body :where(p, li, dd, dt, blockquote, figcaption, h1, h2, h3, h4, h5, h6, a, mark, summary) {
    overflow-wrap: anywhere;
    word-break: normal;
}

.markdown-body :where(img, picture, svg, canvas, video, audio, iframe, embed, object) {
    display: block;
    max-width: 100%;
}

.markdown-body :where(img, video) {
    height: auto;
}

.markdown-body :where(iframe, embed, object) {
    width: 100%;
}

.markdown-body pre {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    white-space: pre;
}

.markdown-body pre code {
    white-space: inherit;
    overflow-wrap: normal;
    word-break: normal;
}

.markdown-body :not(pre) > code {
    white-space: normal;
    overflow-wrap: anywhere;
}

.markdown-body table,
.zebra-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.markdown-body :where(th, td) {
    min-width: min(10rem, 48vw);
    overflow-wrap: anywhere;
}

.markdown-body :where(ul, ol) {
    max-width: 100%;
    padding-inline-start: clamp(1.2rem, 5vw, 2.2rem);
}

.markdown-body :where(details, blockquote, .tip-box, .status-box, .restricted-container, .yt-iframe-wrapper, .chat-messages-area, .article-history) {
    width: 100%;
    max-width: 100%;
}

.markdown-body details > *:not(summary),
.markdown-body .chat-row > *,
.markdown-body .chat-content-wrap > * {
    min-width: 0;
    max-width: 100%;
}

.markdown-body .magic-link::after {
    width: min(280px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    white-space: normal;
}

.markdown-body .phiz-container {
    width: clamp(5.5rem, 34vw, 8.75rem);
    max-width: 100%;
}

.markdown-body .phiz-tooltip {
    max-width: min(15rem, calc(100vw - 2rem));
    overflow-wrap: anywhere;
}

.markdown-body :where(.spoiler, .rainbow-text, .drop-cap, mark) {
    max-width: 100%;
}

.yt-iframe-wrapper {
    aspect-ratio: 16 / 9;
    height: auto !important;
}

.yt-iframe-wrapper iframe {
    width: 100%;
    height: 100%;
}

@media (max-width: 600px) {
    .post-content-column {
        padding-inline: clamp(1rem, 5vw, 1.5rem) !important;
    }

    .markdown-body h1 { font-size: clamp(1.65rem, 8vw, 2.2rem); }
    .markdown-body h2 { font-size: clamp(1.35rem, 6.5vw, 1.8rem); }
    .markdown-body h3 { font-size: clamp(1.1rem, 5.5vw, 1.4rem); }

    .markdown-body blockquote {
        margin-inline: 0;
        padding-inline-start: 1rem;
    }

    .markdown-body [style*="width"],
    .markdown-body [width] {
        max-width: 100% !important;
    }

    .markdown-body [style*="min-width"] {
        min-width: 0 !important;
    }

    .markdown-body .chat-row {
        gap: .55rem;
    }

    .markdown-body .chat-content-wrap {
        max-width: calc(100% - 2.75rem);
    }

    .markdown-body .magic-link::after {
        position: fixed;
        inset: auto 1rem 1rem;
        width: auto;
        max-width: none;
        transform: translateY(.5rem);
    }

    .markdown-body .magic-link:hover::after,
    .markdown-body .magic-link:active::after,
    .markdown-body .magic-link:focus-visible::after {
        transform: translateY(0);
    }
}