/* Doify mobile experience layer.
 * Loaded after the design system so one predictable responsive contract wins
 * over legacy page-level media queries. Keep desktop behavior untouched. */

@media (max-width: 56.25rem) {
    html {
        width: 100%;
        overflow-x: clip;
        scroll-padding-top: calc(4.5rem + env(safe-area-inset-top));
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        width: 100%;
        min-width: 0;
        overflow-x: clip;
        background: #f4f7fb;
    }

    :where(.app-shell, .workspace, .content, .panel, .card, .ds-card, form, fieldset, .page-head, .panel-head, .head-actions, .page-actions) {
        min-width: 0;
        max-width: 100%;
    }

    .topbar {
        top: 0;
        min-height: calc(3.75rem + env(safe-area-inset-top));
        height: calc(3.75rem + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) .75rem 0;
        border-bottom-color: rgba(218, 226, 238, .88);
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 5px 20px rgba(28, 45, 74, .045);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
    }

    .topbar-primary { min-width: 0; gap: .55rem; }
    .topbar-brand { min-width: 0; max-width: min(12rem, 49vw); gap: .45rem; }
    .topbar-brand > .topbar-brand-copy { min-width: 0; display: grid !important; gap: .05rem; }
    .topbar-brand strong { display: block; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-brand small { display: block !important; max-width: 100%; overflow: hidden; color: #66758a; font-size: .58rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-brand em { display: none; }
    .topbar-brand :is(.brand-mark, .brand-logo) { width: 1.85rem; height: 1.85rem; flex-basis: 1.85rem; }
    .topbar-tools { min-width: 0; gap: .25rem; }
    .topbar-actions { gap: .2rem; }
    .topbar .icon-button,
    .mobile-menu-toggle {
        width: 2.65rem;
        height: 2.65rem;
        min-width: 2.65rem;
        min-height: 2.65rem;
        border-color: transparent;
        border-radius: .8rem;
        background: transparent;
    }
    .topbar .icon-button:hover,
    .mobile-menu-toggle:hover { background: #eef3fb; }
    .topbar .icon-button svg,
    .mobile-menu-toggle svg { width: 1.25rem; height: 1.25rem; }

    .top-navigation {
        width: min(88vw, 22rem);
        height: var(--mobile-viewport-height, 100dvh);
        padding: max(.9rem, env(safe-area-inset-top)) .75rem calc(5.5rem + env(safe-area-inset-bottom));
        border-radius: 1.35rem 0 0 1.35rem;
        box-shadow: -1.5rem 0 4rem rgba(18, 32, 54, .2);
        scrollbar-width: thin;
    }
    /* The drawer lives inside the sticky header. Raise that stacking context
       above the backdrop while it is open; a child z-index cannot escape its
       parent's stacking context. Disabling the blur also avoids a fixed-child
       containing-block issue in mobile WebKit. */
    body.mobile-nav-open .topbar {
        z-index: 920;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    body.mobile-nav-open .top-navigation { z-index: 930; }
    .mobile-nav-head { position: sticky; z-index: 2; top: calc(-1 * max(.9rem, env(safe-area-inset-top))); margin: 0 -.1rem .7rem; padding: .55rem .35rem .75rem; background: rgba(255, 255, 255, .97); }
    .mobile-nav-head strong { color: #1e2b3e; font-size: .82rem; }
    .mobile-nav-head small { font-size: .62rem; }
    .nav-dropdown { margin-bottom: .45rem; border-color: #e4eaf2; border-radius: .9rem; background: #fff; }
    .nav-dropdown > summary { min-height: 3rem; padding: .65rem .8rem; font-size: .75rem; }
    .nav-dropdown > summary > i { margin-inline-start: auto; }
    .dropdown-panel { padding: .3rem .4rem .55rem; background: #fbfcfe; }
    .dropdown-title { padding: .45rem .55rem .3rem; }
    .dropdown-panel a { min-height: 3.15rem; padding: .45rem .55rem; border-radius: .7rem; }
    .dropdown-panel .nav-icon { width: 2rem; height: 2rem; }
    .menu-copy strong { font-size: .7rem; }
    .menu-copy small { font-size: .59rem; line-height: 1.55; }

    .mobile-nav-backdrop,
    .mobile-nav-backdrop:hover,
    .mobile-nav-backdrop:focus,
    .mobile-nav-backdrop:focus-visible,
    .mobile-nav-backdrop:active {
        z-index: 900;
        border: 0;
        border-radius: 0;
        outline: 0;
        color: transparent;
        background: rgba(18, 29, 48, .46) !important;
        box-shadow: none !important;
        transform: none !important;
        -webkit-tap-highlight-color: transparent;
        appearance: none;
        touch-action: manipulation;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    .workspace { min-height: calc(100dvh - 3.75rem); }
    .content {
        width: 100%;
        padding: 1rem .75rem calc(6.5rem + env(safe-area-inset-bottom));
    }

    .mobile-bottom-nav {
        right: .55rem;
        bottom: max(.45rem, env(safe-area-inset-bottom));
        left: .55rem;
        min-height: 4.25rem;
        padding: .42rem .38rem .34rem;
        border-color: rgba(210, 220, 234, .86);
        border-radius: 1.15rem;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 .85rem 2.6rem rgba(25, 43, 72, .2);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }
    .mobile-bottom-nav > :is(a, button) {
        min-height: 3.25rem;
        gap: .12rem;
        padding: .3rem .15rem;
        border-radius: .8rem;
        font-size: .57rem;
    }
    .mobile-bottom-nav > :is(a, button) svg { width: 1.23rem; height: 1.23rem; }
    .mobile-bottom-nav > :is(a, button).active:not(.mobile-primary-action) { background: #edf3ff; }
    .mobile-bottom-nav > a.mobile-primary-action {
        width: 3.7rem;
        height: 3.7rem;
        min-width: 3.7rem;
        margin-top: -1.4rem;
        border-width: .3rem;
        border-radius: 1.15rem;
    }

    .page-head,
    .ds-page-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: .7rem;
        margin-bottom: .85rem;
    }
    .page-head h1,
    .ds-page-header h1 { margin: 0 0 .2rem; font-size: clamp(1.18rem, 5.6vw, 1.42rem); line-height: 1.45; }
    .page-head p,
    .ds-page-header p { margin: 0; font-size: .66rem; line-height: 1.8; }
    .page-head > :is(.head-actions, .page-actions),
    .panel-head > :is(.head-actions, .page-actions) {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem;
    }
    .head-actions > :is(a, button, form),
    .page-actions > :is(a, button, form) { min-width: 0; }
    .head-actions > :is(a, button),
    .head-actions > form > button,
    .page-actions > :is(a, button),
    .page-actions > form > button { width: 100%; min-height: 2.7rem; padding-inline: .55rem; text-align: center; }

    .panel,
    .ds-card {
        margin-bottom: .75rem;
        padding: .85rem;
        border-radius: 1rem;
        box-shadow: 0 .35rem 1.3rem rgba(31, 48, 78, .045);
    }
    .panel-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; }
    .panel-head h2 { font-size: .9rem; }
    .panel-head p { font-size: .63rem; line-height: 1.75; }

    .section-hub,
    .tabs,
    .dashboard-persona-strip,
    .inbox-source-tabs {
        width: calc(100% + 1.5rem);
        margin-inline: -.75rem;
        padding: 0 .75rem .4rem;
        display: flex;
        flex-wrap: nowrap;
        gap: .5rem;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
    }
    :is(.section-hub, .tabs, .dashboard-persona-strip, .inbox-source-tabs)::-webkit-scrollbar { display: none; }
    .section-hub a,
    .tabs a,
    .dashboard-persona,
    .inbox-source-tabs a { flex: 0 0 min(10rem, 72vw); scroll-snap-align: start; }
    .tabs a,
    .inbox-source-tabs a { flex-basis: auto; min-width: 7rem; }

    form.form-grid,
    .form-grid,
    .form-section-grid,
    .record-form-grid,
    .compact-form,
    .filter-grid,
    .two-columns,
    .detail-grid { grid-template-columns: minmax(0, 1fr) !important; }
    form.form-grid > *,
    .form-grid > *,
    .form-section-grid > *,
    .record-form-grid > * { grid-column: 1 / -1 !important; min-width: 0; }
    fieldset { min-width: 0; padding: .75rem; }
    :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; max-width: 100%; min-height: 2.75rem; font-size: .75rem; }
    input[type="file"] { padding: .45rem; overflow: hidden; }
    textarea { min-height: 6rem; }
    .check { min-height: 2.75rem; }
    .filter-bar,
    .bulk-toolbar,
    .calendar-filter { align-items: stretch; flex-direction: column; }
    :is(.filter-bar, .bulk-toolbar, .calendar-filter) > * { width: 100%; min-width: 0 !important; }
    .inline-form { min-width: 0; max-width: 100%; flex-wrap: wrap; }
    .inline-form > * { min-width: 0; flex: 1 1 8rem; }

    .form-actions,
    .sticky-form-actions {
        right: auto;
        bottom: calc(4.9rem + env(safe-area-inset-bottom));
        left: auto;
        width: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem;
        margin: .65rem -.85rem -.85rem;
        padding: .65rem .85rem;
        border-top: 1px solid #e4eaf2;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 -.5rem 1.5rem rgba(31, 48, 78, .045);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
    :is(.form-actions, .sticky-form-actions) > :is(button, .button, form),
    :is(.form-actions, .sticky-form-actions) > form > button { width: 100%; min-width: 0; }

    .table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .mobile-responsive-table {
        width: 100%;
        min-width: 0;
        display: block;
        border: 0;
        background: transparent;
    }
    .mobile-responsive-table thead { display: none; }
    .mobile-responsive-table tbody { width: 100%; display: grid; gap: .65rem; }
    .mobile-responsive-table tbody tr {
        width: 100%;
        display: grid;
        gap: 0;
        overflow: hidden;
        border: 1px solid #dfe6f0;
        border-radius: .9rem;
        background: #fff;
        box-shadow: 0 .25rem 1rem rgba(31, 48, 78, .035);
    }
    .mobile-responsive-table tbody td {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 2.5rem;
        display: grid;
        grid-template-columns: minmax(4.7rem, 31%) minmax(0, 1fr);
        align-items: center;
        gap: .65rem;
        padding: .58rem .7rem;
        border: 0;
        border-bottom: 1px solid #edf1f6;
        background: #fff;
        text-align: start;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .mobile-responsive-table tbody td:last-child { border-bottom: 0; }
    .mobile-responsive-table tbody td[data-mobile-label]::before,
    .mobile-responsive-table tbody td[data-label]::before {
        content: attr(data-mobile-label);
        color: #78869a;
        font-size: .59rem;
        font-weight: 750;
        line-height: 1.55;
    }
    .mobile-responsive-table tbody td[data-label]:not([data-mobile-label])::before { content: attr(data-label); }
    .mobile-responsive-table tbody td[colspan],
    .mobile-responsive-table tbody td.empty {
        min-height: 7rem;
        display: grid !important;
        grid-template-columns: 1fr;
        place-content: center;
        border: 0;
        text-align: center;
    }
    .mobile-responsive-table tbody td[colspan]::before,
    .mobile-responsive-table tbody td.empty::before { display: none; }
    .mobile-responsive-table td :is(.row-actions, .page-actions, .button-row) { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mobile-responsive-table td :is(.row-actions, .page-actions, .button-row) > * { min-width: 0; width: 100%; }
    .mobile-responsive-table td :is(.row-actions, .page-actions, .button-row) :is(a, button) { width: 100%; }
    .mobile-responsive-table td form { max-width: 100%; }

    .people-table-picker .people-multi-panel,
    .people-multi-panel {
        width: auto !important;
        max-width: none !important;
        max-height: min(80dvh, var(--mobile-viewport-height, 80dvh)) !important;
        inset: auto .5rem calc(4.9rem + env(safe-area-inset-bottom)) !important;
        padding: .7rem !important;
        border-radius: 1.1rem !important;
        box-shadow: 0 -1rem 3rem rgba(20, 34, 58, .2) !important;
    }
    .people-picker-table-wrap { min-height: 12rem; border-radius: .8rem; }
    .people-picker-table { min-width: 25rem; }
    .people-picker-table :is(th, td):nth-child(2) { width: 5.2rem; }
    .people-picker-table :is(th, td):nth-child(3) { width: 6rem; }
    .people-multi-trigger { min-height: 2.75rem; }

    dialog,
    .ds-dialog {
        width: 100%;
        max-width: none;
        max-height: min(88dvh, var(--mobile-viewport-height, 88dvh));
        margin: auto 0 0;
        border-radius: 1.3rem 1.3rem 0 0;
    }
    .ds-dialog__footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-dialog__footer > * { width: 100%; }

    .role-dashboard-head { align-items: stretch; flex-direction: column; padding: 1rem; }
    .role-dashboard-identity { align-items: flex-start; }
    .role-dashboard-symbol { flex: 0 0 auto; }
    .role-dashboard-controls { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .role-dashboard-controls .persona-select { min-width: 0; }
    .role-dashboard,
    .role-dashboard-workspace,
    .role-widget-grid { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
    .role-dashboard-workspace { display: block !important; }
    .role-widget-grid { display: flex !important; flex-direction: column; align-items: stretch; overflow: visible; }
    .role-widget { width: 100% !important; min-width: 0 !important; max-width: 100% !important; grid-column: 1 / -1 !important; flex: 0 0 auto; box-sizing: border-box; }
    .role-widget-head { grid-template-columns: auto minmax(0, 1fr) auto; }
    .widget-task-list a,
    .widget-list a { align-items: start; }
    .widget-task-list time,
    .widget-list time { max-width: 6.2rem; white-space: normal; text-align: end; }
    .dashboard-customizer {
        width: auto;
        max-height: min(78dvh, var(--mobile-viewport-height, 78dvh));
        position: fixed;
        z-index: 650;
        inset: auto .5rem calc(4.9rem + env(safe-area-inset-bottom));
        overflow-y: auto;
        border-radius: 1.1rem;
        box-shadow: 0 -1rem 3rem rgba(20, 34, 58, .2);
    }

    .stats,
    .role-metrics,
    .report-stats,
    .project-kpis,
    .inbox-overview { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .stats article { min-height: 5.6rem; padding: .75rem; }
    .calendar-month-wrap,
    .kanban-board,
    .gantt,
    .project-gantt-panel,
    .workflow-builder,
    .ds-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .content :where(img, video, canvas, iframe) { max-width: 100%; }
    .content :where(pre, code, .menu-copy, .page-head > div, .panel-head > div) { min-width: 0; overflow-wrap: anywhere; }
    .content :where(.table-wrap, .calendar-month-wrap, .kanban-board, .gantt, .project-gantt-panel, .workflow-builder, .people-picker-dropdown) { width: 100%; min-width: 0; max-width: 100%; contain: inline-size; }
    .calendar-month-wrap::after,
    .project-gantt-panel::after {
        content: "برای مشاهده ادامه، صفحه را افقی بکشید";
        position: sticky;
        right: 0;
        display: block;
        width: max-content;
        margin: .35rem 0 0;
        padding: .25rem .55rem;
        border-radius: 999px;
        color: #6e7c90;
        background: #eef2f7;
        font-size: .55rem;
    }

    dl { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
    dd { margin: 0 0 .55rem; overflow-wrap: anywhere; }
    .legal-footer { padding: .75rem .75rem calc(6rem + env(safe-area-inset-bottom)); gap: .35rem .65rem; }
    .legal-footer a { min-height: 2rem; display: inline-flex; align-items: center; }
}

/* Preserve saved dashboard visibility even where mobile cards use !important. */
.role-widget[hidden] { display: none !important; }

@media (max-width: 37.5rem) {
    .topbar-actions > :is(.install-app-button, .header-create-action, .user-summary) { display: none !important; }
    .content { padding-inline: .62rem; }
    .page-head > :is(.head-actions, .page-actions),
    .panel-head > :is(.head-actions, .page-actions) { grid-template-columns: minmax(0, 1fr); }
    .section-hub,
    .tabs,
    .dashboard-persona-strip,
    .inbox-source-tabs { width: calc(100% + 1.24rem); margin-inline: -.62rem; padding-inline: .62rem; }
    .panel,
    .ds-card { padding: .75rem; border-radius: .9rem; }
    .form-actions,
    .sticky-form-actions { margin-inline: -.75rem; margin-bottom: -.75rem; padding-inline: .75rem; }
    .role-dashboard-controls { grid-template-columns: minmax(0, 1fr); }
    .role-dashboard-controls > * { width: 100%; }
    .widget-task-list a,
    .widget-list a { grid-template-columns: minmax(0, 1fr); }
    .widget-task-list time,
    .widget-list time { max-width: none; text-align: start; }
    .people-picker-table { min-width: 22rem; }
}

@media (max-width: 22.5rem) {
    .topbar-brand { max-width: min(10.5rem, 46vw); }
    .topbar-brand > .topbar-brand-copy { display: grid !important; }
    .topbar-brand strong { font-size: .68rem; }
    .topbar-brand small { font-size: .52rem; }
    .mobile-bottom-nav { right: .25rem; left: .25rem; padding-inline: .2rem; }
    .mobile-bottom-nav > :is(a, button) { font-size: .52rem; }
    .mobile-responsive-table tbody td { grid-template-columns: minmax(4.1rem, 29%) minmax(0, 1fr); padding-inline: .55rem; }
    .stats,
    .role-metrics,
    .report-stats,
    .project-kpis,
    .inbox-overview { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 56.25rem) and (orientation: landscape) and (max-height: 31.25rem) {
    .top-navigation { width: min(70vw, 24rem); }
    .mobile-bottom-nav { min-height: 3.75rem; }
    .mobile-bottom-nav > :is(a, button) { min-height: 2.8rem; }
    .mobile-bottom-nav > a.mobile-primary-action { width: 3.2rem; height: 3.2rem; min-width: 3.2rem; margin-top: -1rem; }
    .content { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* Guest pages use the same mobile rhythm but avoid a nested scroll container. */
@media (max-width: 56.25rem) {
    .guest-auth-page { min-height: 100dvh; overflow-x: clip; overflow-y: auto; background: linear-gradient(160deg, #eef2fb, #f8fafc 56%, #eef8f7); }
    .guest-auth-page .guest-shell { width: 100%; min-height: 100dvh; height: auto; display: grid; place-items: center; overflow: visible; padding: max(.5rem, env(safe-area-inset-top)) 0 max(.5rem, env(safe-area-inset-bottom)); }
    .guest-auth-page .auth-card {
        width: min(30rem, calc(100% - 1rem));
        height: auto;
        min-height: min(46rem, calc(100dvh - 1rem));
        max-height: none;
        margin: 0;
        padding: 1.2rem;
        overflow: visible;
        justify-content: center;
        border-radius: 1.35rem;
        box-shadow: 0 1rem 3rem rgba(30, 48, 80, .1);
    }
    .guest-auth-page .mobile-brand { margin-bottom: 1rem; }
    .guest-auth-page .auth-card h1 { font-size: 1.35rem; }
    .guest-auth-page .auth-card .muted { margin-bottom: .85rem; font-size: .68rem; }
    .guest-auth-page .guest-legal { display: flex; justify-content: center; gap: .25rem .45rem; }
    .guest-auth-page .guest-legal a { width: auto; min-height: 1.8rem; padding: .25rem .38rem; white-space: normal; }
}

/* Compact mobile selectors. These areas used to be horizontal carousels and
   made the page itself feel wider than the viewport. They now wrap in-place. */
@media (max-width: 56.25rem) {
    .role-dashboard-head {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .7rem !important;
        padding: .78rem !important;
        border-radius: 1rem;
        box-sizing: border-box;
    }
    .role-dashboard-identity {
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: 2.65rem minmax(0, 1fr);
        align-items: center;
        gap: .65rem;
    }
    .role-dashboard-identity > span:last-child { min-width: 0; }
    .role-dashboard-symbol {
        width: 2.65rem !important;
        height: 2.65rem !important;
        border-radius: .8rem !important;
        font-size: 1.08rem;
        box-shadow: 0 .45rem 1rem rgba(70, 95, 255, .18);
    }
    .role-dashboard-identity small { margin: 0; font-size: .55rem; }
    .role-dashboard-identity h1 {
        margin: 0;
        overflow: hidden;
        font-size: 1rem;
        line-height: 1.5;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .role-dashboard-identity p {
        margin: .08rem 0 0;
        overflow: hidden;
        font-size: .58rem;
        line-height: 1.65;
        text-overflow: ellipsis;
        white-space: nowrap !important;
    }
    .role-dashboard-controls {
        width: 100%;
        min-width: 0;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: end;
        gap: .45rem;
    }
    .role-dashboard-controls .persona-select { width: 100% !important; min-width: 0; gap: .18rem; }
    .role-dashboard-controls .persona-select > span { font-size: .55rem; }
    .role-dashboard-controls .persona-select select {
        width: 100%;
        min-width: 0;
        height: 2.55rem;
        min-height: 2.55rem;
        padding-block: .3rem;
        border-radius: .7rem;
    }
    .role-dashboard-controls .dashboard-customize-toggle {
        width: auto !important;
        min-width: 6.65rem;
        height: 2.55rem;
        min-height: 2.55rem;
        justify-content: center;
        padding-inline: .65rem;
        border-radius: .7rem;
        white-space: nowrap;
    }
    .notification-section-hub,
    .inbox-source-tabs,
    .dashboard-persona-strip {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding: .38rem !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: .4rem;
        overflow: hidden !important;
        scroll-snap-type: none;
        box-sizing: border-box;
    }
    .notification-section-hub > a,
    .inbox-source-tabs > a,
    .dashboard-persona-strip > .dashboard-persona {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0;
        box-sizing: border-box;
        scroll-snap-align: none;
    }
    .notification-section-hub > a {
        min-height: 4.25rem;
        padding: .62rem .7rem;
    }
    .notification-section-hub strong { font-size: .68rem; }
    .notification-section-hub small { font-size: .56rem; line-height: 1.55; }
    .inbox-source-tabs > a {
        min-height: 3.25rem;
        padding: .42rem .48rem;
        white-space: normal;
    }
    .inbox-source-tabs > a > span:last-child { min-width: 0; }
    .inbox-source-tabs strong,
    .inbox-source-tabs small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .inbox-source-mark { width: 1.85rem; height: 1.85rem; flex-basis: 1.85rem; border-radius: .55rem; }
    .dashboard-persona-strip > .dashboard-persona {
        min-height: 3.25rem;
        grid-template-columns: 1.8rem minmax(0, 1fr);
        grid-template-rows: 1fr;
        column-gap: .45rem;
        padding: .45rem .5rem;
    }
    .dashboard-persona > span {
        width: 1.8rem;
        height: 1.8rem;
        grid-row: 1;
        border-radius: .55rem;
    }
    .dashboard-persona strong { min-width: 0; overflow: hidden; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
    .dashboard-persona small { display: none; }
    .notification-choice-section .choice-grid {
        width: 100%;
        max-width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem;
        padding: .15rem 0 0 !important;
        overflow: visible !important;
        scroll-snap-type: none;
    }
    .notification-choice-section .choice-grid .check {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 2.9rem;
        flex: none !important;
        padding: .5rem .58rem;
        box-sizing: border-box;
        scroll-snap-align: none;
    }
    .notification-choice-section .choice-grid .check span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .inbox-source-tabs > a:last-child:nth-child(odd),
    .notification-choice-section .choice-grid .check:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 22.5rem) {
    .role-dashboard-head { padding: .68rem !important; }
    .role-dashboard-identity { grid-template-columns: 2.35rem minmax(0, 1fr); gap: .5rem; }
    .role-dashboard-symbol { width: 2.35rem !important; height: 2.35rem !important; }
    .role-dashboard-controls .dashboard-customize-toggle { min-width: 6rem; padding-inline: .48rem; font-size: .58rem; }
    .notification-section-hub,
    .inbox-source-tabs,
    .dashboard-persona-strip,
    .notification-choice-section .choice-grid { gap: .3rem; }
    .notification-section-hub > a { padding-inline: .55rem; }
    .inbox-source-tabs > a { gap: .35rem; padding-inline: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .top-navigation,
    .mobile-nav-backdrop,
    .mobile-bottom-nav,
    .mobile-responsive-table tbody tr { transition: none !important; }
}