html body.post-detail-open {
        --detail-bg: #ffffff;
        --detail-text: #09090b;
        --detail-muted: rgba(9, 9, 11, 0.48);
        --detail-soft: rgba(9, 9, 11, 0.045);
        --detail-line: rgba(9, 9, 11, 0.09);
        --detail-gutter: 20px;
        --detail-avatar: 36px;
        --detail-gap: 12px;
    }

    html[data-theme^="dark"] body.post-detail-open,
    body[data-theme^="dark"].post-detail-open {
        --detail-bg: #050506;
        --detail-text: #ffffff;
        --detail-muted: rgba(255, 255, 255, 0.52);
        --detail-soft: rgba(255, 255, 255, 0.08);
        --detail-line: rgba(255, 255, 255, 0.10);
    }

    html body #enter-modal.post-detail-page {
        --detail-bg: #ffffff;
        --detail-text: #09090b;
        --detail-muted: rgba(9, 9, 11, 0.48);
        --detail-soft: rgba(9, 9, 11, 0.045);
        --detail-line: rgba(9, 9, 11, 0.09);
        --detail-gutter: 20px;
        --detail-avatar: 36px;
        --detail-gap: 12px;
        display: block !important;
        width: 100% !important;
        height: 100dvh !important;
        overflow: hidden !important;
        background: var(--detail-bg) !important;
        color: var(--detail-text) !important;
    }

    /* Only lock the open position while the sheet is not dismissing. */
    html body #enter-modal.post-detail-page:not([data-closing]):not([data-opening]) {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    html[data-theme^="dark"] body #enter-modal.post-detail-page,
    body[data-theme^="dark"] #enter-modal.post-detail-page {
        --detail-bg: #050506;
        --detail-text: #ffffff;
        --detail-muted: rgba(255, 255, 255, 0.52);
        --detail-soft: rgba(255, 255, 255, 0.08);
        --detail-line: rgba(255, 255, 255, 0.10);
    }

    html body #enter-modal.post-detail-page::before {
        content: none !important;
        display: none !important;
    }

    html body #enter-modal.post-detail-page #post-info {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        display: block !important;
        background: var(--detail-bg) !important;
        box-sizing: border-box !important;
        overscroll-behavior: contain !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html body #enter-modal.post-detail-page #post-info::-webkit-scrollbar {
        display: none !important;
    }

    html body #enter-modal.post-detail-page .post-detail-thread-grid {
        width: 100% !important;
        min-height: 100% !important;
        padding:
            calc(12px + env(safe-area-inset-top, 0px))
            var(--detail-gutter)
            calc(84px + env(safe-area-inset-bottom, 0px)) !important;
        display: grid !important;
        grid-template-columns: var(--detail-avatar) minmax(0, 1fr) !important;
        grid-auto-rows: max-content !important;
        column-gap: var(--detail-gap) !important;
        align-content: start !important;
        box-sizing: border-box !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: var(--detail-bg) !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    /* The legacy magazine layout targets `.post-info > div:first-child` and
       draws a full-height accent rule. The thread grid is now that first div. */
    html body #enter-modal.post-detail-page #post-info > .post-detail-thread-grid:first-child::before,
    html body #enter-modal.post-detail-page #post-info > .post-detail-thread-grid:first-child::after {
        content: none !important;
        display: none !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    html body #enter-modal.post-detail-page .post-detail-thread-grid > .enter-post-hero,
    html body #enter-modal.post-detail-page .post-detail-thread-grid > .enter-post-body,
    html body #enter-modal.post-detail-page .post-detail-thread-grid > .post-detail-engagement,
    html body #enter-modal.post-detail-page .post-detail-thread-grid > .post-detail-replies-head,
    html body #enter-modal.post-detail-page .post-detail-thread-grid > .post-detail-inline-replies {
        order: initial !important;
        flex: none !important;
    }

    html body #enter-modal.post-detail-page .enter-post-hero {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: var(--detail-avatar) minmax(0, 1fr) !important;
        column-gap: var(--detail-gap) !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body #enter-modal.post-detail-page .enter-post-hero::before,
    html body #enter-modal.post-detail-page .enter-post-hero::after {
        content: none !important;
        display: none !important;
    }

    html body #enter-modal.post-detail-page .enter-post-author {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: var(--detail-avatar) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: var(--detail-avatar) minmax(0, 1fr) !important;
        column-gap: var(--detail-gap) !important;
        align-items: center !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body #enter-modal.post-detail-page .enter-post-author-link {
        color: inherit !important;
        text-decoration: none !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    html body #enter-modal.post-detail-page .enter-post-author-link:active {
        opacity: 0.62 !important;
    }

    html body #enter-modal.post-detail-page:not(.media-detail-active) .enter-post-hero .enter-post-author,
    html body #enter-modal.post-detail-page.media-detail-active .enter-post-hero .enter-post-author {
        grid-template-columns: var(--detail-avatar) minmax(0, 1fr) !important;
        column-gap: var(--detail-gap) !important;
        gap: 0 var(--detail-gap) !important;
    }

    html body #enter-modal.post-detail-page .enter-post-author > div:last-child {
        grid-column: 2 !important;
        min-width: 0 !important;
        padding-right: 52px !important;
        text-align: left !important;
    }

    html body #enter-modal.post-detail-page .enter-post-avatar {
        grid-column: 1 !important;
        width: var(--detail-avatar) !important;
        height: var(--detail-avatar) !important;
        min-width: var(--detail-avatar) !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: var(--detail-soft) !important;
        color: var(--detail-muted) !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    html body #enter-modal.post-detail-page .enter-post-avatar img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    html body #enter-modal.post-detail-page .enter-post-author-name {
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: var(--detail-text) !important;
        -webkit-text-fill-color: var(--detail-text) !important;
        font-size: 15px !important;
        line-height: 1.12 !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        text-align: left !important;
    }

    html body #enter-modal.post-detail-page .enter-post-time {
        margin-top: 4px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: var(--detail-muted) !important;
        -webkit-text-fill-color: var(--detail-muted) !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        text-align: left !important;
    }

    html body #enter-modal.post-detail-page .enter-post-body {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 16px 0 14px !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body #enter-modal.post-detail-page:not(.media-detail-active) .post-detail-thread-grid > .enter-post-body,
    html body #enter-modal.post-detail-page.media-detail-active .post-detail-thread-grid > .enter-post-body {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 16px 0 14px !important;
        transform: none !important;
    }

    html body #enter-modal.post-detail-page:not(.media-detail-active) .post-detail-thread-grid > .enter-post-body > .enter-post-copy {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
        text-align: left !important;
        text-indent: 0 !important;
        transform: none !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
    }

    html body #enter-modal.post-detail-page .enter-post-copy,
    html body #enter-modal.post-detail-page .enter-post-headline {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--detail-text) !important;
        -webkit-text-fill-color: var(--detail-text) !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
    }

    /* Reset the actual text-bearing nodes, not just their grid containers. */
    html body #enter-modal.post-detail-page .enter-post-author-name,
    html body #enter-modal.post-detail-page .enter-post-time,
    html body #enter-modal.post-detail-page .enter-post-copy,
    html body #enter-modal.post-detail-page .enter-post-headline,
    html body #enter-modal.post-detail-page .post-detail-replies-head span,
    html body #enter-modal.post-detail-page .post-detail-inline-reply-author,
    html body #enter-modal.post-detail-page .post-detail-inline-reply-time,
    html body #enter-modal.post-detail-page .post-detail-inline-reply-text {
        margin-left: 0 !important;
        padding-left: 0 !important;
        text-indent: 0 !important;
        transform: none !important;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
        font-kerning: normal !important;
    }

    html body #enter-modal.post-detail-page .enter-post-hero .enter-post-headline {
        grid-column: 2 !important;
        margin-top: 14px !important;
    }

    html body #enter-modal.post-detail-page .post-detail-engagement {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 4px 0 18px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body #enter-modal.post-detail-page .post-detail-engagement .mobile-community-actions,
    html body #enter-modal.post-detail-page .post-detail-engagement .bytes-tv-mobile-hero-rail {
        width: auto !important;
        max-width: max-content !important;
        min-height: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    html body #enter-modal.post-detail-page .post-detail-engagement .mobile-community-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: stretch !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    html body #enter-modal.post-detail-page .post-detail-engagement .bytes-tv-mobile-hero-rail {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    html body #enter-modal.post-detail-page .post-detail-engagement .community-feed-action {
        position: relative !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: var(--detail-soft) !important;
        color: var(--detail-muted) !important;
        -webkit-text-fill-color: currentColor !important;
        box-shadow: none !important;
    }

    html body #enter-modal.post-detail-page .post-detail-engagement .community-feed-action::after {
        content: none !important;
        display: none !important;
    }

    html body #enter-modal.post-detail-page .post-detail-engagement .community-feed-action i,
    html body #enter-modal.post-detail-page .post-detail-engagement .community-action-icon {
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px !important;
        color: currentColor !important;
        -webkit-text-fill-color: currentColor !important;
        font-size: 16px !important;
        line-height: 17px !important;
    }

    html body #enter-modal.post-detail-page .post-detail-engagement .community-action-label,
    html body #enter-modal.post-detail-page .post-detail-engagement [data-hero-action-label],
    html body #enter-modal.post-detail-page .post-detail-engagement .community-action-count {
        display: none !important;
    }

    html body #enter-modal.post-detail-page .post-detail-engagement .community-feed-action.has-engagement {
        color: var(--detail-text) !important;
    }

    html body #enter-modal.post-detail-page .post-detail-engagement .community-feed-action.has-engagement .community-action-count:not([hidden]),
    html body #enter-modal.post-detail-page .post-detail-engagement .community-feed-action.has-engagement strong[data-hero-action-count]:not([hidden]) {
        position: absolute !important;
        top: -5px !important;
        right: -6px !important;
        z-index: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        padding: 0 4px !important;
        border: 1px solid var(--detail-bg) !important;
        border-radius: 999px !important;
        background: var(--detail-text) !important;
        color: var(--detail-bg) !important;
        -webkit-text-fill-color: var(--detail-bg) !important;
        box-shadow: none !important;
        font-size: 9px !important;
        line-height: 1 !important;
        font-weight: 850 !important;
        letter-spacing: 0 !important;
    }

    html body #enter-modal.post-detail-page .post-detail-replies-head {
        grid-column: 1 / -1 !important;
        justify-self: stretch !important;
        align-self: start !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 0 10px !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body #enter-modal.post-detail-page .post-detail-replies-head > div {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        color: var(--detail-text) !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        font-weight: 720 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        transform: none !important;
    }

    html body #enter-modal.post-detail-page .post-detail-replies-head > div > span {
        position: static !important;
        display: inline !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        inset: auto !important;
        transform: none !important;
    }

    html body #enter-modal.post-detail-page .post-detail-replies-head > div > span:first-child::after {
        content: " ·" !important;
    }

    html body #enter-modal.post-detail-page .post-detail-inline-replies {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 0 12px !important;
        display: block !important;
        background: transparent !important;
    }

    html body #enter-modal.post-detail-page .post-detail-inline-reply {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 0 !important;
        display: grid !important;
        grid-template-columns: 30px minmax(0, 1fr) !important;
        column-gap: var(--detail-gap) !important;
        border: 0 !important;
        border-bottom: 0 !important;
        background: transparent !important;
    }

    html body #enter-modal.post-detail-page .post-detail-inline-reply-avatar {
        grid-column: 1 !important;
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        background: var(--detail-soft) !important;
        color: var(--detail-muted) !important;
    }

    html body #enter-modal.post-detail-page .post-detail-inline-reply > div:last-child {
        grid-column: 2 !important;
        position: relative !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    html body #enter-modal.post-detail-page .post-detail-inline-reply-head {
        position: relative !important;
        min-height: 20px !important;
        padding-right: 34px !important;
    }

    html body #enter-modal.post-detail-page .post-detail-inline-reply-menu {
        position: absolute !important;
        top: -7px !important;
        right: -4px !important;
        z-index: 4 !important;
        display: block !important;
    }

    html body #enter-modal.post-detail-page .post-detail-inline-reply-menu-trigger {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        color: var(--detail-muted) !important;
        -webkit-text-fill-color: currentColor !important;
        box-shadow: none !important;
    }

    html body #enter-modal.post-detail-page .post-detail-inline-reply-menu-trigger i {
        color: currentColor !important;
        -webkit-text-fill-color: currentColor !important;
        font-size: 14px !important;
        line-height: 1 !important;
        pointer-events: none !important;
    }

    html body #enter-modal.post-detail-page .post-detail-inline-reply-menu-popover {
        position: absolute !important;
        top: 30px !important;
        right: 2px !important;
        z-index: 5 !important;
        min-width: 126px !important;
        margin: 0 !important;
        padding: 4px !important;
        border: 1px solid color-mix(in srgb, var(--detail-text) 10%, transparent) !important;
        border-radius: 10px !important;
        background: var(--detail-bg) !important;
        box-shadow: 0 10px 28px color-mix(in srgb, var(--detail-text) 12%, transparent) !important;
    }

    html body #enter-modal.post-detail-page .post-detail-inline-reply-menu-popover[hidden] {
        display: none !important;
    }

    html body #enter-modal.post-detail-page .post-detail-inline-reply-menu-popover button {
        width: 100% !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 11px !important;
        border: 0 !important;
        border-radius: 7px !important;
        background: transparent !important;
        color: #d92d20 !important;
        -webkit-text-fill-color: #d92d20 !important;
        box-shadow: none !important;
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 650 !important;
        text-align: left !important;
    }

    html body #enter-modal.post-detail-page .post-detail-inline-reply-author {
        color: var(--detail-text) !important;
        -webkit-text-fill-color: var(--detail-text) !important;
        font-weight: 400 !important;
        font-size: 14px !important;
    }

    html body #enter-modal.post-detail-page .post-detail-inline-reply-text {
        color: var(--detail-text) !important;
        -webkit-text-fill-color: var(--detail-text) !important;
        font-weight: 400 !important;
        font-size: 14px !important;
    }

    html body #enter-modal.post-detail-page .post-detail-inline-reply-time {
        color: var(--detail-muted) !important;
        -webkit-text-fill-color: var(--detail-muted) !important;
        font-weight: 400 !important;
    }

    /* Match the front Community feed's identity hierarchy: names use the
       primary ink and confident weight; timestamps stay quietly secondary. */
    html body #enter-modal.post-detail-page .enter-post-author-name,
    html body #enter-modal.post-detail-page .post-detail-inline-reply-author {
        color: var(--community-text, var(--detail-text)) !important;
        -webkit-text-fill-color: var(--community-text, var(--detail-text)) !important;
        font-weight: 740 !important;
    }

    html body #enter-modal.post-detail-page .enter-post-time,
    html body #enter-modal.post-detail-page .post-detail-inline-reply-time {
        color: var(--community-muted, var(--detail-muted)) !important;
        -webkit-text-fill-color: var(--community-muted, var(--detail-muted)) !important;
    }

    html body #enter-modal.post-detail-page .enter-post-avatar,
    html body #enter-modal.post-detail-page .post-detail-inline-reply-avatar {
        border-radius: 50% !important;
    }

    html body #enter-modal.post-detail-page:not(.has-post-comments) .post-detail-inline-replies::before {
        content: "Start the conversation." !important;
        display: block !important;
        margin-left: 0 !important;
        padding-top: 2px !important;
        color: var(--detail-muted) !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        font-weight: 560 !important;
    }

    html body.post-detail-open #global-comment-input {
        left: var(--detail-gutter, 20px) !important;
        right: var(--detail-gutter, 20px) !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html body.post-detail-open #global-comment-input > div {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    html body.post-detail-open #global-comment-input #comment-input {
        width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 54px 0 17px !important;
        border: 0 !important;
        border-radius: 19px !important;
        outline: 0 !important;
        background: color-mix(in srgb, var(--detail-text, #09090b) 5%, var(--detail-bg, #ffffff)) !important;
        color: var(--detail-text, #09090b) !important;
        -webkit-text-fill-color: var(--detail-text, #09090b) !important;
        box-shadow: none !important;
        font-size: 14px !important;
        font-weight: 520 !important;
    }

    html body.post-detail-open #global-comment-input button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        color: var(--detail-text, #09090b) !important;
        box-shadow: none !important;
    }

    html body.post-detail-open #global-comment-input button:first-of-type {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        z-index: 1 !important;
    }

    /* The dismiss chevron lives inside the reply dock in the markup, so the
       rules above — written for the dock's send button — stripped its
       background and corners too. It is not a dock button: it floats over the
       post at the top right, and without a ground of its own the chevron sat
       directly on the photo. Give it back the circle .post-detail-dismiss
       already defines. */
    html body.post-detail-open #global-comment-input button:last-child {
        position: fixed !important;
        top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        right: 12px !important;
        z-index: 100004 !important;
        border-radius: 50% !important;
        background: color-mix(in srgb, var(--detail-text, #09090b) 9%, var(--background, #fff)) !important;
        box-shadow: 0 2px 10px color-mix(in srgb, var(--detail-text, #09090b) 12%, transparent) !important;
    }

    html body.post-detail-open #global-comment-input button:last-child:active {
        background: color-mix(in srgb, var(--detail-text, #09090b) 18%, var(--background, #fff)) !important;
        transform: scale(0.92);
    }

    html body.post-detail-open #global-comment-input button i {
        color: currentColor !important;
        -webkit-text-fill-color: currentColor !important;
        font-size: 15px !important;
    }

    html body.post-detail-open #bottom-nav {
        display: none !important;
        pointer-events: none !important;
    }

    /* Everything behind the sheet is hidden while reading, but NOT while the
       sheet is animating out — otherwise the dismiss slides down over a bare
       white page and the feed only pops back at the end. Keeping the feed
       visible during the close means the sheet slides away onto it. */
    html body.post-detail-open:not(.post-detail-closing):not(.post-detail-opening) > *:not(#enter-modal):not(#global-comment-input):not(script):not(style):not(link) {
        visibility: hidden !important;
    }

    /* Explicit rows for the post detail.
     *
     * The thread grid is two columns and every child was auto-placed, so the
     * media block (grid-column: 2) got packed into whichever row was free —
     * measured at top:417px, below the replies list at 251px. Source order was
     * always correct; auto-placement was reordering it. Naming the rows makes
     * the sequence deterministic: author, media, actions, then replies. */
    html body #enter-modal.post-detail-page .post-detail-thread-grid {
        grid-template-rows:
            [hero] max-content
            [body] max-content
            [actions] max-content
            [replies-head] max-content
            [replies] max-content !important;
    }

    html body #enter-modal.post-detail-page .post-detail-thread-grid > .enter-post-hero {
        grid-row: hero !important;
    }

    html body #enter-modal.post-detail-page .post-detail-thread-grid > .enter-post-body {
        grid-row: body !important;
    }

    html body #enter-modal.post-detail-page .post-detail-thread-grid > .post-detail-engagement {
        grid-row: actions !important;
    }

    html body #enter-modal.post-detail-page .post-detail-thread-grid > .post-detail-replies-head {
        grid-row: replies-head !important;
    }

    html body #enter-modal.post-detail-page .post-detail-thread-grid > .post-detail-inline-replies {
        grid-row: replies !important;
    }

    /* The image was 393px wide inside a 305px column with object-fit: contain,
       so it overflowed its box and the gap read as black bars either side.
       Sizing to the column lets a portrait photo keep its own proportions. */
    html body #enter-modal.post-detail-page .enter-post-body img,
    html body #enter-modal.post-detail-page .enter-post-body video {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 70vh !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        border-radius: 14px !important;
        background: transparent !important;
    }

    /* `.enter-post-hero.is-media` reserved `safe-area-top + 130px`, which is why a
       post with media opened ~330px down the screen while a text post did not.
       That padding predates the current header; the thread grid already provides
       the top inset. */
    html body #enter-modal.post-detail-page .enter-post-hero.is-media,
    html body #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-hero.is-media {
        /* Match a text post exactly: that variant has no hero padding at all and
           opens flush under the chevron. The thread grid already supplies the
           12px top inset and the safe-area offset for both. */
        /* The same selector also set min-height:146px, and because the hero is a
           grid the author row was being centred inside that box — landing at
           top:42 where a text post sits at 12. Height follows content now. */
        padding-top: 0 !important;
        padding-bottom: 12px !important;
        min-height: 0 !important;
        align-content: start !important;
        align-items: start !important;
    }

    /* The body carried a near-black fill (rgb(7,8,17)) behind the media, so any
       area the photo did not cover showed as black bands above and below it.
       Community home uses a barely-there tint on the media itself and nothing
       behind it; match that here. */
    html body #enter-modal.post-detail-page .enter-post-body,
    html body #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-body,
    html body #enter-modal.post-detail-page .enter-post-body.is-media {
        min-width: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }

    html body #enter-modal.post-detail-page .enter-post-body .enter-detail-media-stage,
    html body #enter-modal.post-detail-page .enter-post-body .bloc-card-media-preview,
    html body #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage,
    html body #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage .bloc-card-media-preview {
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Same soft tint community home puts behind a still, so a transparent PNG or a
       slow-loading photo reads as a placeholder rather than a hole. */
    html body #enter-modal.post-detail-page .enter-post-body img {
        background: rgba(11, 11, 13, 0.035) !important;
        border-radius: 16px !important;
    }

    /* A `.has-post-comments.media-detail-active` rule sets min-height:min(36vh,360px)
       on the stage and a fixed height on the media, which is why a portrait photo
       rendered 305x290 rather than 305x466. Matched here so height follows the
       image; 70vh still caps anything very tall. */
    html body #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage,
    html body #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage [data-embed-scope],
    html body #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage .bloc-card-media-preview {
        min-height: 0 !important;
        height: auto !important;
    }

    html body #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage img,
    html body #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage video {
        height: auto !important;
        min-height: 0 !important;
        max-height: 70vh !important;
        object-fit: contain !important;
    }

    /* The image was sized correctly to its stage — the stage itself was 393px
       inside a 305px body, so it escaped the column and the excess read as black
       bars. Constrain the stage and its preview wrapper to the body. */
    html body #enter-modal.post-detail-page .enter-post-body .enter-detail-media-stage,
    html body #enter-modal.post-detail-page .enter-post-body .bloc-card-media-preview {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        /* A min-height of ~290px held the wrapper at a fixed size, so a portrait
           photo rendered 305x290 instead of its own 305x466. Height follows the
           image now. */
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }