/* ============================================
   PAGE RESPONSIVE ADAPTERS
   Final responsive safety layer for page-specific layouts.
   Loaded last so dense pages collapse without losing their local design.
   ============================================ */

html,
body {
    max-width: 100%;
}

html[data-theme] body[class^="page-"],
html[data-theme] body[class*=" page-"],
body.ticket-intake,
body.mindmap-page-body {
    overflow-x: clip;
}

body[class^="page-"] *,
body[class^="page-"] *::before,
body[class^="page-"] *::after,
body[class*=" page-"] *,
body[class*=" page-"] *::before,
body[class*=" page-"] *::after,
body.ticket-intake *,
body.ticket-intake *::before,
body.ticket-intake *::after,
body.mindmap-page-body *,
body.mindmap-page-body *::before,
body.mindmap-page-body *::after {
    min-width: 0;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

body[class^="page-"] :where(.app-shell, .app-container, .app-content, main, .main-content, .content, .page-content),
body[class*=" page-"] :where(.app-shell, .app-container, .app-content, main, .main-content, .content, .page-content) {
    max-width: 100%;
    min-width: 0;
}

body[class^="page-"] :where(table),
body[class*=" page-"] :where(table) {
    max-width: 100%;
}

body[class^="page-"] :where(pre, code, .wfgen-pre, .cmx-code, .code-section pre, .markdown-body pre),
body[class*=" page-"] :where(pre, code, .wfgen-pre, .cmx-code, .code-section pre, .markdown-body pre) {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 1280px) {
    body[class^="page-"] :where(.app-content),
    body[class*=" page-"] :where(.app-content) {
        padding-left: clamp(0.75rem, 2vw, 1.25rem);
        padding-right: clamp(0.75rem, 2vw, 1.25rem);
    }

    body:is(.page-projects-index, .page-projects-details, .page-projects-bugs, .page-projects-kanban, .page-projects-tickets) :where(
        .projects-grid,
        .project-grid,
        .bugs-grid,
        .external-ticket-grid,
        .ticket-link-grid
    ) {
        grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
    }

    body:is(.page-dbwizard) :where(.split-layout, .db-wizard-layout, .ssms-layout) {
        grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr) !important;
    }

    body:is(.page-thevault, .page-projects-vault, .mindmap-page-body) :where(
        .vault-workspace-shell,
        .vault-workspace-layout
    ) {
        grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr) !important;
    }
}

@media (max-width: 1080px) {
    body[class^="page-"] :where(
        .dashboard-hero,
        .page-header,
        .perf-page-header,
        .messages-hero,
        .gh-hero,
        .vault-hero,
        .mj-hero,
        .leave-hero,
        .es-hero
    ),
    body[class*=" page-"] :where(
        .dashboard-hero,
        .page-header,
        .perf-page-header,
        .messages-hero,
        .gh-hero,
        .vault-hero,
        .mj-hero,
        .leave-hero,
        .es-hero
    ) {
        padding: clamp(1.1rem, 3vw, 1.75rem) !important;
    }

    body[class^="page-"] :where(
        .hero-row,
        .gh-hero__inner,
        .gh-repoTop__header,
        .perf-d-flex.perf-justify-between,
        .leave-hero,
        .messages-hero,
        .vault-hero,
        .mj-hero,
        .external-ticket-hub__head
    ),
    body[class*=" page-"] :where(
        .hero-row,
        .gh-hero__inner,
        .gh-repoTop__header,
        .perf-d-flex.perf-justify-between,
        .leave-hero,
        .messages-hero,
        .vault-hero,
        .mj-hero,
        .external-ticket-hub__head
    ) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    body:is(.page-messages-index, .page-chat, .page-chatagents) :where(.messages-layout, .messages-page .messages-layout, .chat-layout) {
        grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) !important;
    }

    body:is(.page-settings-index) :where(.settings-layout) {
        grid-template-columns: 220px minmax(0, 1fr) !important;
    }

    body:is(.page-dbwizard) :where(
        .split-layout,
        .db-wizard-layout,
        .ssms-layout,
        .results-columns-container
    ) {
        grid-template-columns: 1fr !important;
    }

    body:is(.page-dbwizard) :where(
        .split-pane-left,
        .split-pane-right,
        .properties-panel,
        .query-panel,
        .results-panel,
        .column-details-panel,
        .results-section,
        .column-inspector-section
    ) {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body:is(.page-dbwizard) :where(.vertical-resizer, .horizontal-resizer) {
        display: none !important;
    }

    body:is(.page-thevault, .page-projects-vault, .mindmap-page-body) :where(
        .vault-workspace-shell,
        .vault-workspace-layout,
        .vault-shell,
        .vault-workspace-grid
    ) {
        grid-template-columns: 1fr !important;
    }

    body:is(.page-thevault, .page-projects-vault, .mindmap-page-body) :where(
        .vault-workspace-inspector,
        .vault-workspace-sidebar
    ) {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        min-height: auto !important;
    }
}

@media (max-width: 900px) {
    body[class^="page-"] :where(
        .grid-2,
        .grid-3,
        .grid-4,
        .form-grid,
        .form-row,
        .wfgen-grid-2,
        .wfgen-grid-3,
        .perf-row,
        .ticket-inbox-summary,
        .ticket-filter-form,
        .ticket-link-grid,
        .external-ticket-grid,
        .project-modal-grid,
        .project-form-grid,
        .vault-form-grid,
        .vault-stats,
        .vault-project-grid,
        .vault-entry-grid,
        .vault-category-grid,
        .mj-grid,
        .builder-grid,
        .theme-grid
    ),
    body[class*=" page-"] :where(
        .grid-2,
        .grid-3,
        .grid-4,
        .form-grid,
        .form-row,
        .wfgen-grid-2,
        .wfgen-grid-3,
        .perf-row,
        .ticket-inbox-summary,
        .ticket-filter-form,
        .ticket-link-grid,
        .external-ticket-grid,
        .project-modal-grid,
        .project-form-grid,
        .vault-form-grid,
        .vault-stats,
        .vault-project-grid,
        .vault-entry-grid,
        .vault-category-grid,
        .mj-grid,
        .builder-grid,
        .theme-grid
    ) {
        grid-template-columns: 1fr !important;
    }

    body:is(.page-projects-bugs) :where(.bugs-page-surface.has-bug-panel .bugs-main-shell) {
        padding-right: 0 !important;
    }

    body:is(.page-projects-bugs) :where(.bug-detail-panel, .bdp) {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: min(78vh, calc(100vh - 76px)) !important;
        border-radius: 22px 22px 0 0 !important;
        overflow: hidden !important;
    }

    body:is(.page-projects-bugs) :where(.bdp__body) {
        max-height: calc(78vh - 112px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body:is(.page-projects-kanban) :where(.kanban-board, .kanban, .kanban-columns) {
        display: flex !important;
        gap: 1rem !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity;
        padding-bottom: 0.75rem !important;
        -webkit-overflow-scrolling: touch;
    }

    body:is(.page-projects-kanban) :where(.kanban-col, .kanban-column) {
        flex: 0 0 min(82vw, 360px) !important;
        width: min(82vw, 360px) !important;
        scroll-snap-align: start;
    }

    body:is(.page-messages-index, .page-chat, .page-chatagents) :where(.messages-layout, .messages-page .messages-layout, .chat-layout) {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: 0 !important;
    }

    body:is(.page-messages-index, .page-chat, .page-chatagents) :where(.messages-sidebar, .chat-sidebar) {
        max-height: 280px !important;
        height: auto !important;
        overflow-y: auto !important;
        border-right: 0 !important;
    }

    body:is(.page-messages-index, .page-chat, .page-chatagents) :where(.messages-main, .chat-main) {
        height: min(680px, calc(100vh - 260px)) !important;
        min-height: 420px !important;
    }

    body:is(.page-settings-index) :where(.settings-container) {
        height: auto !important;
        min-height: calc(100vh - 72px);
    }

    body:is(.page-settings-index) :where(.settings-layout) {
        grid-template-columns: 1fr !important;
        overflow: visible !important;
    }

    body:is(.page-settings-index) :where(.settings-sidebar) {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding: 0.75rem !important;
        gap: 0.5rem !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--page-border, var(--border-light)) !important;
        -webkit-overflow-scrolling: touch;
    }

    body:is(.page-settings-index) :where(.settings-sidebar .nav-item) {
        flex: 0 0 auto !important;
        width: auto !important;
        white-space: nowrap !important;
    }

    body:is(.page-settings-index) :where(.settings-content) {
        overflow: visible !important;
        padding: 1rem !important;
    }

    body:is(.page-github, .page-githubnew, .page-githubold, .page-github-workflowgenerator, .page-github-triggerworkflow, .page-codemanagement) :where(
        .gh-shell,
        .gh-grid2,
        .metrics-grid,
        .cmx-layout,
        .cmx-metrics-bar,
        .cmx-repo-header,
        .workflow-type-panel__grid
    ) {
        grid-template-columns: 1fr !important;
    }

    body:is(.page-github, .page-githubnew, .page-githubold) :where(.repo-list) {
        max-height: 320px !important;
    }
}

@media (max-width: 768px) {
    body[class^="page-"] :where(
        h1,
        .page-title,
        .perf-page-header-title,
        .gh-hero__title,
        .projects-hero h1,
        .messages-hero h1,
        .vault-hero h1,
        .mj-hero h1
    ),
    body[class*=" page-"] :where(
        h1,
        .page-title,
        .perf-page-header-title,
        .gh-hero__title,
        .projects-hero h1,
        .messages-hero h1,
        .vault-hero h1,
        .mj-hero h1
    ) {
        font-size: clamp(1.45rem, 8vw, 2.15rem) !important;
        line-height: 1.08 !important;
    }

    body[class^="page-"] :where(
        .hero-actions,
        .page-actions,
        .gh-repoTop__actions,
        .project-actions,
        .modal-actions,
        .perf-modal-footer,
        .chat-header-actions,
        .ticket-link-card__actions,
        .external-ticket-card__actions,
        .vault-form-actions,
        .builder-actions
    ),
    body[class*=" page-"] :where(
        .hero-actions,
        .page-actions,
        .gh-repoTop__actions,
        .project-actions,
        .modal-actions,
        .perf-modal-footer,
        .chat-header-actions,
        .ticket-link-card__actions,
        .external-ticket-card__actions,
        .vault-form-actions,
        .builder-actions
    ) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 0.6rem !important;
        width: 100%;
    }

    body[class^="page-"] :where(
        .hero-actions > *,
        .page-actions > *,
        .modal-actions > *,
        .perf-modal-footer > *,
        .vault-form-actions > *,
        .builder-actions > *
    ),
    body[class*=" page-"] :where(
        .hero-actions > *,
        .page-actions > *,
        .modal-actions > *,
        .perf-modal-footer > *,
        .vault-form-actions > *,
        .builder-actions > *
    ) {
        flex: 1 1 min(190px, 100%);
        justify-content: center;
    }

    body[class^="page-"] :where(
        .toolbar,
        .filter-bar,
        .actions-bar,
        .projects-filter-bar,
        .kanban-toolbar,
        .wfgen-artifact-toolbar,
        .gh-repo-search,
        .ticket-control-panel,
        .ticket-assignment-form,
        .vault-workspace-toolbar,
        .mj-draw-toolbar
    ),
    body[class*=" page-"] :where(
        .toolbar,
        .filter-bar,
        .actions-bar,
        .projects-filter-bar,
        .kanban-toolbar,
        .wfgen-artifact-toolbar,
        .gh-repo-search,
        .ticket-control-panel,
        .ticket-assignment-form,
        .vault-workspace-toolbar,
        .mj-draw-toolbar
    ) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    body[class^="page-"] :where(
        .toolbar > *,
        .filter-bar > *,
        .actions-bar > *,
        .projects-filter-bar > *,
        .kanban-toolbar > *,
        .gh-repo-search > *,
        .ticket-control-panel > *,
        .ticket-assignment-form > *
    ),
    body[class*=" page-"] :where(
        .toolbar > *,
        .filter-bar > *,
        .actions-bar > *,
        .projects-filter-bar > *,
        .kanban-toolbar > *,
        .gh-repo-search > *,
        .ticket-control-panel > *,
        .ticket-assignment-form > *
    ) {
        flex: 1 1 min(220px, 100%) !important;
    }

    body[class^="page-"] :where(
        .table-container,
        .table-responsive,
        .table-wrapper,
        .data-table-wrap,
        .workflow-runs-table,
        .secret-table,
        .users-table,
        .ticket-inbox-list,
        .external-ticket-recent__list,
        .repo-list,
        .results-content
    ),
    body[class*=" page-"] :where(
        .table-container,
        .table-responsive,
        .table-wrapper,
        .data-table-wrap,
        .workflow-runs-table,
        .secret-table,
        .users-table,
        .ticket-inbox-list,
        .external-ticket-recent__list,
        .repo-list,
        .results-content
    ) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body[class^="page-"] :where(.data-table, .users-table, .secret-table, .table, table),
    body[class*=" page-"] :where(.data-table, .users-table, .secret-table, .table, table) {
        min-width: 560px;
    }

    body:is(.page-projects-tickets) :where(.ticket-inbox-card, .external-ticket-row) {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    body:is(.page-projects-tickets) :where(.ticket-assignment-panel) {
        width: 100% !important;
        max-width: none !important;
    }

    body:is(.page-projects-index, .page-projects-details, .page-projects-bugs, .page-projects-kanban, .page-projects-tickets) :where(
        .project-card,
        .bcard,
        .kanban-card,
        .ticket-inbox-card,
        .external-ticket-card,
        .modal-box
    ) {
        border-radius: min(var(--page-radius, 18px), 16px) !important;
    }

    body:is(.page-projects-bugs) :where(.bugs-stats-bar) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
    }

    body:is(.page-projects-bugs) :where(.bstat-div, .stat-divider) {
        display: none !important;
    }

    body:is(.page-performance-dashboard, .page-index, .page-resources-capacity, .page-recognition-wall, .page-recognition-managebadges) :where(
        .perf-col-3,
        .perf-col-4,
        .perf-col-6,
        .perf-col-8,
        .perf-col-12
    ) {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body:is(.page-thevault, .page-projects-vault) :where(
        .vault-workspace-screen,
        .vault-screen,
        .vault-page
    ) {
        padding: 0.75rem !important;
    }

    body:is(.page-thevault, .page-projects-vault, .mindmap-page-body) :where(.vault-workspace-shell) {
        min-height: auto !important;
        height: auto !important;
    }

    body:is(.page-dbwizard) :where(.ssms-tab, .ssms-table-card, .results-section, .query-panel) {
        min-width: 0 !important;
    }

    body:is(.page-dbwizard) :where(.table-row, .column-row) {
        grid-template-columns: 1fr !important;
    }

    .temp-theme-switcher {
        max-width: calc(100vw - 1rem) !important;
        right: 0.5rem !important;
    }
}

@media (max-width: 640px) {
    body[class^="page-"] :where(
        .app-content,
        .settings-content,
        .perf-dashboard-wrapper,
        .kanban-root,
        .github,
        .cmx,
        .messages-page,
        .mj-shell,
        .vault-shell,
        .vault-page
    ),
    body[class*=" page-"] :where(
        .app-content,
        .settings-content,
        .perf-dashboard-wrapper,
        .kanban-root,
        .github,
        .cmx,
        .messages-page,
        .mj-shell,
        .vault-shell,
        .vault-page
    ) {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    body[class^="page-"] :where(
        .card,
        .perf-card,
        .project-section,
        .project-card,
        .bcard,
        .kanban-card,
        .gh-sidebar__card,
        .content-card,
        .metric-card,
        .cmx-sidebar,
        .cmx-repo-header,
        .messages-sidebar,
        .messages-main,
        .chat-sidebar,
        .chat-main,
        .settings-content .card,
        .vault-card,
        .vault-entry-card,
        .mj-task-card,
        .mj-composer,
        .ticket-inbox-card,
        .external-ticket-card
    ),
    body[class*=" page-"] :where(
        .card,
        .perf-card,
        .project-section,
        .project-card,
        .bcard,
        .kanban-card,
        .gh-sidebar__card,
        .content-card,
        .metric-card,
        .cmx-sidebar,
        .cmx-repo-header,
        .messages-sidebar,
        .messages-main,
        .chat-sidebar,
        .chat-main,
        .settings-content .card,
        .vault-card,
        .vault-entry-card,
        .mj-task-card,
        .mj-composer,
        .ticket-inbox-card,
        .external-ticket-card
    ) {
        padding: 1rem !important;
    }

    body[class^="page-"] :where(
        button,
        .btn,
        .button,
        .perf-btn,
        .project-btn,
        .gh-btn,
        .action-link,
        .icon-btn,
        .btn-icon,
        .chat-send-button,
        .new-chat-btn,
        .vault-btn,
        .mj-save-btn,
        .ticket-submit
    ),
    body[class*=" page-"] :where(
        button,
        .btn,
        .button,
        .perf-btn,
        .project-btn,
        .gh-btn,
        .action-link,
        .icon-btn,
        .btn-icon,
        .chat-send-button,
        .new-chat-btn,
        .vault-btn,
        .mj-save-btn,
        .ticket-submit
    ) {
        min-height: 44px;
    }

    body[class^="page-"] :where(
        .modal,
        dialog.modal,
        .modal-box,
        .modal-container,
        .modal-content,
        .perf-modal-container,
        .cmx-modal__panel,
        .vault-modal__dialog,
        .codebase-scope-modal-content
    ),
    body[class*=" page-"] :where(
        .modal,
        dialog.modal,
        .modal-box,
        .modal-container,
        .modal-content,
        .perf-modal-container,
        .cmx-modal__panel,
        .vault-modal__dialog,
        .codebase-scope-modal-content
    ) {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100dvh - 1rem) !important;
        border-radius: 18px !important;
        margin: 0.5rem !important;
        overflow-y: auto !important;
    }

    body:is(.page-messages-index, .page-chat, .page-chatagents) :where(.messages-main, .chat-main) {
        min-height: 360px !important;
        height: min(620px, calc(100dvh - 230px)) !important;
    }

    body:is(.page-messages-index, .page-chat, .page-chatagents) :where(.msg-bubble, .message-text, .message-content) {
        max-width: 92vw !important;
    }

    body:is(.page-github-workflowgenerator, .page-github-triggerworkflow) :where(.pipeline-steps) {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    body:is(.page-github-workflowgenerator, .page-github-triggerworkflow) :where(.pipeline-arrow) {
        display: none !important;
    }

    body:is(.page-dbwizard) :where(.modal-dialog) {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
    }

    body:is(.page-settings-index) :where(.theme-grid) {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    body[class^="page-"] :where(
        .hero-actions > *,
        .page-actions > *,
        .modal-actions > *,
        .perf-modal-footer > *,
        .project-btn,
        .perf-btn,
        .gh-btn,
        .vault-btn,
        .action-link,
        .btn
    ),
    body[class*=" page-"] :where(
        .hero-actions > *,
        .page-actions > *,
        .modal-actions > *,
        .perf-modal-footer > *,
        .project-btn,
        .perf-btn,
        .gh-btn,
        .vault-btn,
        .action-link,
        .btn
    ) {
        width: 100%;
        flex-basis: 100%;
    }

    body[class^="page-"] :where(input, select, textarea, .form-control, .form-select),
    body[class*=" page-"] :where(input, select, textarea, .form-control, .form-select) {
        width: 100% !important;
    }

    body:is(.page-projects-bugs) :where(.bugs-stats-bar) {
        grid-template-columns: 1fr !important;
    }

    body:is(.page-projects-bugs) :where(.bdp__status-grid, .bdp__meta) {
        grid-template-columns: 1fr !important;
    }

    body:is(.page-projects-kanban) :where(.kanban-col, .kanban-column) {
        flex-basis: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
    }

    body:is(.page-messages-index, .page-chat, .page-chatagents) :where(.messages-sidebar, .chat-sidebar) {
        max-height: 220px !important;
    }

    body:is(.page-messages-index, .page-chat, .page-chatagents) :where(.chat-input-wrapper, .input-wrapper) {
        gap: 0.5rem !important;
    }

    body:is(.page-messages-index, .page-chat, .page-chatagents) :where(.chat-send-button, .send-btn) {
        flex: 0 0 44px !important;
        width: 44px !important;
        padding: 0 !important;
    }

    body:is(.page-settings-index) :where(.theme-grid) {
        grid-template-columns: 1fr 1fr !important;
    }

    body:is(.page-thevault, .page-projects-vault) :where(.vault-entry-card__meta, .vault-project-card__header, .vault-secret-row) {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .temp-theme-switcher {
        left: 0.5rem !important;
        right: 0.5rem !important;
        justify-content: space-between !important;
        width: auto !important;
    }

    .temp-theme-switcher__select {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
}

@media (max-width: 420px) {
    body[class^="page-"] :where(
        .app-content,
        .settings-content,
        .perf-dashboard-wrapper,
        .kanban-root,
        .github,
        .cmx,
        .messages-page,
        .mj-shell,
        .vault-page
    ),
    body[class*=" page-"] :where(
        .app-content,
        .settings-content,
        .perf-dashboard-wrapper,
        .kanban-root,
        .github,
        .cmx,
        .messages-page,
        .mj-shell,
        .vault-page
    ) {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    body[class^="page-"] :where(.data-table, .users-table, .secret-table, .table, table),
    body[class*=" page-"] :where(.data-table, .users-table, .secret-table, .table, table) {
        min-width: 480px;
    }

    body:is(.page-settings-index) :where(.theme-grid) {
        grid-template-columns: 1fr !important;
    }

    body:is(.page-projects-bugs) :where(.bug-detail-panel, .bdp) {
        height: min(84dvh, calc(100dvh - 56px)) !important;
    }
}

/* Standalone auth pages */
body.auth-responsive {
    overflow-x: clip;
}

body.auth-responsive .login-shell {
    width: min(100%, 980px);
}

body.auth-responsive .login-brand img {
    width: clamp(96px, 32vw, 320px) !important;
    height: clamp(96px, 32vw, 320px) !important;
}

@media (max-width: 900px) {
    body.auth-responsive .login-shell {
        grid-template-columns: 1fr !important;
        max-width: min(520px, calc(100vw - 2rem)) !important;
        min-height: auto !important;
        margin: 1rem auto !important;
    }

    body.auth-responsive .login-welcome {
        text-align: center;
        padding: 1.5rem 1.25rem 0 !important;
    }

    body.auth-responsive .login-card {
        padding: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    body.auth-responsive {
        display: block;
        min-height: 100dvh;
    }

    body.auth-responsive .login-shell {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 100dvh !important;
    }

    body.auth-responsive .login-welcome {
        padding: 1rem 1rem 0 !important;
    }

    body.auth-responsive .login-hero-text {
        font-size: clamp(1.65rem, 10vw, 2.2rem) !important;
    }

    body.auth-responsive .login-card {
        padding: 1.25rem 1rem 1.5rem !important;
        border-radius: 18px 18px 0 0 !important;
    }

    body.auth-responsive .shape {
        opacity: 0.35;
    }
}

body.admin-create-responsive {
    padding: 1rem;
    overflow-x: clip;
}

body.admin-create-responsive .card {
    max-width: min(400px, calc(100vw - 2rem)) !important;
}

@media (max-width: 480px) {
    body.admin-create-responsive {
        place-items: start stretch !important;
        padding: 0.75rem !important;
    }

    body.admin-create-responsive .card {
        padding: 1.25rem !important;
        border-radius: 14px !important;
    }
}

/* Standalone external ticket intake */
@media (max-width: 900px) {
    body.ticket-intake :where(.ticket-workspace, .ticket-intro, .ticket-form-grid, .ticket-form__foot) {
        grid-template-columns: 1fr !important;
    }

    body.ticket-intake :where(.platform-topbar) {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    body.ticket-intake :where(.ticket-type-group) {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 560px) {
    body.ticket-intake :where(.ticket-page-shell, .ticket-workspace) {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    body.ticket-intake :where(.ticket-form, .ticket-intro__panel, .ticket-success, .ticket-errors) {
        padding: 1rem !important;
        border-radius: 16px !important;
    }

    body.ticket-intake :where(.ticket-submit, .ticket-success__again) {
        width: 100%;
        justify-content: center;
    }
}

/* Fixed top navigation is not a page content grid. Keep it out of the broad
   responsive safety rules above so the pill never wraps, crushes, or bleeds. */
body[class^="page-"] :where(.pill-nav, .pill-nav *),
body[class*=" page-"] :where(.pill-nav, .pill-nav *),
body[class^="page-"] :where(.pill-nav-sidebar, .pill-nav-sidebar *),
body[class*=" page-"] :where(.pill-nav-sidebar, .pill-nav-sidebar *) {
    min-width: initial;
}

body[class^="page-"] .pill-nav,
body[class*=" page-"] .pill-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: max-content !important;
    max-width: calc(100vw - 1rem) !important;
    overflow: visible !important;
}

body[class^="page-"] :where(.pill-nav__brand, .pill-nav__items, .pill-nav__actions),
body[class*=" page-"] :where(.pill-nav__brand, .pill-nav__items, .pill-nav__actions) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

body[class^="page-"] :where(.pill-nav__brand, .pill-nav__actions, .pill-nav__dropdown, .pill-nav__notif-bell, .pill-nav__logo, .pill-nav__item),
body[class*=" page-"] :where(.pill-nav__brand, .pill-nav__actions, .pill-nav__dropdown, .pill-nav__notif-bell, .pill-nav__logo, .pill-nav__item) {
    flex: 0 0 auto !important;
}

body[class^="page-"] :where(.pill-nav__items),
body[class*=" page-"] :where(.pill-nav__items) {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
}

body[class^="page-"] :where(.pill-nav__item),
body[class*=" page-"] :where(.pill-nav__item) {
    height: 2.35rem;
    justify-content: center;
    line-height: 1;
}

body[class^="page-"] :where(.pill-nav__item span, .pill-nav__logo-text, .pill-nav__user-name),
body[class*=" page-"] :where(.pill-nav__item span, .pill-nav__logo-text, .pill-nav__user-name) {
    white-space: nowrap !important;
}

body[class^="page-"] :where(.pill-nav-sidebar),
body[class*=" page-"] :where(.pill-nav-sidebar) {
    z-index: 2147483100 !important;
}

body[class^="page-"] :where(.pill-nav-overlay),
body[class*=" page-"] :where(.pill-nav-overlay) {
    z-index: 2147483000 !important;
}

@media (max-width: 1535px) and (min-width: 1181px) {
    body[class^="page-"] .pill-nav,
    body[class*=" page-"] .pill-nav {
        gap: 0.2rem !important;
        padding: 0.45rem 0.75rem !important;
    }

    body[class^="page-"] :where(.pill-nav__items .pill-nav__item > span),
    body[class*=" page-"] :where(.pill-nav__items .pill-nav__item > span) {
        display: none !important;
    }

    body[class^="page-"] :where(.pill-nav__item),
    body[class*=" page-"] :where(.pill-nav__item) {
        width: 2.35rem;
        padding: 0 !important;
        gap: 0 !important;
    }

    body[class^="page-"] :where(.pill-nav__items .pill-nav__item i),
    body[class*=" page-"] :where(.pill-nav__items .pill-nav__item i) {
        margin: 0 !important;
    }

    body[class^="page-"] :where(.pill-nav__logo-img),
    body[class*=" page-"] :where(.pill-nav__logo-img) {
        width: 40px !important;
        height: 40px !important;
    }
}

@media (max-width: 1180px) and (min-width: 1001px) {
    body[class^="page-"] .pill-nav,
    body[class*=" page-"] .pill-nav {
        gap: 0.15rem !important;
        padding: 0.45rem 0.625rem !important;
    }

    body[class^="page-"] :where(.pill-nav__items .pill-nav__item > span, .pill-nav__logo-text, .pill-nav__user-name),
    body[class*=" page-"] :where(.pill-nav__items .pill-nav__item > span, .pill-nav__logo-text, .pill-nav__user-name) {
        display: none !important;
    }

    body[class^="page-"] :where(.pill-nav__brand),
    body[class*=" page-"] :where(.pill-nav__brand) {
        padding-right: 0.375rem !important;
    }

    body[class^="page-"] :where(.pill-nav__actions),
    body[class*=" page-"] :where(.pill-nav__actions) {
        padding-left: 0.375rem !important;
    }

    body[class^="page-"] :where(.pill-nav__item),
    body[class*=" page-"] :where(.pill-nav__item) {
        width: 2.25rem;
        padding: 0 !important;
        gap: 0 !important;
    }

    body[class^="page-"] :where(.pill-nav__logo-img),
    body[class*=" page-"] :where(.pill-nav__logo-img) {
        width: 36px !important;
        height: 36px !important;
    }
}

@media (max-width: 1000px) {
    body[class^="page-"] .pill-nav,
    body[class*=" page-"] .pill-nav {
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 1rem) !important;
        padding: 0.4rem 0.6rem !important;
    }

    body[class^="page-"] :where(.pill-nav__toggle),
    body[class*=" page-"] :where(.pill-nav__toggle) {
        display: flex !important;
        flex: 0 0 34px !important;
    }

    body[class^="page-"] :where(.pill-nav__items),
    body[class*=" page-"] :where(.pill-nav__items) {
        display: none !important;
    }

    body[class^="page-"] :where(.pill-nav-sidebar),
    body[class*=" page-"] :where(.pill-nav-sidebar) {
        display: block !important;
    }
}

@media (max-width: 520px) {
    body[class^="page-"] :where(.pill-nav__logo-text, .pill-nav__user-name),
    body[class*=" page-"] :where(.pill-nav__logo-text, .pill-nav__user-name) {
        display: none !important;
    }

    body[class^="page-"] :where(.pill-nav__brand),
    body[class*=" page-"] :where(.pill-nav__brand) {
        border-right: 0 !important;
        padding-right: 0.125rem !important;
    }

    body[class^="page-"] :where(.pill-nav__actions),
    body[class*=" page-"] :where(.pill-nav__actions) {
        gap: 0.25rem !important;
    }
}

/* Keep long signed-in identities from widening the pill nav. */
body .pill-nav__user-menu--compactable .pill-nav__user-name,
body .pill-nav__user-menu--compactable .pill-nav__user-chevron {
    display: none !important;
}

body .pill-nav__user-menu--compactable .pill-nav__user-trigger {
    width: 2.25rem !important;
    padding-inline: 0.25rem !important;
    justify-content: center !important;
}

/* Authoritative pill-nav response layer. The full link strip is too wide for
   medium screens, so it collapses to the sidebar trigger before it can crowd
   the brand, theme picker, notifications, or avatar actions. */
body[class^="page-"] .pill-nav,
body[class*=" page-"] .pill-nav {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    width: max-content !important;
    max-width: calc(100vw - 1rem) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body[class^="page-"] :where(.pill-nav__theme-button, .notif-bell-btn, .pill-nav__user-trigger),
body[class*=" page-"] :where(.pill-nav__theme-button, .notif-bell-btn, .pill-nav__user-trigger) {
    width: 2.35rem !important;
    min-width: 2.35rem !important;
    height: 2.35rem !important;
    padding: 0 !important;
    justify-content: center !important;
}

body[class^="page-"] :where(.pill-nav__theme-button span, .notif-bell-btn > span:not(.notif-badge)),
body[class*=" page-"] :where(.pill-nav__theme-button span, .notif-bell-btn > span:not(.notif-badge)) {
    display: none !important;
}

@media (max-width: 1280px) {
    body[class^="page-"] .pill-nav,
    body[class*=" page-"] .pill-nav {
        gap: 0.3rem !important;
        padding: 0.42rem 0.62rem !important;
    }

    body[class^="page-"] :where(.pill-nav__toggle),
    body[class*=" page-"] :where(.pill-nav__toggle) {
        display: flex !important;
        flex: 0 0 2.35rem !important;
        width: 2.35rem !important;
        height: 2.35rem !important;
    }

    body[class^="page-"] :where(.pill-nav__items),
    body[class*=" page-"] :where(.pill-nav__items) {
        display: none !important;
    }

    body[class^="page-"] :where(.pill-nav-sidebar),
    body[class*=" page-"] :where(.pill-nav-sidebar) {
        display: block !important;
    }

    body[class^="page-"] :where(.pill-nav__theme-panel.pill-nav__dropdown-menu, .pill-nav__theme-panel.pill-nav__dropdown-menu--right),
    body[class*=" page-"] :where(.pill-nav__theme-panel.pill-nav__dropdown-menu, .pill-nav__theme-panel.pill-nav__dropdown-menu--right) {
        position: fixed !important;
        top: 4.25rem !important;
        left: 50% !important;
        right: auto !important;
        width: min(760px, calc(100vw - 1rem)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 1rem) !important;
        transform: translateX(-50%) !important;
    }

    body[class^="page-"] :where(.pill-nav__theme-panel.pill-nav__dropdown-menu.show, .pill-nav__theme-panel.pill-nav__dropdown-menu--right.show),
    body[class*=" page-"] :where(.pill-nav__theme-panel.pill-nav__dropdown-menu.show, .pill-nav__theme-panel.pill-nav__dropdown-menu--right.show) {
        transform: translateX(-50%) !important;
    }
}

@media (max-width: 760px) {
    body[class^="page-"] :where(.pill-nav__logo-text, .pill-nav__user-name, .pill-nav__user-chevron),
    body[class*=" page-"] :where(.pill-nav__logo-text, .pill-nav__user-name, .pill-nav__user-chevron) {
        display: none !important;
    }

    body[class^="page-"] :where(.pill-nav__brand),
    body[class*=" page-"] :where(.pill-nav__brand) {
        padding-right: 0.25rem !important;
    }

    body[class^="page-"] :where(.pill-nav__actions),
    body[class*=" page-"] :where(.pill-nav__actions) {
        gap: 0.2rem !important;
        padding-left: 0.25rem !important;
    }
}

@media (max-width: 460px) {
    body[class^="page-"] .pill-nav,
    body[class*=" page-"] .pill-nav {
        gap: 0.18rem !important;
        padding: 0.34rem 0.45rem !important;
    }

    body[class^="page-"] :where(.pill-nav__brand),
    body[class*=" page-"] :where(.pill-nav__brand) {
        border-right: 0 !important;
        padding-right: 0 !important;
    }

    body[class^="page-"] :where(.pill-nav__logo-img),
    body[class*=" page-"] :where(.pill-nav__logo-img) {
        width: 32px !important;
        height: 32px !important;
    }

    body[class^="page-"] :where(.pill-nav__theme-button, .notif-bell-btn, .pill-nav__user-trigger, .pill-nav__toggle),
    body[class*=" page-"] :where(.pill-nav__theme-button, .notif-bell-btn, .pill-nav__user-trigger, .pill-nav__toggle) {
        width: 2.05rem !important;
        min-width: 2.05rem !important;
        height: 2.05rem !important;
    }
}

@media (max-width: 600px) {
    body[class^="page-"] .pill-nav__theme-panel,
    body[class*=" page-"] .pill-nav__theme-panel {
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 1rem) !important;
        transform: none !important;
    }

    body[class^="page-"] :where(.pill-nav__theme-panel.show),
    body[class*=" page-"] :where(.pill-nav__theme-panel.show) {
        transform: none !important;
    }
}

body[class^="page-"] :where(h1, h2, h3, .card, .glass-card, .section),
body[class*=" page-"] :where(h1, h2, h3, .card, .glass-card, .section) {
    min-width: 0;
}

@media (max-width: 760px) {
    body[class^="page-"] :where(h1, h2, h3),
    body[class*=" page-"] :where(h1, h2, h3) {
        overflow-wrap: anywhere;
        word-break: normal;
    }
}

@media (max-width: 600px) {
    body[class^="page-"] .pill-nav,
    body[class*=" page-"] .pill-nav {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body[class^="page-"] .pill-nav .pill-nav__theme-panel.pill-nav__dropdown-menu,
    body[class^="page-"] .pill-nav .pill-nav__theme-panel.pill-nav__dropdown-menu--right,
    body[class*=" page-"] .pill-nav .pill-nav__theme-panel.pill-nav__dropdown-menu,
    body[class*=" page-"] .pill-nav .pill-nav__theme-panel.pill-nav__dropdown-menu--right {
        position: fixed !important;
        top: 4rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: calc(100vw - 1rem) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 1rem) !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    body[class^="page-"] .pill-nav .pill-nav__theme-panel .theme-chooser__grid,
    body[class*=" page-"] .pill-nav .pill-nav__theme-panel .theme-chooser__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body[class^="page-"] .pill-nav .pill-nav__theme-panel .theme-chooser__option,
    body[class*=" page-"] .pill-nav .pill-nav__theme-panel .theme-chooser__option {
        min-width: 0 !important;
    }
}

@media (max-width: 460px) {
    body[class^="page-"] .pill-nav .pill-nav__theme-panel .theme-chooser__grid,
    body[class*=" page-"] .pill-nav .pill-nav__theme-panel .theme-chooser__grid {
        grid-template-columns: 1fr !important;
    }
}