/* ============================================================
   Tarahestan public responsive hardening
   Loaded only by layouts.public and layouts.plain.
   Keep every rule scoped to body.public-responsive.
   ============================================================ */

body.public-responsive {
    --public-gutter: clamp(1rem, 3vw, 2rem);
    --public-safe-bottom: env(safe-area-inset-bottom, 0px);
    --public-safe-left: env(safe-area-inset-left, 0px);
    --public-safe-right: env(safe-area-inset-right, 0px);
    --public-control-size: 44px;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

html:has(body.public-responsive) {
    max-inline-size: 100%;
}

body.public-responsive.is-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.public-responsive .public-main,
body.public-responsive .public-main > *,
body.public-responsive :where(.flex, [class*="flex-"], .grid, [class*="grid-"]) > * {
    min-inline-size: 0;
}

body.public-responsive .public-main {
    inline-size: 100%;
    max-inline-size: 80rem;
}

body.public-responsive .public-main--full {
    max-inline-size: none;
}

body.public-responsive .public-main--plain {
    max-inline-size: 72rem;
}

body.public-responsive :where(img, video, canvas) {
    max-inline-size: 100%;
}

body.public-responsive :where(img, video) {
    block-size: auto;
}

body.public-responsive iframe {
    max-inline-size: 100%;
}

body.public-responsive :where(pre, code, samp, kbd) {
    max-inline-size: 100%;
}

body.public-responsive pre {
    overflow: auto;
    overscroll-behavior-inline: contain;
    white-space: pre-wrap;
    word-break: break-word;
}

body.public-responsive :where(.prose, .ql-editor, .content, .article-content, .nws-art-body, .art-body, .tr-art-body) {
    overflow-wrap: anywhere;
    word-break: normal;
}

body.public-responsive :where(.prose, .ql-editor, .content, .article-content, .nws-art-body, .art-body, .tr-art-body) :where(img, video, iframe, table, pre) {
    max-inline-size: 100%;
}

body.public-responsive .overflow-x-auto,
body.public-responsive .public-table-scroll {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

body.public-responsive :where(.overflow-x-auto, .public-table-scroll):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--gold, #9a7a45) 42%, transparent);
    outline-offset: 3px;
}

body.public-responsive :where(button, a, input, select, textarea):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--gold, #9a7a45) 42%, transparent);
    outline-offset: 2px;
}

body.public-responsive :where(button, [role="button"], a, input, select, textarea) {
    touch-action: manipulation;
}

body.public-responsive .page-breadcrumb {
    max-inline-size: 100%;
    padding-inline: var(--public-gutter);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    white-space: nowrap;
}

body.public-responsive .page-breadcrumb .bc-current {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Full-bleed inner heroes use main's width instead of scrollbar-sensitive 100vw. */
body.public-responsive.trn-ds-chrome:not(:has(.hero)) .public-main {
    max-inline-size: none;
}

body.public-responsive.trn-ds-chrome:not(:has(.hero)) :where(
    .eng-hero, .ads-hero, .lp-hero, .faq-hero, .terms-hero, .emp-hero,
    .partner-hero, .nws-masthead, .mag-masthead, .mag-stories-wrap,
    .tr-masthead, .kb-share-hero, .nws-art-hero, .art-hero,
    .tr-art-hero, .srv-show-hero, .page-hero
) {
    inline-size: 100%;
    max-inline-size: none;
    margin-inline: 0;
}

/* Clip decorative art where it is owned, never at page level. */
body.public-responsive :where(
    .hero, .ads-hero, .emp-hero, .partner-hero, .lp-hero, .eng-hero,
    .page-hero, .srv-show-hero, .ext-hero, .operations, .promo-slab
) {
    overflow-x: clip;
}

body.public-responsive :where(
    .ads-orb, .emp-orb, .partner-orb, .hero-orb, .hero-blob,
    .ext-hero-grid, .srv-hero-grid-bg
) {
    max-inline-size: 100%;
    pointer-events: none;
}

/* Shared chrome and overlays */
body.public-responsive .header-wrapper,
body.public-responsive .boxed-header,
body.public-responsive .top-bar-content {
    min-inline-size: 0;
    max-inline-size: 100%;
}

body.public-responsive :where(
    .search-overlay, .mobile-menu-overlay, .manifesto-overlay,
    .site-popup-stage, .art-lock-modal-overlay, .mag-story-modal,
    [data-edit-modal]
) {
    padding-block: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, var(--public-safe-bottom));
    padding-inline: max(0.75rem, var(--public-safe-left)) max(0.75rem, var(--public-safe-right));
}

body.public-responsive :where(
    .search-container, .manifesto-card, .site-popup-shell, .site-popup-card,
    .art-lock-modal-box, .mag-story-modal-inner, .qs-card, .qs-terms-card
) {
    max-inline-size: calc(100vw - 2rem);
    max-block-size: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - var(--public-safe-bottom));
}

body.public-responsive .mobile-menu-panel {
    block-size: 100dvh;
    max-block-size: 100dvh;
    padding-block-start: max(1.25rem, env(safe-area-inset-top, 0px));
    padding-block-end: max(1.25rem, var(--public-safe-bottom));
    overscroll-behavior: contain;
}

body.public-responsive :where(.search-results, .site-popup-body, .qs-terms-body) {
    overscroll-behavior: contain;
}

body.public-responsive .flash-toast-wrap {
    max-inline-size: calc(100vw - 1.5rem);
}

body.public-responsive .mobile-command-panel {
    right: max(0.75rem, var(--public-safe-right));
    left: max(0.75rem, var(--public-safe-left));
}

body.public-responsive #liveChatWidget,
body.public-responsive .back-to-top-container {
    max-inline-size: calc(100vw - 2rem);
}

body.public-responsive #chatWindow {
    max-inline-size: calc(100vw - 1.5rem) !important;
    max-block-size: calc(100dvh - 8rem - var(--public-safe-bottom)) !important;
}

body.public-responsive #chatMessages,
body.public-responsive #chatGuestForm {
    overscroll-behavior: contain;
}

body.public-responsive :where(#detail-modal, #buy-modal, #bundle-detail-modal) {
    padding:
        max(0.75rem, env(safe-area-inset-top, 0px))
        max(0.75rem, var(--public-safe-right))
        max(0.75rem, var(--public-safe-bottom))
        max(0.75rem, var(--public-safe-left)) !important;
}

body.public-responsive :where(.detail-box, .bdl-detail-box, #buy-modal > [tabindex="-1"]) {
    max-inline-size: min(100%, 38rem) !important;
    max-block-size: calc(100dvh - 1.5rem - env(safe-area-inset-top, 0px) - var(--public-safe-bottom)) !important;
    overscroll-behavior: contain;
}

body.public-responsive .footer-grid,
body.public-responsive .footer-extension-grid {
    min-inline-size: 0;
}

body.public-responsive :where(.footer-desc, .footer-contact-text, .footer-extension-copy, .site-popup-body-content, .cmt-body-text) {
    overflow-wrap: anywhere;
}

/* Shared page grids and cards */
body.public-responsive :where(
    .eng-grid, .extensions-grid, .tr-grid, .nws-grid, .hub-grid,
    .feat-grid, .fb-share-grid, .fb-group-grid, .kb-share-grid,
    .srv-duo-grid, .srv-info-grid, .mag-subfeat, .security-cards,
    .plans, .promo-duo
) {
    min-inline-size: 0;
}

body.public-responsive :where(
    .eng-grid, .extensions-grid, .tr-grid, .nws-grid,
    .hub-grid, .feat-grid, .kb-share-grid
) > * {
    min-inline-size: 0;
    max-inline-size: 100%;
}

body.public-responsive :where(.nws-card-title, .mag-card-title, .tr-card-title, .extension-title, .srv-title) {
    overflow-wrap: anywhere;
}

body.public-responsive :where(.nws-sidebar, .tr-sidebar, .art-sidebar, .tr-art-sidebar, .nws-art-sidebar) {
    scrollbar-gutter: stable;
}

body.public-responsive :where(.nws-art-body, .art-body, .tr-art-body) :where(table, iframe, pre),
body.public-responsive :where(.service-content, .extension-content) :where(table, iframe, pre) {
    display: block;
    max-inline-size: 100%;
    overflow-x: auto;
}

body.public-responsive :where(.r-btn, .cmt-vote-btn, .cmt-copy-link-btn, .cmt-reply-btn) {
    min-block-size: var(--public-control-size);
}

body.public-responsive :where(.art-lock-modal-box, .mag-story-modal-inner, [data-edit-modal] > .relative) {
    overscroll-behavior: contain;
}

/* Public shares, forms and viewers */
body.public-responsive :where(.fb-share-wrap, .kb-share-wrap, .docs-share-wrap, .excel-share-wrap) {
    inline-size: min(100%, 74rem);
    max-inline-size: 100%;
}

body.public-responsive :where(.fb-field, .fb-group, .kb-share-card, .docs-share-card, .excel-share-card) {
    min-inline-size: 0;
}

body.public-responsive :where(.upload-drop, input[type="file"] + label) {
    max-inline-size: 100%;
}

body.public-responsive :where(.docs-content, .excel-content, .sheet-container, .document-content, .board-content) {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

body.public-responsive :where(.docs-content, .document-content) :where(table, pre, iframe),
body.public-responsive :where(.excel-content, .sheet-container) table {
    max-inline-size: none;
}

/* Ads portal/analytics remain visually legacy but become operable on touch. */
body.public-responsive .tab-panel,
body.public-responsive .tab-panel > * {
    min-inline-size: 0;
}

body.public-responsive .overflow-x-auto > table {
    min-inline-size: 40rem;
}

body.public-responsive canvas[id*="AnalyticsChart"] {
    inline-size: 100% !important;
    max-inline-size: 100%;
}

/* Tablet: collapse desktop sidebars and bound interactive overlays. */
@media (max-width: 1024px) {
    body.public-responsive .public-main:not(.public-main--full) {
        padding-inline: var(--public-gutter);
    }

    body.public-responsive .header-wrapper {
        inline-size: 100%;
        padding-inline: var(--public-gutter);
    }

    body.public-responsive .boxed-header {
        margin-block: 0.75rem;
    }

    body.public-responsive :where(.nws-outer, .tr-outer, .nws-art-layout, .art-layout, .tr-art-layout) {
        flex-direction: column;
    }

    body.public-responsive :where(.nws-sidebar, .tr-sidebar, .art-sidebar, .tr-art-sidebar, .nws-art-sidebar) {
        position: static;
        order: 1;
        inline-size: 100%;
        min-inline-size: 0;
        max-block-size: none;
        overflow: visible;
    }

    body.public-responsive :where(.nws-hero-shell, .art-hero-shell) {
        grid-template-columns: 1fr;
    }

    body.public-responsive :where(.nws-hero-media, .art-hero-media) {
        order: -1;
        max-block-size: 22rem;
        aspect-ratio: 16 / 9;
    }

    body.public-responsive :where(.footer-grid, .footer-extension-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.public-responsive [data-edit-modal] > .relative {
        margin-block: 0;
        inline-size: min(100%, 48rem);
        max-block-size: calc(100dvh - 1.5rem - env(safe-area-inset-top, 0px) - var(--public-safe-bottom));
    }
}

/* Mobile/tablet navigation and page controls. */
@media (max-width: 768px) {
    body.public-responsive {
        --public-gutter: 1rem;
        padding-block-end: calc(5.75rem + var(--public-safe-bottom));
    }

    body.public-responsive .public-main:not(.public-main--full) {
        padding-inline: var(--public-gutter);
    }

    body.public-responsive .pre-header-icon {
        display: none;
    }

    body.public-responsive .boxed-header {
        inline-size: 100%;
        margin-block: 0.5rem;
        padding: 0.625rem;
    }

    body.public-responsive .header-logo {
        gap: 0.5rem;
    }

    body.public-responsive .header-logo-text {
        max-inline-size: min(42vw, 11rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1rem;
    }

    body.public-responsive :where(.header-search-btn, .mobile-menu-btn, .mobile-menu-close, .search-close-btn) {
        min-inline-size: var(--public-control-size);
        min-block-size: var(--public-control-size);
    }

    body.public-responsive .mobile-menu-panel {
        inline-size: min(88vw, 23rem);
        max-inline-size: calc(100vw - 2rem);
    }

    body.public-responsive .mobile-menu-nav a,
    body.public-responsive .mobile-menu-auth a {
        min-block-size: var(--public-control-size);
    }

    body.public-responsive .search-container {
        inline-size: calc(100% - 1rem);
    }

    body.public-responsive .search-box {
        padding: 1rem;
    }

    body.public-responsive .search-input-wrapper {
        gap: 0.5rem;
        padding-inline: 0.75rem;
    }

    body.public-responsive .search-input-wrapper input {
        min-inline-size: 0;
        font-size: 1rem;
    }

    body.public-responsive :where(.hero-actions, .eng-actions, .op-actions, .promo-foot, .ads-actions, .emp-actions, .partner-actions) {
        flex-wrap: wrap;
    }

    body.public-responsive :where(.nws-grid, .tr-grid, .extensions-grid, .hub-grid, .eng-grid, .feat-grid, .kb-share-grid) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.public-responsive .mag-subfeat-card {
        grid-template-columns: minmax(6.5rem, 36%) minmax(0, 1fr);
    }

    body.public-responsive :where(.hub-tabs, .category-tabs, .filter-tabs, .tabs, [role="tablist"]) {
        max-inline-size: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    body.public-responsive :where(.hub-tab, [role="tab"]) {
        min-block-size: var(--public-control-size);
        flex: 0 0 auto;
    }

    body.public-responsive :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
        min-block-size: var(--public-control-size);
        max-inline-size: 100%;
        font-size: 16px !important;
    }

    body.public-responsive :where(button, [role="button"], .btn, .eng-btn, .site-popup-action, .cmt-submit, .cmt-load-more) {
        min-block-size: var(--public-control-size);
    }

    body.public-responsive :where(.fb-share-grid, .fb-group-grid, .srv-duo-grid, .srv-info-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.public-responsive :where(.fb-field, .fb-group) {
        grid-column: 1 / -1 !important;
    }

    body.public-responsive :where(.site-popup-card, .site-popup-shell) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.public-responsive .site-popup-aside {
        min-block-size: auto;
    }

    body.public-responsive .site-popup-actions,
    body.public-responsive .site-popup-links {
        flex-direction: column;
        align-items: stretch;
    }

    body.public-responsive .site-popup-action,
    body.public-responsive .site-popup-link-chip {
        inline-size: 100%;
        justify-content: center;
    }

    body.public-responsive .cmt-form-footer,
    body.public-responsive .cmt-meta-top {
        align-items: stretch;
        flex-direction: column;
    }

    body.public-responsive .cmt-actions {
        margin-inline-start: 0;
        flex-wrap: wrap;
    }

    body.public-responsive .footer-grid,
    body.public-responsive .footer-extension-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.public-responsive .footer-brand-actions,
    body.public-responsive .footer-contact-actions,
    body.public-responsive .footer-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    body.public-responsive :where(.footer-offer-trigger, .footer-bale-cta, .btn-live-chat-trigger, .footer-catalog-cta) {
        min-block-size: var(--public-control-size);
        justify-content: center;
    }

    body.public-responsive .flash-toast-wrap {
        right: max(0.75rem, var(--public-safe-right));
        left: max(0.75rem, var(--public-safe-left));
        bottom: calc(6.5rem + var(--public-safe-bottom));
    }

    body.public-responsive .back-to-top-container,
    body.public-responsive #liveChatWidget {
        bottom: calc(6.5rem + var(--public-safe-bottom)) !important;
    }

    body.public-responsive #liveChatWidget {
        left: max(0.75rem, var(--public-safe-left)) !important;
    }

    body.public-responsive .back-to-top-container {
        right: max(0.75rem, var(--public-safe-right)) !important;
    }

    body.public-responsive #chatWindow {
        position: fixed !important;
        inset-inline: max(0.75rem, var(--public-safe-left)) max(0.75rem, var(--public-safe-right)) !important;
        inset-block-start: max(0.75rem, env(safe-area-inset-top, 0px)) !important;
        inset-block-end: calc(6.25rem + var(--public-safe-bottom)) !important;
        inline-size: auto !important;
        block-size: auto !important;
        max-inline-size: none !important;
        max-block-size: none !important;
    }

    body.public-responsive #chatForm {
        min-inline-size: 0;
    }

    body.public-responsive #chatInput {
        min-inline-size: 0;
    }

    body.public-responsive #chatForm > button[type="submit"] {
        flex: 0 0 auto;
        min-inline-size: var(--public-control-size);
        padding-inline: 0.875rem !important;
    }

    body.public-responsive #buy-modal > [tabindex="-1"] {
        inline-size: 100% !important;
        padding: 1.125rem !important;
    }

    body.public-responsive [data-edit-modal] {
        align-items: center;
        overflow: auto;
    }

    body.public-responsive [data-edit-modal] > .relative {
        inline-size: 100%;
        max-inline-size: 100%;
    }

    body.public-responsive [data-edit-modal] .p-6 {
        padding: 1rem;
    }

    body.public-responsive .overflow-x-auto > table {
        min-inline-size: 36rem;
    }
}

/* Narrow phones: remove remaining rigid card and action dimensions. */
@media (max-width: 640px) {
    body.public-responsive {
        --public-gutter: 0.875rem;
    }

    body.public-responsive :where(.ds-shell, .eng-shell) {
        inline-size: calc(100% - 1.75rem);
    }

    body.public-responsive :where(.hero-actions, .eng-actions, .op-actions, .ads-actions, .emp-actions, .partner-actions) {
        align-items: stretch;
        flex-direction: column;
    }

    body.public-responsive :where(.hero-actions, .eng-actions, .op-actions, .ads-actions, .emp-actions, .partner-actions) > :where(a, button) {
        inline-size: 100%;
        justify-content: center;
    }

    body.public-responsive .mag-subfeat-card {
        grid-template-columns: minmax(0, 1fr);
    }

    body.public-responsive :where(.mag-subfeat-img, .mag-subfeat-noimg) {
        min-block-size: 10rem;
    }

    body.public-responsive :where(.lp-cd-unit, .hero-stat, .quick-stat) {
        min-inline-size: 0;
    }

    body.public-responsive #lpCountdown {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        inline-size: 100%;
    }

    body.public-responsive .manifesto-card {
        inline-size: 100%;
        padding: 1.25rem;
        overflow-y: auto;
    }

    body.public-responsive .manifesto-stamp {
        inset-block-start: 0.75rem;
        inset-inline-start: 0.75rem;
        font-size: 0.8rem;
    }

    body.public-responsive .site-popup-shell,
    body.public-responsive .site-popup-card {
        inline-size: 100%;
        border-radius: 1rem;
    }

    body.public-responsive .site-popup-body,
    body.public-responsive .site-popup-aside {
        padding: 1rem;
    }

    body.public-responsive .cmt-item-head {
        align-items: flex-start;
    }

    body.public-responsive .cmt-meta-main,
    body.public-responsive .cmt-actions {
        gap: 0.5rem;
    }

    body.public-responsive .mobile-command-panel {
        gap: 0.25rem;
        padding: 0.5rem;
    }

    body.public-responsive .mobile-command-link {
        min-inline-size: 0;
        block-size: 3.25rem;
    }

    body.public-responsive .mobile-command-label {
        max-inline-size: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.625rem;
    }

    body.public-responsive .flash-toast {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 0.875rem;
    }

    body.public-responsive .overflow-x-auto > table {
        min-inline-size: 34rem;
    }
}

@media (max-width: 380px) {
    body.public-responsive .header-logo-text {
        display: none;
    }

    body.public-responsive .header-actions {
        gap: 0.125rem;
    }

    body.public-responsive :where(.header-search-btn, .mobile-menu-btn) {
        min-inline-size: 42px;
        inline-size: 42px;
    }

    body.public-responsive #lpCountdown {
        gap: 0.5rem;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    body.public-responsive :where(.search-container, .manifesto-card, .site-popup-shell, .site-popup-card, .qs-card, .qs-terms-card) {
        max-block-size: calc(100dvh - 1rem);
        overflow-y: auto;
    }

    body.public-responsive #chatWindow {
        inset-block-end: 0.75rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.public-responsive *,
    body.public-responsive *::before,
    body.public-responsive *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Family-specific contracts for the complex public templates. */
body.public-responsive :where(
    .ext-sticky-shell, .ext-anime-btns, .ext-anime-proof, .ext-detail-grid,
    .ext-wf-steps, .extensions-tabs, .tab-buttons, .ext-show-grid,
    .ext-show-hero-btns, .ext-show-hero-proof, .ext-show-compare,
    .srv-layout, .srv-hero-top, .srv-hero-stats, .srv-chip-row,
    .srv-bottom-cta-actions, .srv-info-strip, .public-share-page,
    .public-share-header, .public-share-layout, .public-share-actions,
    .mag-filters, .mag-stories-track, .mag-stats, .mag-article-foot,
    .art-actions, .art-reactions, .art-share-btns, .nws-actions,
    .nws-reactions, .nws-share-btns, .tr-actions, .tr-reactions,
    .tr-share-btns, .hero-stats, .avatar-cloud, .role-chips,
    .skill-grid, .topics-grid, .form-actions, .slot-costs,
    .slot-footer, .cta-banner, .how-timeline
) {
    min-inline-size: 0;
    max-inline-size: 100%;
}

body.public-responsive :where(.mag-filters, .mag-stories-track, .ext-sticky-nav, .extensions-tabs, .tab-buttons) {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

body.public-responsive :where(.art-body-card, .nws-body-card, .tr-body-card, .srv-full-content) {
    max-inline-size: 100%;
    overflow-wrap: anywhere;
}

body.public-responsive :where(.skill-modal-card, .srv-modal-box) {
    max-inline-size: calc(100vw - 2rem);
    max-block-size: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - var(--public-safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 1024px) {
    body.public-responsive :where(.ext-detail-grid, .ext-show-grid, .srv-layout, .topics-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.public-responsive :where(.srv-price-card, .srv-sidebar, .srv-layout > aside) {
        position: static !important;
        inline-size: 100% !important;
        max-block-size: none !important;
    }

    body.public-responsive .public-share-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 768px) {
    body.public-responsive :where(.ext-sticky-nav, .extensions-tabs, .tab-buttons, .mag-filters, .mag-stories-track) {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        max-inline-size: 100%;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    body.public-responsive :where(.ext-nav-chip, .tab-btn, .mag-ftab, .mag-story-bubble) {
        flex: 0 0 auto;
        min-block-size: var(--public-control-size);
    }

    body.public-responsive :where(.ext-anime-btns, .ext-show-hero-btns, .srv-bottom-cta-actions, .public-share-actions) {
        align-items: stretch;
        flex-direction: column;
    }

    body.public-responsive :where(.ext-anime-btns, .ext-show-hero-btns, .srv-bottom-cta-actions, .public-share-actions) > :where(a, button, form) {
        inline-size: 100%;
        max-inline-size: 100%;
    }

    body.public-responsive .public-share-actions :where(a, button),
    body.public-responsive :where(#docDownloadDocxBtn, #docDownloadPdfBtn, #docPrintBtn, #docEditOnlineBtn, #excelEditOnlineBtn) {
        inline-size: 100% !important;
        min-inline-size: 0 !important;
        justify-content: center;
    }

    body.public-responsive .public-share-stats {
        min-inline-size: 0 !important;
        inline-size: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.public-responsive .public-share-layout {
        padding: 1rem;
    }

    body.public-responsive :where(.ext-detail-grid, .ext-wf-steps, .ext-show-grid, .skill-grid, .topics-grid, .hero-stats) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.public-responsive :where(.ext-anime-proof, .ext-show-hero-proof, .srv-hero-stats, .srv-chip-row, .avatar-cloud, .role-chips, .slot-costs) {
        flex-wrap: wrap;
    }

    body.public-responsive :where(.ext-show-compare-head, .ext-show-compare-row) {
        grid-template-columns: minmax(7rem, 1fr) repeat(2, minmax(5.5rem, 0.8fr));
        min-inline-size: 26rem;
    }

    body.public-responsive .ext-show-compare {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    body.public-responsive :where(.srv-hero-top, .srv-info-head, .srv-bottom-cta-body, .slot-footer, .cta-banner, .form-actions) {
        align-items: stretch;
        flex-direction: column;
    }

    body.public-responsive :where(.srv-hero-cta, .srv-bottom-cta-actions, .form-actions) > :where(a, button) {
        inline-size: 100%;
        justify-content: center;
    }

    body.public-responsive :where(.srv-modal-bg, .skill-modal) {
        padding: max(0.75rem, env(safe-area-inset-top, 0px)) 0.75rem max(0.75rem, var(--public-safe-bottom));
    }

    body.public-responsive :where(.srv-modal-box, .skill-modal-card) {
        inline-size: 100%;
        max-inline-size: 100%;
    }

    body.public-responsive :where(.art-actions, .art-reactions, .art-share-btns, .nws-actions, .nws-reactions, .nws-share-btns, .tr-actions, .tr-reactions, .tr-share-btns) {
        flex-wrap: wrap;
    }

    body.public-responsive :where(.art-rxn-btn, .nws-rxn-btn, .tr-rxn-btn, .art-share-btn, .nws-share-btn, .tr-share-btn) {
        min-block-size: var(--public-control-size);
    }

    body.public-responsive :where(.mag-stats, .nws-mast-stats, .tr-mast-stats) {
        inline-size: 100%;
        flex-wrap: wrap;
    }

    body.public-responsive :where(.mag-story-modal-inner, .art-lock-modal-box) {
        max-block-size: calc(100dvh - 1.5rem - env(safe-area-inset-top, 0px) - var(--public-safe-bottom));
    }

    body.public-responsive .mag-story-media {
        min-block-size: min(55dvh, 22rem);
    }

    body.public-responsive :where(.art-lock-bundle-plans, .art-lock-bundle-stats) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.public-responsive :where(.agree-label, .upload-drop) {
        align-items: flex-start;
    }

    body.public-responsive :where(.ads-title, .emp-title, .partner-hero .hero-title, .srv-show-title, .ext-show-hero-title) {
        overflow-wrap: anywhere;
    }

    body.public-responsive :where(.ads-hero, .emp-hero, .partner-hero) :where(.hero-shape, .hero-orb, .emp-hero-orb) {
        transform: scale(0.72);
        transform-origin: center;
    }
}

@media (max-width: 640px) {
    body.public-responsive .public-share-header > .flex {
        align-items: flex-start;
    }

    body.public-responsive .public-share-stats {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.public-responsive :where(.srv-hero-stats, .hero-stats) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        inline-size: 100%;
    }

    body.public-responsive :where(.srv-hero-stat, .hero-stat) {
        inline-size: auto;
        min-inline-size: 0;
    }

    body.public-responsive :where(.mag-article-foot, .slot-footer) {
        align-items: flex-start;
        flex-direction: column;
    }

    body.public-responsive :where(.art-actions, .nws-actions, .tr-actions) > :where(a, button) {
        flex: 1 1 auto;
    }
}

@media print {
    body.public-responsive {
        padding: 0 !important;
    }

    body.public-responsive :where(.sticky-header, .mobile-command-panel, #liveChatWidget, .back-to-top-container, .site-popup-stage) {
        display: none !important;
    }

    body.public-responsive .public-main {
        max-inline-size: none;
        padding: 0 !important;
    }
}