/*
 * Unified responsive dashboard and embedded project workspace.
 *
 * This file is intentionally loaded with media="screen and (max-width: 899px)".
 * It contains presentation overrides only: no routes, data attributes, control
 * IDs, or interaction hooks are replaced. The existing desktop presentation at
 * 900px and above therefore cannot match any rule in this file.
 */

:root {
    --unified-edge: clamp(16px, 4vw, 32px);
    --unified-border: #c9d8e8;
    --unified-ink: #172437;
    --unified-muted: #607a98;
    --unified-surface: #f2f0ea;
    --unified-control: #f8f5f1;
    --unified-header-height: 72px;
    --unified-header-secondary-height: 0px;
    --unified-header-row-gap: 0px;
}

/* Reserve a second row only for existing, visible project/selection controls.
   The same inherited height positions the library, iframe and Portfolio route. */
body.projects-dashboard:has(.project-header-sticky .topbar-actions > :not([hidden], .dashboard-shell-control-cluster, .dashboard-folder-create-wrap, #dashboard-delete-selection-btn)),
body.projects-dashboard:has(.project-header-sticky .dashboard-folder-create-popover:not([hidden])) {
    --unified-header-height: 128px;
    --unified-header-secondary-height: 52px;
    --unified-header-row-gap: 4px;
}

/* The legacy phone stylesheet used a full-screen landscape warning. The same
   dashboard now remains usable in either orientation. */
body.projects-dashboard::before {
    display: none !important;
    content: none !important;
}

body.projects-dashboard {
    min-width: 0;
    overflow-x: hidden;
    background: var(--unified-surface);
}

body.projects-dashboard > main.layout {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    padding: var(--unified-header-height) 0 32px;
    background: var(--unified-surface);
    box-sizing: border-box;
}

/* The page stays locked; only the narrow dashboard library scrolls. Editors
   retain their own scroll owners. Keep the same owner (but lock it) behind an
   open project or dialog so returning does not discard its scroll position. */
body.projects-dashboard:not(.portfolio-page-route):not(.dashboard-blog-active):not(.dashboard-prompter-active) {
    /* Retired landscape-warning padding must not move the viewport-height
       scroll surface below the bottom of the screen. */
    padding: 0;
}

body.projects-dashboard:not(.portfolio-page-route):not(.dashboard-blog-active):not(.dashboard-prompter-active) > main.layout {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

body.projects-dashboard:not(.portfolio-page-route):not(.dashboard-blog-active):not(.dashboard-prompter-active):not([data-dashboard-mobile-view="100"]) .library-tab-cards {
    overflow: visible !important;
    overscroll-behavior: auto !important;
}

body.projects-dashboard.dashboard-project-workspace-open > main.layout,
body.projects-dashboard:has(dialog[open]) > main.layout {
    overflow: hidden !important;
}

body.projects-dashboard .project-header-sticky {
    position: fixed;
    z-index: 20010;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: var(--unified-header-height);
    margin: 0;
    padding: 0 var(--unified-edge);
    border: 0;
    /* The root remains scroll-locked while main scrolls. Its legacy rule
       must not make this fixed header transparent, including in dark mode. */
    background: var(--unified-surface) !important;
    box-shadow: none;
    transform: none;
    box-sizing: border-box;
}

body.projects-dashboard .project-header-sticky::after {
    display: none;
}

/* The legacy 769px workspace rule offsets only open-project headers by 30px.
   Keep the same origin as the dashboard and the responsive iframe inset. */
body.projects-dashboard.dashboard-project-workspace-open .project-header-sticky {
    top: 0;
}

/* Portfolio's old mobile route hid the entire dashboard shell. Expose only
   its shared header; keep the manager in its own scrollable content region. */
body.projects-dashboard.portfolio-page-route > main.layout {
    display: block !important;
    height: 0;
    min-height: 0;
    padding: 0;
}

body.projects-dashboard.portfolio-page-route > main.layout > :not(.project-header-sticky) {
    display: none !important;
}

body.projects-dashboard.portfolio-page-route #portfolio-route-root {
    position: fixed;
    inset: var(--unified-header-height) 0 0;
    height: auto;
    overflow-y: auto;
}

body.projects-dashboard .project-header-sticky > .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas:
        "nav activity"
        "actions actions";
    grid-template-rows: 48px var(--unified-header-secondary-height);
    align-content: start;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 12px 0;
    column-gap: 8px;
    row-gap: var(--unified-header-row-gap);
    border: 0;
    background: transparent;
    box-sizing: border-box;
}

body.projects-dashboard .dashboard-shell-brand-nav {
    display: contents;
}

body.projects-dashboard .dashboard-brand-title-row {
    display: none !important;
    align-items: center;
    width: auto;
    min-width: 0;
    margin: 0 !important;
    padding: 0;
    gap: clamp(18px, 2.5vw, 30px);
    align-self: center !important;
    transform: none !important;
}

body.projects-dashboard .dashboard-brand-title-row .brand-logo {
    display: block;
    width: clamp(96px, 13vw, 128px);
    max-width: none;
    height: auto;
    margin: 0;
}

body.projects-dashboard .dashboard-title-divider {
    display: block;
    width: 1px;
    height: 52px;
    background: #9db5cd;
}

body.projects-dashboard .dashboard-primary-nav {
    grid-area: nav;
    display: flex;
    align-items: center;
    justify-content: space-between;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    gap: clamp(4px, 1vw, 12px);
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    border: 0;
    background: transparent;
    scrollbar-width: none;
}

body.projects-dashboard .dashboard-primary-nav::-webkit-scrollbar {
    display: none;
}

body.projects-dashboard .dashboard-primary-nav .dashboard-primary-nav-btn {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0 clamp(3px, 0.6vw, 8px);
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #53667d !important;
    box-shadow: none !important;
    font: 400 clamp(0.85rem, 1.8vw, 1rem)/1 "Avenir Next", "Segoe UI", sans-serif;
    white-space: nowrap;
}

body.projects-dashboard .dashboard-primary-nav .dashboard-primary-nav-btn[aria-pressed="true"] {
    color: var(--unified-ink) !important;
    font-weight: 700;
}

body.projects-dashboard .dashboard-primary-nav-dot {
    position: absolute;
    left: 50%;
    bottom: 2px;
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e4303d;
    transform: translateX(-50%);
}

body.projects-dashboard .dashboard-primary-nav-btn[aria-pressed="true"] .dashboard-primary-nav-dot {
    display: block;
}

body.projects-dashboard .project-header-sticky .topbar-actions {
    grid-area: actions;
    display: none;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    gap: 0;
    border: 0;
    background: transparent;
    align-self: center !important;
}

body.projects-dashboard .project-header-sticky .topbar-actions:has(> :not([hidden], .dashboard-shell-control-cluster, .dashboard-folder-create-wrap, #dashboard-delete-selection-btn)),
body.projects-dashboard .project-header-sticky .topbar-actions:has(.dashboard-folder-create-popover:not([hidden])) {
    display: flex;
}

/* Hide only the utility pill. Selection controls and project context survive;
   JavaScript keeps the original Activity button beside the navigation. */
body.projects-dashboard .project-header-sticky .dashboard-shell-control-cluster {
    display: none !important;
}

body.projects-dashboard .project-header-sticky > .topbar > .dashboard-activity-btn {
    grid-area: activity;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    justify-self: start;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.projects-dashboard .dashboard-shell-control-cluster {
    display: inline-flex;
    align-items: stretch;
    width: auto;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--unified-border);
    border-radius: 22px;
    background: transparent;
    overflow: visible;
    box-shadow: none;
}

body.projects-dashboard .dashboard-shell-control-cluster > :is(button, .dashboard-view-menu, .dashboard-menu) {
    flex: 0 0 auto;
    height: 46px;
    min-height: 46px;
    margin: 0;
}

body.projects-dashboard .dashboard-shell-control-cluster > button,
body.projects-dashboard .dashboard-shell-control-cluster > .dashboard-view-menu > button,
body.projects-dashboard .dashboard-shell-control-cluster > .dashboard-menu > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 46px;
    min-height: 46px;
    margin: 0;
    padding: 0 15px;
    border: 0 !important;
    border-left: 1px solid var(--unified-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #344e68 !important;
    box-shadow: none !important;
}

body.projects-dashboard .dashboard-shell-control-cluster > button:hover,
body.projects-dashboard .dashboard-shell-control-cluster > .dashboard-view-menu > button:hover,
body.projects-dashboard .dashboard-shell-control-cluster > .dashboard-menu > button:hover {
    background: var(--unified-control) !important;
}

body.projects-dashboard .dashboard-shell-control-cluster > :first-child,
body.projects-dashboard .dashboard-shell-control-cluster > :first-child > button {
    border-left: 0 !important;
}

/* Keep the Dashboard header chrome neutral without changing the shared
   responsive token used by unrelated project surfaces. */
body.projects-dashboard .dashboard-shell-control-cluster {
    border-color: #ccd9e6;
}

body.projects-dashboard .dashboard-shell-control-cluster > button,
body.projects-dashboard .dashboard-shell-control-cluster > .dashboard-view-menu > button,
body.projects-dashboard .dashboard-shell-control-cluster > .dashboard-menu > button {
    border-left-color: #ccd9e6 !important;
}

body.projects-dashboard .dashboard-shell-control-cluster > button:hover,
body.projects-dashboard .dashboard-shell-control-cluster > button:focus-visible,
body.projects-dashboard .dashboard-shell-control-cluster > .dashboard-view-menu > button:hover,
body.projects-dashboard .dashboard-shell-control-cluster > .dashboard-view-menu > button:focus-visible,
body.projects-dashboard .dashboard-shell-control-cluster > .dashboard-view-menu > button[aria-expanded="true"],
body.projects-dashboard .dashboard-shell-control-cluster > .dashboard-menu > button:hover,
body.projects-dashboard .dashboard-shell-control-cluster > .dashboard-menu > button:focus-visible,
body.projects-dashboard .dashboard-shell-control-cluster > .dashboard-menu > button[aria-expanded="true"] {
    background: var(--unified-control) !important;
    border-color: #ccd9e6 !important;
}

body.projects-dashboard .dashboard-shell-control-cluster :is(
    .dashboard-view-menu-popover,
    .dashboard-menu-popover,
    .modules-menu-popover,
    .dashboard-language-list
) {
    border-color: #ccd9e6 !important;
    background: var(--unified-surface) !important;
}

body.projects-dashboard .dashboard-shell-control-cluster :is(
    .dashboard-view-menu-option,
    .dashboard-menu-link,
    .dashboard-language-switch,
    .dashboard-language-option
) {
    border-color: #ccd9e6 !important;
}

body.projects-dashboard .dashboard-shell-control-cluster :is(
    .dashboard-view-menu-option:hover,
    .dashboard-view-menu-option:focus-visible,
    .dashboard-menu-link:hover,
    .dashboard-menu-link:focus-visible,
    .dashboard-menu-section-toggle[aria-expanded="true"],
    .modules-menu-option:hover,
    .modules-menu-option:focus-visible,
    .dashboard-language-switch:hover,
    .dashboard-language-switch:focus-visible,
    .dashboard-language-switch[aria-expanded="true"],
    .dashboard-language-option.is-active,
    .dashboard-language-option:hover,
    .dashboard-language-option:focus,
    .dashboard-language-option:focus-visible
) {
    background: var(--unified-control) !important;
    border-color: #ccd9e6 !important;
}

body.projects-dashboard .dashboard-activity-btn {
    position: relative;
}

body.projects-dashboard .dashboard-activity-label {
    display: none;
}

body.projects-dashboard .dashboard-activity-dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9db8d8;
    box-shadow: 0 0 0 4px rgba(157, 184, 216, 0.18);
}

body.projects-dashboard .dashboard-activity-badge {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 2;
    display: grid;
    min-width: 28px;
    height: 28px;
    padding: 0 5px;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: #edf3f9;
    color: #172437;
    font: 400 clamp(0.85rem, 1.8vw, 1rem)/1 "Avenir Next", "Segoe UI", sans-serif;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

body.projects-dashboard .dashboard-activity-badge[hidden] {
    display: none !important;
}

body.projects-dashboard .dashboard-view-cycle-btn {
    min-width: 88px !important;
}

body.projects-dashboard .dashboard-view-cycle-btn.is-responsive-fixed {
    cursor: default;
}

body.projects-dashboard .dashboard-view-menu:has(.dashboard-view-cycle-btn.is-responsive-fixed) .dashboard-view-menu-popover {
    display: none !important;
}

body.projects-dashboard .dashboard-shell-search-btn svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

body.projects-dashboard .dashboard-menu-icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Project context occupies the right-hand second row. Activity has its own
   mobile grid cell; desktop retains its existing placement inside context. */
body.projects-dashboard .dashboard-project-header-context {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    width: 100%;
    gap: clamp(8px, 2vw, 18px);
    color: #2f4760;
    font: 400 clamp(0.88rem, 2vw, 1rem)/1 "Avenir Next", "Segoe UI", sans-serif;
}

body.projects-dashboard .dashboard-project-header-context[hidden] {
    display: none !important;
}

body.projects-dashboard .dashboard-project-header-context > .dashboard-activity-btn {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.projects-dashboard .dashboard-project-header-title {
    display: block;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Center opened media-project titles on narrow dashboard workspaces.
   Equal side tracks reserve the existing close button's width without moving
   it or changing title truncation or Activity placement. Notes collections use
   the blog context too; Portfolio uses the same centered presentation. */
body.projects-dashboard:is(.dashboard-video-project-context-open, .dashboard-photo-project-context-open, .dashboard-files-project-context-open, .dashboard-audio-project-context-open, .dashboard-blog-project-context-open, .dashboard-portfolio-context-open) .dashboard-project-header-context {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
}

body.projects-dashboard:is(.dashboard-video-project-context-open, .dashboard-photo-project-context-open, .dashboard-files-project-context-open, .dashboard-audio-project-context-open, .dashboard-blog-project-context-open, .dashboard-portfolio-context-open) .dashboard-project-header-title {
    grid-column: 2;
    text-align: center;
}

body.projects-dashboard:is(.dashboard-video-project-context-open, .dashboard-photo-project-context-open, .dashboard-files-project-context-open, .dashboard-audio-project-context-open, .dashboard-blog-project-context-open, .dashboard-portfolio-context-open) .dashboard-project-header-close {
    grid-column: 3;
}

body.projects-dashboard .dashboard-project-header-name {
    color: #101b2a;
    font-weight: 700;
}

body.projects-dashboard .topbar-actions .dashboard-project-header-close {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--unified-border) !important;
    border-radius: 50% !important;
    background: var(--unified-control) !important;
    color: var(--unified-muted) !important;
    box-shadow: none !important;
}

body.projects-dashboard .dashboard-project-header-close-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
}

body.projects-dashboard.dashboard-photo-project-context-open .dashboard-shell-control-cluster,
body.projects-dashboard.dashboard-video-project-context-open .dashboard-shell-control-cluster,
body.projects-dashboard.dashboard-blog-project-context-open .dashboard-shell-control-cluster {
    display: none !important;
}

body.projects-dashboard.dashboard-project-workspace-open > .dashboard-project-workspace:not(.is-background) {
    position: fixed;
    z-index: 20000;
    inset: var(--unified-header-height) 0 0;
    width: 100%;
    height: auto;
    min-height: 0;
    background: #fff;
}

/* Remove the retired dashboard presentation without touching its markup. */
body.projects-dashboard :is(.library-tabs-nav, .library-tabs-title-wrap, .dashboard-list-table-head) {
    display: none !important;
}

body.projects-dashboard .project-folders-section,
body.projects-dashboard .library-tabs-section,
body.projects-dashboard .library-tab-body,
body.projects-dashboard .library-tab-cards-wrap {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible !important;
    border: 0;
    border-radius: 0;
    background: var(--unified-surface);
    box-shadow: none;
    box-sizing: border-box;
}

body.projects-dashboard .project-folders-section:has(.library-tabs-section.is-expanded) .library-tabs-section.is-expanded,
body.projects-dashboard .project-folders-section:has(.library-tabs-section.is-expanded) .library-tab-body,
body.projects-dashboard .project-folders-section:has(.library-tabs-section.is-expanded) .library-tab-cards-wrap {
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow: visible !important;
}

body.projects-dashboard .dashboard-reel-toolbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 16px var(--unified-edge) 20px;
    gap: 18px;
    border: 0;
    background: var(--unified-surface);
    box-sizing: border-box;
    font-family: "Avenir Next", "Segoe UI", sans-serif;
}

body.projects-dashboard .dashboard-reel-new-project {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin: 0;
    padding: 0;
    gap: 11px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #7c8998 !important;
    box-shadow: none !important;
    font: 400 0.95rem/1 "Avenir Next", "Segoe UI", sans-serif;
}

body.projects-dashboard .dashboard-reel-new-project-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #d2dbe5;
    border-radius: 50%;
    color: #8c98a5;
    font-size: 1.6rem;
}

body.projects-dashboard .dashboard-reel-scroll-next {
    display: none !important;
}

/* Reuse the original menu in the narrow overview toolbar, below Activity. */
body.projects-dashboard .dashboard-reel-toolbar > .dashboard-mobile-overview-menu {
    display: block;
    flex: 0 0 44px;
    width: 44px;
    margin: 0 0 0 auto;
}

body.projects-dashboard .dashboard-mobile-overview-menu > #dashboard-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

body.projects-dashboard .dashboard-mobile-overview-menu > #dashboard-menu-btn:focus-visible {
    outline: 2px solid var(--unified-muted);
    outline-offset: 2px;
}

body.projects-dashboard .dashboard-mobile-overview-menu > .dashboard-menu-popover {
    position: fixed;
    z-index: 150;
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - var(--unified-header-height) - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    background: var(--unified-surface);
    padding: 0;
    gap: 0;
}

body.projects-dashboard .dashboard-mobile-overview-menu .modules-menu {
    width: 100%;
}

body.projects-dashboard .dashboard-mobile-overview-menu .dashboard-menu-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--unified-border);
    border-radius: 0;
    background: transparent;
    color: var(--unified-ink);
    box-shadow: none;
    font: 400 1rem/1.3 "Avenir Next", "Segoe UI", sans-serif;
    box-sizing: border-box;
}

body.projects-dashboard .dashboard-mobile-overview-menu .dashboard-menu-link:is(:hover, :focus-visible, [aria-expanded="true"]) {
    background: var(--unified-control);
}

/* Mobile Audio subtype switch: reuse the existing toolbar controls and filter
   handlers. Hide only the duplicate selector that occupies a grid cell. */
@media (max-width: 899px) {
    body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .library-audio-filter-row {
        display: none !important;
    }

    body.projects-dashboard .dashboard-reel-toolbar[data-active-mode="audio"] {
        gap: 8px;
        /* Keep enlarged text usable on the smallest screens without clipping. */
        flex-wrap: wrap;
    }

    body.projects-dashboard .dashboard-reel-toolbar[data-active-mode="audio"] .dashboard-reel-toolbar-start {
        flex: 0 0 auto;
    }

    body.projects-dashboard .dashboard-reel-toolbar[data-active-mode="audio"] .dashboard-audio-switch:not([hidden]) {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        gap: 3px;
        margin-left: auto;
    }

    body.projects-dashboard .dashboard-audio-switch button {
        appearance: none;
        padding: 0;
        border: 0;
        box-shadow: none;
        font: 400 0.7rem/1.2 "Avenir Next", "Segoe UI", sans-serif;
        background: transparent;
        color: #7c8998;
        min-height: 44px;
        cursor: pointer;
    }

    body.projects-dashboard .dashboard-audio-switch .dashboard-audio-switch-label[aria-pressed="true"] {
        color: #51677f;
    }

    body.projects-dashboard .dashboard-audio-switch button:is(:hover, :focus, :active) {
        background: transparent;
        box-shadow: none;
    }

    body.projects-dashboard .dashboard-audio-switch button:focus-visible {
        outline: 2px solid #8fb0d2;
        outline-offset: 2px;
    }

    body.projects-dashboard .dashboard-audio-switch .dashboard-audio-switch-control {
        width: 40px;
        min-width: 40px;
        position: relative;
    }

    /* The small visual track sits inside the full-height touch target. */
    body.projects-dashboard .dashboard-audio-switch-control::before {
        content: "";
        position: absolute;
        width: 36px;
        height: 22px;
        left: 2px;
        top: 11px;
        border-radius: 999px;
        background: #f8f5f1;
        box-shadow: inset 0 0 0 1px #d2dbe4;
    }

    body.projects-dashboard .dashboard-audio-switch-control span {
        position: absolute;
        top: 14px;
        left: 5px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #9db9d8;
    }

    body.projects-dashboard .dashboard-audio-switch-control[aria-checked="true"] span {
        transform: translateX(14px);
    }
}
/* End mobile Audio subtype switch. */

body.projects-dashboard .library-tab-cards:not([hidden]),
body.projects-dashboard .portfolio-dashboard-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: max-content;
    align-items: start;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--unified-edge) 20px;
    gap: clamp(26px, 4vw, 38px) clamp(16px, 3vw, 30px);
    overflow: visible;
    border: 0;
    background: var(--unified-surface);
    box-sizing: border-box;
}

body.projects-dashboard .library-tab-cards[hidden] {
    display: none !important;
}

/* Portfolio retains its existing nested host. The outer library wrapper must
   not consume one of the two card columns itself. */
body.projects-dashboard .library-tab-cards[data-library-tab-cards="portfolio"]:not([hidden]) {
    display: block !important;
    padding: 0;
}

/* Grid below 900px is one stable presentation. The toolbar owns creation;
   the inline form occupies a grid cell only while that toolbar control is open.
   Folder focus and Audio subtype filtering must still own card visibility;
   their hidden states take precedence over the flex-card presentation below. */
body.projects-dashboard .library-tab-cards .project-folder-card.is-grid-page-hidden,
body.projects-dashboard .portfolio-dashboard-cards .project-folder-card.is-grid-page-hidden,
body.projects-dashboard .library-tab-cards .project-folder-card.is-dashboard-folder-focus-hidden,
body.projects-dashboard .portfolio-dashboard-cards .project-folder-card.is-dashboard-folder-focus-hidden,
body.projects-dashboard .library-tab-cards .project-folder-card[hidden],
body.projects-dashboard .portfolio-dashboard-cards .project-folder-card[hidden],
body.projects-dashboard .library-tab-cards .project-create-card:not(.is-reel-create-open),
body.projects-dashboard .portfolio-dashboard-cards .project-create-card:not(.is-reel-create-open) {
    display: none !important;
}

body.projects-dashboard .library-tab-cards > .project-folder-card,
body.projects-dashboard .portfolio-dashboard-cards > .project-folder-card {
    position: relative;
    display: flex !important;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto !important;
    min-height: 0 !important;
    margin: 0;
    padding: 0;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

/* Beat the higher-specificity folder-tab rules in the retired phone renderer.
   These resets remain inside this <900px stylesheet and leave desktop cards
   untouched. */
body.projects-dashboard:not(.dashboard-list-view) .project-folder-card.project-create-card:is(.mode-video, .mode-photo, .mode-files, .mode-audio, .mode-blog, .mode-portfolio),
body.projects-dashboard:not(.dashboard-list-view) .project-folder-card.project-group-card.mode-blog,
body.projects-dashboard:not(.dashboard-list-view) .project-folder-card.portfolio-site-card.mode-portfolio {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.projects-dashboard .library-tab-cards > .project-folder-card > .folder-head-row,
body.projects-dashboard .portfolio-dashboard-cards > .project-folder-card > .folder-head-row {
    display: none !important;
}

body.projects-dashboard .library-tab-cards > .project-folder-card.project-group-card > .folder-head-row {
    order: 2;
    position: static;
    display: block !important;
    width: 100% !important;
    min-height: 0;
    margin: 9px 2px 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: auto;
    transform: none !important;
}

body.projects-dashboard .project-folder-card.project-group-card > .folder-head-row .folder-top {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

body.projects-dashboard .project-folder-card.project-group-card > .folder-head-row :is(.folder-top-label, .folder-top-divider, .folder-top-meta) {
    display: none !important;
}

body.projects-dashboard .project-folder-card.project-group-card > .folder-head-row .folder-top-name {
    display: block;
    position: static;
    max-width: 100%;
    overflow: hidden;
    color: #263548;
    font: 500 clamp(0.82rem, 2.2vw, 0.98rem)/1.25 "Avenir Next", "Segoe UI", sans-serif;
    text-overflow: ellipsis;
    text-shadow: none;
    transform: none;
    white-space: nowrap;
}

body.projects-dashboard:not(.dashboard-list-view) .project-folder-card.project-group-card.mode-blog > .folder-head-row {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    margin: 9px 2px 0 !important;
    transform: none !important;
}

body.projects-dashboard:not(.dashboard-list-view) .project-folder-card.project-group-card.mode-blog > .folder-head-row .folder-top {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body.projects-dashboard .library-tab-cards > .project-folder-card > .folder-body,
body.projects-dashboard .portfolio-dashboard-cards > .project-folder-card > .folder-body {
    order: 1;
    position: relative;
    width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}

/* Legacy phone CSS shadows the whole body, including the project name.
   Keep the thumbnail shadow, and leave folder/group presentation untouched. */
body.projects-dashboard:not(.dashboard-list-view) .library-tab-cards .project-folder-card:not(.project-create-card):not(.project-group-card):not(.portfolio-folder-card) > .folder-body {
    box-shadow: none;
}

/* Mobile playlist card background: beat the playlist-specific legacy white
   body without changing the thumbnail, folder/create cards or desktop. */
@media (max-width: 899px) {
    body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-folder-card.mode-audio.is-playlist-project:not(.project-group-card):not(.project-create-card) > .folder-body {
        background: transparent;
    }
}
/* End mobile playlist card background. */

body.projects-dashboard .project-folder-card .folder-preview {
    position: relative;
    isolation: isolate;
    display: grid;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1.7;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #d8e0e8;
    border-radius: 12px;
    background: #f0f1ef;
    box-shadow: 0 2px 8px rgba(38, 55, 72, 0.05);
}

body.projects-dashboard .project-folder-card .folder-preview :is(.folder-preview-img, .folder-preview-video),
body.projects-dashboard .project-folder-card .folder-preview > :is(img, video, canvas) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.projects-dashboard .project-folder-card :is(.dashboard-list-row-meta, .folder-list-meta, .folder-list-group-title),
body.projects-dashboard .project-create-card :is(.dashboard-list-create-name-slot, .dashboard-list-create-filetype, .dashboard-list-create-updated, .create-actions-spacer) {
    display: none !important;
}

body.projects-dashboard .project-folder-card .reel-card-title {
    position: static;
    order: 2;
    display: block;
    max-width: 100%;
    margin: 9px 2px 0;
    overflow: hidden;
    color: #263548;
    font: 500 clamp(0.82rem, 2.2vw, 0.98rem)/1.25 "Avenir Next", "Segoe UI", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

body.projects-dashboard .project-folder-card .reel-card-title-input:not([hidden]) {
    order: 2;
    display: block;
    width: 100%;
    height: 32px;
    margin: 5px 0 0;
    padding: 0 8px;
    border: 1px solid var(--unified-border);
    border-radius: 8px;
    background: #fff;
    color: #263548;
    font: 500 0.9rem/1 "Avenir Next", "Segoe UI", sans-serif;
    box-sizing: border-box;
}

body.projects-dashboard .project-folder-card:not(.project-create-card) > .folder-body > .folder-actions-row {
    position: absolute;
    z-index: 7;
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    aspect-ratio: 1.7;
    margin: 0;
    padding: 0;
    gap: clamp(18px, 4vw, 38px);
    border: 0;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

body.projects-dashboard:not(.dashboard-list-view) .project-folder-card.project-group-card.mode-blog > .folder-body > .folder-actions-row.project-group-actions,
body.projects-dashboard:not(.dashboard-list-view) .project-folder-card.portfolio-site-card.mode-portfolio > .folder-body > .folder-actions-row {
    position: absolute !important;
    inset: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-template: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1.7;
    margin: 0 !important;
    padding: 0 !important;
    gap: clamp(12px, 3vw, 30px) !important;
    transform: none !important;
}

body.projects-dashboard .project-folder-card:not(.project-create-card) > .folder-body::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0 0 auto;
    width: 100%;
    aspect-ratio: 1.7;
    border-radius: 12px;
    background: rgba(10, 20, 31, 0);
    pointer-events: none;
    transition: background 160ms ease;
}

body.projects-dashboard .project-folder-card:not(.project-create-card).is-selected > .folder-body::before {
    background: rgba(10, 20, 31, 0.66);
}

body.projects-dashboard .project-folder-card .folder-actions-row > .folder-preview-btn:not(.portfolio-mobile-preview-btn) {
    display: none !important;
}

body.projects-dashboard .project-folder-card .folder-actions-row .project-card-menu,
body.projects-dashboard .project-folder-card .folder-actions-row > .folder-open-btn {
    position: static;
    flex: 0 0 64px;
    width: 64px !important;
    min-width: 64px;
}

body.projects-dashboard:not(.dashboard-list-view) .project-folder-card.project-group-card.mode-blog .folder-actions-row .project-group-settings-menu,
body.projects-dashboard:not(.dashboard-list-view) .project-folder-card.portfolio-site-card.mode-portfolio .folder-actions-row .project-card-menu {
    display: block !important;
    position: static !important;
}

body.projects-dashboard .project-folder-card .folder-actions-row .project-settings-btn,
body.projects-dashboard .project-folder-card .folder-actions-row > .folder-open-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 64px !important;
    min-width: 64px !important;
    height: 60px !important;
    min-height: 60px !important;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    font: 400 0.78rem/1 "Avenir Next", "Segoe UI", sans-serif !important;
    text-decoration: none;
}

body.projects-dashboard .project-folder-card .folder-actions-row .project-settings-btn::after {
    content: var(--interface-settings-caption, "Settings");
}

body.projects-dashboard .project-folder-card .folder-actions-row .project-settings-icon-img {
    width: 27px;
    height: 27px;
    filter: brightness(0) invert(1);
}

body.projects-dashboard .project-folder-card .folder-actions-row > .folder-open-btn::before {
    content: "";
    display: block;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    background: center / 22px 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
}

body.projects-dashboard .project-folder-card .project-card-menu-popover {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: 50%;
    bottom: auto;
    width: min(220px, calc(100% - 38px));
    padding: 0;
    gap: 7px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: translate(-50%, -50%);
}

body.projects-dashboard .project-folder-card .project-card-menu-popover[hidden] {
    display: none !important;
}

body.projects-dashboard .project-folder-card .project-card-menu-popover .project-action-btn {
    width: 100% !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(214, 224, 235, 0.92) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #233346 !important;
    box-shadow: 0 2px 8px rgba(16, 29, 43, 0.12) !important;
    font: 400 0.82rem/1 "Avenir Next", "Segoe UI", sans-serif !important;
}

body.projects-dashboard .project-folder-card .project-card-menu-popover .delete-project-btn {
    color: #bd3c3c !important;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="portfolio"] .portfolio-dashboard-cards > .portfolio-site-card .portfolio-persistent-preview-btn {
    position: absolute;
    right: 0;
    bottom: -6px;
    z-index: 9;
    display: inline-grid !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #51677f !important;
    box-shadow: none !important;
    pointer-events: auto;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="portfolio"] .portfolio-site-card .reel-card-title {
    padding-right: 38px;
    box-sizing: border-box;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="portfolio"] .portfolio-site-card .portfolio-card-preview-caption {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 18%;
    z-index: 8;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 160ms ease;
    pointer-events: none;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="portfolio"] .portfolio-site-card .portfolio-card-preview-caption span {
    color: #ffffff;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="portfolio"] .portfolio-site-card:is(:hover, :focus-within) .portfolio-card-preview-caption,
body.projects-dashboard .library-tab-cards[data-library-tab-cards="portfolio"] .portfolio-site-card:has(.project-card-menu-popover:not([hidden])) .portfolio-card-preview-caption {
    opacity: 1;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="portfolio"] .portfolio-site-card .portfolio-persistent-preview-btn .portfolio-preview-eye-icon {
    display: block;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="portfolio"] .portfolio-site-card .portfolio-persistent-preview-btn .portfolio-preview-label,
body.projects-dashboard .library-tab-cards[data-library-tab-cards="portfolio"] .portfolio-site-card .folder-actions-row > .portfolio-mobile-preview-btn {
    display: none !important;
}

body.projects-dashboard:not(.dashboard-list-view) .project-folder-card.portfolio-site-card.mode-portfolio .portfolio-card-preview {
    opacity: 1 !important;
}

/* Files mobile thumbnails retain the desktop Grid composition. Scope to the
   Files host: Audio shares the live-row classes. Expanded folders, creation,
   editors and the card's existing action surface are deliberately excluded. */
body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-folder-card.mode-files:not(.project-create-card):not(.is-expanded) > .folder-body > .folder-preview {
    container-type: inline-size;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-folder-card.mode-files:not(.project-create-card):not(.is-expanded) .folder-preview > .dashboard-files-artwork[data-artwork-view="50"] {
    display: block;
    object-position: center 88%;
    border-radius: inherit;
    pointer-events: none;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-folder-card.mode-files .folder-preview > .dashboard-files-artwork[data-artwork-failed] {
    visibility: hidden;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-folder-card.mode-files:not(.project-group-card):not(.project-create-card):not(.is-expanded) .folder-preview > .files-live-preview {
    position: absolute;
    inset: clamp(4px, 3cqw, 12px);
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    gap: clamp(2px, 1.5cqw, 6px);
    grid-template-rows: repeat(4, minmax(0, 1fr));
    z-index: 1;
    pointer-events: none;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-folder-card.mode-files:not(.project-group-card):not(.project-create-card):not(.is-expanded) .files-live-row {
    min-width: 0;
    padding: clamp(0px, 0.5cqw, 2px) clamp(3px, 2cqw, 8px);
    border-radius: clamp(4px, 2cqw, 8px);
    background: rgba(249, 248, 246, 0.24);
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-folder-card.mode-files:not(.project-group-card):not(.project-create-card):not(.is-expanded) .files-live-main {
    gap: 0;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-folder-card.mode-files:not(.project-group-card):not(.project-create-card):not(.is-expanded) .files-live-name {
    font-size: clamp(6px, 4cqw, 11px);
    line-height: 1;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-folder-card.mode-files:not(.project-group-card):not(.project-create-card):not(.is-expanded) .files-live-count {
    font-size: clamp(5px, 3.4cqw, 9px);
    line-height: 1;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-folder-card.mode-files:not(.project-group-card):not(.project-create-card):not(.is-expanded) .folder-preview > .files-live-preview:has(> .folder-preview-empty) {
    grid-template-rows: minmax(0, 1fr);
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-folder-card.mode-files:not(.project-create-card):not(.is-expanded) .folder-preview-empty {
    min-width: 0;
    min-height: 0;
    padding: 4px;
    box-sizing: border-box;
    gap: 3px;
    overflow-wrap: anywhere;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-folder-card.mode-files:not(.project-create-card):not(.is-expanded) .folder-preview-empty-title {
    font-size: clamp(8px, 4.5cqw, 13px);
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-folder-card.mode-files:not(.project-create-card):not(.is-expanded) .folder-preview-empty-subtitle {
    font-size: clamp(7px, 3.8cqw, 11px);
}

/* Like desktop Grid, loading shows the artwork, not full-sized skeleton rows. */
body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-folder-card.mode-files:not(.project-group-card):not(.project-create-card):not(.is-expanded) .folder-preview > .files-live-preview-loading {
    display: none;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-group-card.mode-files:not(.is-expanded) .folder-preview > .project-group-files-name-list {
    display: none;
}

/* Empty folders retain their existing fallback if the artwork cannot load. */
body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-group-card.mode-files:not(.is-expanded) .folder-preview:has(> .dashboard-files-artwork[data-artwork-view="50"][data-artwork-ready]) > .project-group-preview-mosaic {
    display: none;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-group-card.mode-files:not(.is-expanded) .folder-preview > .dashboard-files-artwork[data-artwork-view="50"] {
    object-position: center;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-group-card.mode-files:not(.is-expanded) .dashboard-group-projects-preview {
    display: block;
    position: absolute;
    inset: clamp(5px, 4cqw, 16px) auto auto clamp(5px, 4cqw, 16px);
    width: 38%;
    max-height: 85%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    font: 400 clamp(6px, 4cqw, 12px)/1.12 "Avenir Next", "Segoe UI", sans-serif;
    color: #485e74;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-group-card.mode-files:not(.is-expanded) .dashboard-group-projects-heading {
    margin: 0 0 2px;
    font: inherit;
    color: #1c2e44;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-group-card.mode-files:not(.is-expanded) .dashboard-group-projects-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #778ca5;
    font-size: clamp(5px, 3.4cqw, 10px);
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-group-card.mode-files:not(.is-expanded) .dashboard-group-project-row {
    display: flex;
    gap: 3px;
    min-width: 0;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-group-card.mode-files:not(.is-expanded) .dashboard-group-project-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="files"] > .project-group-card.mode-files:not(.is-expanded) :is(.dashboard-group-project-name-audio-grid, .dashboard-audio-title-short) {
    display: none;
}

/* Audio mobile Grid uses the existing resolved cover/default Grid artwork.
   These are dashboard thumbnails, not the editor or shared audio player. */
body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-folder-card.mode-audio:not(.project-create-card):not(.is-expanded) .folder-preview > .dashboard-audio-artwork:is([data-artwork-view="50"], [data-artwork-view="custom"]) {
    display: block;
    object-position: center;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-group-card.mode-audio:not(.is-expanded) .folder-preview > .dashboard-audio-artwork {
    object-position: center 70%;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-folder-card.mode-audio .folder-preview > .dashboard-audio-artwork[data-artwork-failed] {
    visibility: hidden;
}

/* Keep the existing DOM/data and handlers, but do not expose the legacy
   waveform/count or hover-information layers on the mobile Grid thumbnail. */
body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-folder-card.mode-audio:not(.project-create-card):not(.is-expanded) .folder-preview:has(> .dashboard-audio-artwork) > :is(.files-live-preview, .project-group-audio-name-list, .dashboard-audio-grid-titles, .dashboard-group-projects-preview) {
    display: none;
}

/* Notes keep their content/artwork preview instead of the retired phone
   stylesheet's empty tinted panel. */
body.projects-dashboard:not(.dashboard-list-view) .project-folder-card.mode-blog.dashboard-notes-card:not(.project-group-card):not(.project-create-card) .folder-preview > .dashboard-notes-preview {
    display: block !important;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}

/* Notes mobile Grid follows the desktop title/date/three-line excerpt, not
   the media-rich Reel miniature. Collection artwork is intentionally separate. */
body.projects-dashboard .library-tab-cards[data-library-tab-cards="blog"] > .project-folder-card.dashboard-notes-card:not(.project-group-card):not(.project-create-card) .folder-preview {
    container-type: inline-size;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="blog"] > .project-folder-card.dashboard-notes-card:not(.project-group-card):not(.project-create-card) .blog-card-mini-page {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(7px, 8cqw, 26px);
    gap: clamp(2px, 1cqw, 4px);
    border-radius: inherit;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="blog"] > .project-folder-card.dashboard-notes-card:not(.project-group-card):not(.project-create-card) :is(.blog-card-mini-subtitle, .blog-card-mini-media-row) {
    display: none;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="blog"] > .project-folder-card.dashboard-notes-card:not(.project-group-card):not(.project-create-card) .blog-card-mini-page h4 {
    flex-shrink: 0;
    font-size: clamp(11px, 8.4cqw, 26px);
    line-height: 1.05;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="blog"] > .project-folder-card.dashboard-notes-card:not(.project-group-card):not(.project-create-card) .blog-card-mini-date {
    flex-shrink: 0;
    font-size: clamp(5px, 3.1cqw, 9px);
    line-height: 1.2;
}

body.projects-dashboard .library-tab-cards[data-library-tab-cards="blog"] > .project-folder-card.dashboard-notes-card:not(.project-group-card):not(.project-create-card) :is(.blog-card-mini-text, .blog-card-mini-empty) {
    flex-shrink: 0;
    margin-top: 0;
    font-size: clamp(5.5px, 3.5cqw, 11px);
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 3;
}

body.projects-dashboard:not(.dashboard-list-view) .project-folder-card.project-group-card.mode-blog.dashboard-notes-card:not(.is-expanded) .folder-preview > .dashboard-notes-collection-artwork-grid-list {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.projects-dashboard:not(.dashboard-list-view) .project-folder-card.project-group-card.mode-blog.dashboard-notes-card .folder-preview > :is(.dashboard-notes-collection-artwork-reel, .project-group-preview-mosaic, .dashboard-group-projects-preview) {
    display: none !important;
}

body.projects-dashboard .project-create-card.is-reel-create-open > .folder-body {
    padding-bottom: 0;
}

body.projects-dashboard .project-create-card .folder-preview.create-project-preview {
    overflow: visible;
    border-color: #deded9;
    background: linear-gradient(180deg, #f7f7f4 0%, #ecece8 100%);
    box-shadow: none;
}

body.projects-dashboard .project-create-card .create-project-empty-wrap {
    position: absolute;
    inset: 0;
    overflow: visible;
}

body.projects-dashboard .project-create-card .create-project-name-input {
    background: #fff !important;
    color: #263548 !important;
}

body.projects-dashboard .project-create-card .create-project-inline-add {
    background: transparent !important;
    color: #8292a3 !important;
}

body.projects-dashboard .dashboard-reel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: clamp(28px, 5vh, 52px) var(--unified-edge) 0;
    padding: 22px 4px 0;
    border-top: 1px solid #d7e0e9;
    color: #66788c;
    font: 400 0.9rem/1.3 "Avenir Next", "Segoe UI", sans-serif;
}

body.projects-dashboard .dashboard-grid-pagination {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.projects-dashboard .dashboard-grid-page-btn {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--unified-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #7890a8 !important;
    box-shadow: none !important;
}

body.projects-dashboard .dashboard-grid-page-btn:disabled {
    opacity: 0.5;
}

/* Every narrow viewport uses the same single-action cards, including a mouse
   in a resized desktop window. Retain the real anchor/button and its handlers
   as the thumbnail hit target; the shared click helper covers the name area. */
body.projects-dashboard .project-folder-card:not(.project-create-card) > .folder-body > .folder-actions-row {
    opacity: 1;
    pointer-events: none;
}

body.projects-dashboard .project-folder-card:not(.project-create-card) > .folder-body > .folder-actions-row > .folder-open-btn {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    opacity: 0;
    pointer-events: auto;
}

body.projects-dashboard .library-tab-cards .project-folder-card:not(.project-create-card) > .folder-body > .folder-actions-row .project-card-menu {
    display: none !important;
}

/* Open folders use their existing Close Folder button as the visible surface.
   Keep its original handlers and label; suppress only the legacy colored
   overlay and duplicate preview control. Closed folders and projects retain
   their existing thumbnail/action presentation. */
body.projects-dashboard .library-tab-cards .project-folder-card:is(.project-group-card, .portfolio-folder-card):not(.project-create-card).is-expanded > .folder-body {
    background: transparent;
}

body.projects-dashboard .library-tab-cards .project-folder-card:is(.project-group-card, .portfolio-folder-card).is-expanded > .folder-body::after {
    display: none;
}

body.projects-dashboard .library-tab-cards .project-folder-card:is(.project-group-card, .portfolio-folder-card).is-expanded > .folder-body > .folder-preview {
    background: #05080c;
    border-radius: 12px;
}

body.projects-dashboard .library-tab-cards .project-folder-card:is(.project-group-card, .portfolio-folder-card).is-expanded > .folder-body > .folder-preview > .project-group-close-surface {
    display: none !important;
}

/* Portfolio's compact-card rule hides this wrapper, unlike the other modes. */
body.projects-dashboard .library-tab-cards .project-folder-card.portfolio-folder-card.is-expanded > .folder-body > .folder-actions-row {
    display: flex !important;
}

body.projects-dashboard .library-tab-cards .project-folder-card:is(.project-group-card, .portfolio-folder-card).is-expanded > .folder-body > .folder-actions-row > .folder-close-btn {
    opacity: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #05080c !important;
    border-radius: 12px !important;
}

body.projects-dashboard .library-tab-cards .project-folder-card:is(.project-group-card, .portfolio-folder-card).is-expanded > .folder-body > .folder-actions-row > .folder-close-btn::before {
    display: none;
}

/* Keyboard activation still uses the original Open control. Draw its focus
   on the visible thumbnail rather than resurrecting the hover overlay. */
body.projects-dashboard .project-folder-card:not(.project-create-card) > .folder-body:has(> .folder-actions-row > .folder-open-btn:focus-visible) > .folder-preview {
    outline: 2px solid var(--unified-muted);
    outline-offset: 2px;
}

/* Embedded Photo/Video projects keep their existing controls and data hooks;
   only their presentation changes below the desktop breakpoint. */
body.review-admin[data-dashboard-embedded-workspace="1"] {
    min-width: 0;
    overflow-x: hidden;
    background: #fff;
}

body.review-admin[data-dashboard-embedded-workspace="1"] > main.layout {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    padding: 96px var(--unified-edge) 34px;
    box-sizing: border-box;
}

body.review-admin[data-dashboard-embedded-workspace="1"] .project-header-sticky {
    position: fixed;
    z-index: 100;
    inset: 0 0 auto;
    width: 100%;
    max-width: none;
    min-height: 80px;
    margin: 0;
    padding: 18px var(--unified-edge);
    border: 0;
    background: #fff;
    box-shadow: none;
    box-sizing: border-box;
}

body.review-admin[data-dashboard-embedded-workspace="1"] .project-header-sticky > .topbar {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

body.review-admin[data-dashboard-embedded-workspace="1"] .project-title-meta-row {
    display: none !important;
}

body.review-admin[data-dashboard-embedded-workspace="1"] .topbar-actions,
body.review-admin[data-dashboard-embedded-workspace="1"]:is(.photo-selection-active, .video-selection-active, .photo-favorites-active) .topbar-actions {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap !important;
    gap: 8px;
    border: 0;
    background: transparent;
}

body.review-admin[data-dashboard-embedded-workspace="1"] .topbar-actions #dropzone.topbar-upload-dropzone {
    position: static;
    display: flex !important;
    order: -1;
    width: auto !important;
    max-width: none !important;
    min-height: 42px;
    margin: 0 auto 0 0;
    padding: 0 12px;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    transform: none;
    box-shadow: none;
}

body.review-admin[data-dashboard-embedded-workspace="1"] .topbar-actions #dropzone.topbar-upload-dropzone > p {
    margin: 0;
    white-space: nowrap;
}

body.review-admin[data-dashboard-embedded-workspace="1"] .topbar-actions :is(
    #photo-names-toggle-btn,
    #show-favorites-btn,
    #add-layout-spacer-btn,
    #video-grid-scale-toggle-btn,
    #topbar-preview-btn,
    #share-client-btn
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 48px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--unified-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #23364b !important;
    box-shadow: none !important;
    font: 400 0.88rem/1 "Avenir Next", "Segoe UI", sans-serif !important;
}

body.review-admin[data-dashboard-embedded-workspace="1"] .topbar-actions .dashboard-return-btn {
    display: none !important;
}

/* Notes keeps its switching hook in the DOM while presenting the compact
   left/right toolbar used by the desktop project rail. */
body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .topbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap !important;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-project-left-controls,
body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-project-right-controls {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-project-left-controls {
    justify-self: start;
    gap: 8px;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-project-right-controls {
    justify-self: end;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .dashboard-blog-select {
    display: none !important;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-project-left-controls > .blog-add-language-btn,
body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-project-left-controls .blog-language-select {
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    border: 1px solid var(--unified-border) !important;
    border-radius: 13px !important;
    background-color: #fff !important;
    color: #23364b !important;
    box-shadow: none !important;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-project-left-controls > .blog-add-language-btn:is(:hover, :focus-visible),
body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-project-left-controls .blog-language-select:is(:hover, :focus-visible) {
    background-color: #edf4fb !important;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-project-left-controls > .blog-add-language-btn {
    padding: 0 14px !important;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-project-left-controls .blog-language-select {
    min-width: 118px;
    padding-left: 13px !important;
    padding-right: 38px !important;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-connected-actions {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-connected-actions > [hidden] {
    display: none !important;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-connected-actions > :is(.blog-editor-scale-toggle, .blog-public-link, .blog-share-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-width: 48px;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--unified-border) !important;
    border-right-width: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #23364b !important;
    box-shadow: none !important;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-connected-actions > :is(.blog-editor-scale-toggle, .blog-public-link, .blog-share-btn):is(:hover, :focus-visible) {
    background: #edf4fb !important;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-connected-actions > .blog-editor-scale-toggle {
    width: 66px;
    min-width: 66px;
    border-radius: 13px 0 0 13px !important;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-connected-actions > .blog-connected-icon {
    overflow: hidden;
    font-size: 0 !important;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-connected-actions > .blog-connected-share {
    border-right-width: 1px !important;
    border-radius: 0 13px 13px 0 !important;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-connected-actions:has(> .blog-public-link[hidden]):has(> .blog-share-btn[hidden]) > .blog-editor-scale-toggle {
    border-right-width: 1px !important;
    border-radius: 13px !important;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-connected-icon::before {
    content: "";
    display: block;
    width: 21px;
    height: 21px;
    margin: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-connected-preview::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d7590' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.3 12s3.4-6 9.7-6 9.7 6 9.7 6-3.4 6-9.7 6-9.7-6-9.7-6Z'/%3E%3Ccircle cx='12' cy='12' r='2.7'/%3E%3C/svg%3E");
}

body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-connected-share::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d7590' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='2.4'/%3E%3Ccircle cx='6' cy='12' r='2.4'/%3E%3Ccircle cx='18' cy='19' r='2.4'/%3E%3Cpath d='m8.1 10.8 7.8-4.6M8.1 13.2l7.8 4.6'/%3E%3C/svg%3E");
}

body.review-admin[data-dashboard-embedded-workspace="1"] :is(.photo-favorites-left-controls, .photo-selection-actions, .video-selection-actions) {
    align-items: center;
    min-width: 0;
    gap: 8px;
}

body.review-admin[data-dashboard-embedded-workspace="1"] #video-grid.video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: clamp(18px, 3vw, 28px);
    box-sizing: border-box;
}

body.review-admin[data-dashboard-embedded-workspace="1"] #video-grid.video-grid > .clip-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
}

/* On touch widths the Photo settings control must remain a small overlay;
   without this rule it inherited the retired green mobile action style. */
body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"] .photo-card-menu-btn {
    position: absolute !important;
    z-index: 8;
    right: 10px !important;
    bottom: 10px !important;
    left: auto !important;
    top: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    min-width: 34px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    border-radius: 9px !important;
    background: rgba(16, 27, 40, 0.62) !important;
    color: #fff !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"] .photo-card-menu-btn::before,
body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"] .photo-card-menu-btn::after {
    background-color: currentColor;
}

@media (max-width: 640px) {
    body.review-admin[data-dashboard-embedded-workspace="1"] > main.layout {
        padding-top: 146px;
    }

    body.review-admin[data-dashboard-embedded-workspace="1"] .project-header-sticky {
        min-height: 132px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    body.review-admin[data-dashboard-embedded-workspace="1"] .topbar-actions,
    body.review-admin[data-dashboard-embedded-workspace="1"]:is(.photo-selection-active, .video-selection-active, .photo-favorites-active) .topbar-actions {
        justify-content: center;
    }

    body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] > main.layout {
        padding-top: 158px;
    }

    body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .project-header-sticky {
        min-height: 144px;
    }

    body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .topbar-actions {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-project-left-controls,
    body.review-admin[data-project-mode="blog"][data-dashboard-embedded-workspace="1"] .blog-project-right-controls {
        justify-self: start;
    }

    body.review-admin[data-dashboard-embedded-workspace="1"][data-project-mode] .project-header-sticky .topbar-actions #dropzone.topbar-upload-dropzone {
        position: static !important;
        flex: 1 0 100% !important;
        flex-basis: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        inset: auto !important;
        transform: none !important;
    }

    body.review-admin[data-dashboard-embedded-workspace="1"] #video-grid.video-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Upload-only Video toolbar. Opt-in class is owned by the presentation module;
   Photo, other editors, standalone Video and desktop keep their existing UI. */
body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar > main.layout {
    padding-top: var(--dashboard-mobile-video-toolbar-offset, 96px) !important;
}

body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar .project-header-sticky {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px var(--unified-edge) !important;
    overflow: visible;
}

body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar .project-header-sticky .topbar-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    align-items: center;
    gap: 12px !important;
    min-height: 44px;
    overflow: visible;
}

body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar .project-header-sticky .topbar-actions > :not(#dashboard-mobile-video-notice, #dropzone) {
    display: none !important;
}

body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar #dashboard-mobile-video-notice {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin: 0;
    color: #53667d;
    font: 400 0.75rem/1.4 "Avenir Next", "Segoe UI", sans-serif;
    overflow-wrap: anywhere;
    text-align: left;
}

body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar #dashboard-mobile-video-notice > p {
    margin: 0;
    color: inherit;
    font: inherit;
    white-space: normal;
}

/* Keep the original container, picker and event bubbling. Its button occupies
   the right cell; its existing upload status spans a separate full-width row. */
body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar .project-header-sticky .topbar-actions #dropzone.topbar-upload-dropzone {
    display: contents !important;
}

body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar .project-header-sticky #dropzone > p,
body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar .project-header-sticky #dropzone::before,
body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar .project-header-sticky #dropzone::after {
    display: none !important;
}

body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar #dashboard-mobile-video-upload {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    width: 48px !important;
    min-width: 48px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--unified-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #23364b !important;
    box-shadow: none !important;
    cursor: pointer;
}

body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar #dashboard-mobile-video-upload svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar #dashboard-mobile-video-upload:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar :is(#dashboard-mobile-video-upload, .video-inline-upload-cancel):focus-visible {
    outline: 2px solid #53667d;
    outline-offset: 3px;
}

body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar .project-header-sticky #dropzone .video-inline-upload {
    grid-column: 1 / -1;
    grid-row: 2;
    height: auto !important;
    min-width: 0;
    margin: 0;
}

body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar .project-header-sticky #dropzone .video-inline-upload-row {
    height: auto !important;
    font: 400 0.75rem/1.4 "Avenir Next", "Segoe UI", sans-serif;
}

body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar .project-header-sticky #dropzone .video-inline-upload-status {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 4px 8px;
    padding-bottom: 8px;
    height: auto;
}

body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar .project-header-sticky #dropzone .video-inline-upload-name {
    flex: 0 0 100%;
}

body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar .project-header-sticky #dropzone .video-inline-upload-cancel {
    height: auto !important;
    min-height: 44px !important;
    padding: 8px !important;
    color: #23364b !important;
    font: 400 0.75rem/1.4 "Avenir Next", "Segoe UI", sans-serif !important;
}

body.review-admin[data-project-mode="video"][data-dashboard-embedded-workspace="1"].dashboard-mobile-video-toolbar :is(#dashboard-mobile-video-notice, #dashboard-mobile-video-upload-unavailable, #dashboard-mobile-video-upload, .video-inline-upload)[hidden] {
    display: none !important;
}

/* Upload-only Photo toolbar. Its own opt-in class leaves Video, other editors,
   standalone Photo and desktop unchanged; existing upload handlers stay intact. */
body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar > main.layout {
    padding-top: var(--dashboard-mobile-photo-toolbar-offset, 96px) !important;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar .project-header-sticky {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px var(--unified-edge) !important;
    overflow: visible;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar .project-header-sticky .topbar-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    align-items: center;
    gap: 12px !important;
    min-height: 44px;
    overflow: visible;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar .project-header-sticky .topbar-actions > :not(#dashboard-mobile-photo-notice, #dropzone) {
    display: none !important;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar #dashboard-mobile-photo-notice {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin: 0;
    color: #53667d;
    font: 400 0.75rem/1.4 "Avenir Next", "Segoe UI", sans-serif;
    overflow-wrap: anywhere;
    text-align: left;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar #dashboard-mobile-photo-notice > p {
    margin: 0;
    color: inherit;
    font: inherit;
    white-space: normal;
}

/* Keep the original container, picker and event bubbling. Its button occupies
   the right cell; its existing upload status spans a separate full-width row. */
body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar .project-header-sticky .topbar-actions #dropzone.topbar-upload-dropzone {
    display: contents !important;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar .project-header-sticky #dropzone > p,
body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar .project-header-sticky #dropzone::before,
body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar .project-header-sticky #dropzone::after {
    display: none !important;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar #dashboard-mobile-photo-upload {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    width: 48px !important;
    min-width: 48px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--unified-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #23364b !important;
    box-shadow: none !important;
    cursor: pointer;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar #dashboard-mobile-photo-upload svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar #dashboard-mobile-photo-upload:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar :is(#dashboard-mobile-photo-upload, .video-inline-upload-cancel):focus-visible {
    outline: 2px solid #53667d;
    outline-offset: 3px;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar .project-header-sticky #dropzone .video-inline-upload {
    grid-column: 1 / -1;
    grid-row: 2;
    height: auto !important;
    min-width: 0;
    margin: 0;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar .project-header-sticky #dropzone .video-inline-upload-row {
    height: auto !important;
    font: 400 0.75rem/1.4 "Avenir Next", "Segoe UI", sans-serif;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar .project-header-sticky #dropzone .video-inline-upload-status {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 4px 8px;
    padding-bottom: 8px;
    height: auto;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar .project-header-sticky #dropzone .video-inline-upload-name {
    flex: 0 0 100%;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar .project-header-sticky #dropzone .video-inline-upload-cancel {
    height: auto !important;
    min-height: 44px !important;
    padding: 8px !important;
    color: #23364b !important;
    font: 400 0.75rem/1.4 "Avenir Next", "Segoe UI", sans-serif !important;
}

body.review-admin[data-project-mode="photo"][data-dashboard-embedded-workspace="1"].dashboard-mobile-photo-toolbar :is(#dashboard-mobile-photo-notice, #dashboard-mobile-photo-upload-unavailable, #dashboard-mobile-photo-upload, .video-inline-upload)[hidden] {
    display: none !important;
}

/* Sentence-only Files toolbar. Existing controls remain in the DOM and keep
   their state; this opt-in presentation never applies to desktop or standalone. */
@media (max-width: 899px) {
    body.review-admin[data-project-mode="files"][data-dashboard-embedded-workspace="1"].dashboard-mobile-files-toolbar > main.layout {
        padding-top: var(--dashboard-mobile-files-toolbar-offset, 96px) !important;
    }

    body.review-admin[data-project-mode="files"][data-dashboard-embedded-workspace="1"].dashboard-mobile-files-toolbar .project-header-sticky {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 18px var(--unified-edge) !important;
    }

    body.review-admin[data-project-mode="files"][data-dashboard-embedded-workspace="1"].dashboard-mobile-files-toolbar .project-header-sticky .topbar-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        min-height: 0 !important;
    }

    /* Includes upload/ZIP progress and Cancel, even while an operation runs. */
    body.review-admin[data-project-mode="files"][data-dashboard-embedded-workspace="1"].dashboard-mobile-files-toolbar .project-header-sticky .topbar-actions > :not(#dashboard-mobile-files-notice) {
        display: none !important;
    }

    body.review-admin[data-project-mode="files"][data-dashboard-embedded-workspace="1"].dashboard-mobile-files-toolbar #dashboard-mobile-files-notice {
        display: block !important;
        min-width: 0;
        margin: 0;
        color: #53667d;
        font: 400 0.75rem/1.4 "Avenir Next", "Segoe UI", sans-serif;
        overflow-wrap: anywhere;
        white-space: normal;
        text-align: left;
    }

    body.review-admin[data-project-mode="files"][data-dashboard-embedded-workspace="1"].dashboard-mobile-files-toolbar #dashboard-mobile-files-notice[hidden] {
        display: none !important;
    }
}

/* Mobile Audio player toolbar. Keep the original playback buttons and hidden
   controls in place; desktop and standalone projects never opt into this view. */
@media (max-width: 899px) {
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"].dashboard-mobile-audio-toolbar > main.layout {
        padding-top: var(--dashboard-mobile-audio-toolbar-offset, 96px) !important;
    }

    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"].dashboard-mobile-audio-toolbar .project-header-sticky {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 18px var(--unified-edge) !important;
    }

    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"].dashboard-mobile-audio-toolbar .project-header-sticky .topbar-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        min-height: 0 !important;
    }

    /* Includes upload progress/Cancel; running operations retain their state. */
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"].dashboard-mobile-audio-toolbar .topbar-actions > :not(#dashboard-mobile-audio-notice, .audio-connected-actions),
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"].dashboard-mobile-audio-toolbar .audio-connected-actions > :not(.audio-editor-playback-controls) {
        display: none !important;
    }

    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"].dashboard-mobile-audio-toolbar .audio-connected-actions {
        display: block !important;
        justify-self: end;
    }

    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"].dashboard-mobile-audio-toolbar #dashboard-mobile-audio-notice {
        display: block !important;
        min-width: 0;
        margin: 0;
        color: #53667d;
        font: 400 0.75rem/1.4 "Avenir Next", "Segoe UI", sans-serif;
        overflow-wrap: anywhere;
        white-space: normal;
        text-align: left;
    }

    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"].dashboard-mobile-audio-toolbar #dashboard-mobile-audio-notice[hidden] {
        display: none !important;
    }

    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"].dashboard-mobile-audio-toolbar .audio-editor-playback-controls {
        display: flex !important;
        gap: 6px !important;
    }

    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"].dashboard-mobile-audio-toolbar .audio-editor-playback-controls .site-present-audio-mode-btn {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }

    /* Beat legacy mobile-split display:grid!important without changing hidden
       attributes that the organizer/playlist code updates on resize. */
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"].dashboard-mobile-audio-toolbar #audio-main-workspace #audio-library-sidebar,
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"].dashboard-mobile-audio-toolbar #audio-main-workspace #playlist-upload-panel {
        display: none !important;
    }

    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"].dashboard-mobile-audio-toolbar #audio-main-workspace {
        display: block !important;
    }

    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"].dashboard-mobile-audio-toolbar #audio-library-content {
        grid-area: auto !important;
        grid-column: auto !important;
        width: 100% !important;
    }
}
/* End mobile Audio player toolbar. */

/* Mobile Notes project toolbar: opt-in presentation only, not collections or public views. */
@media (max-width: 899px) {
    body.review-admin.blog-project-workspace[data-project-mode="blog"][data-dashboard-embedded-workspace="1"].dashboard-mobile-notes-toolbar > main.layout {
        padding-top: var(--dashboard-mobile-notes-toolbar-offset, 96px) !important;
    }

    body.review-admin.blog-project-workspace[data-project-mode="blog"][data-dashboard-embedded-workspace="1"].dashboard-mobile-notes-toolbar .project-header-sticky {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 18px var(--unified-edge) !important;
    }

    body.review-admin.blog-project-workspace[data-project-mode="blog"][data-dashboard-embedded-workspace="1"].dashboard-mobile-notes-toolbar .project-header-sticky .topbar-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        min-height: 0 !important;
    }

    body.review-admin.blog-project-workspace[data-project-mode="blog"][data-dashboard-embedded-workspace="1"].dashboard-mobile-notes-toolbar .blog-project-left-controls,
    body.review-admin.blog-project-workspace[data-project-mode="blog"][data-dashboard-embedded-workspace="1"].dashboard-mobile-notes-toolbar #blog-public-link,
    body.review-admin.blog-project-workspace[data-project-mode="blog"][data-dashboard-embedded-workspace="1"].dashboard-mobile-notes-toolbar #blog-share-btn {
        display: none !important;
    }

    body.review-admin.blog-project-workspace[data-project-mode="blog"][data-dashboard-embedded-workspace="1"].dashboard-mobile-notes-toolbar .blog-project-right-controls {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
    }

    body.review-admin.blog-project-workspace[data-project-mode="blog"][data-dashboard-embedded-workspace="1"].dashboard-mobile-notes-toolbar #blog-editor-scale-toggle {
        border: 1px solid #cfdae8 !important;
        border-radius: 13px !important;
    }

    body.review-admin.blog-project-workspace[data-project-mode="blog"][data-dashboard-embedded-workspace="1"].dashboard-mobile-notes-toolbar #dashboard-mobile-notes-notice {
        display: block !important;
        grid-column: 1;
        grid-row: 1;
        justify-self: stretch;
        min-width: 0;
        margin: 0;
        color: #53667d;
        font: 400 0.75rem/1.4 "Avenir Next", "Segoe UI", sans-serif;
        overflow-wrap: anywhere;
        white-space: normal;
        text-align: left;
    }

    body.review-admin.blog-project-workspace[data-project-mode="blog"][data-dashboard-embedded-workspace="1"].dashboard-mobile-notes-toolbar #dashboard-mobile-notes-notice[hidden] {
        display: none !important;
    }
}
/* End mobile Notes project toolbar. */

/* Mobile Activity monitor: retain the original controls, event hooks and
   scroll owner. History's optional Clear button may wrap within the scopes. */
@media (max-width: 899px) {
    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px;
    }

    /* Compact only the toolbar: keep card actions unchanged and preserve
       44px tap targets. Very narrow/enlarged-text views may still wrap. */
    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-toolbar button {
        font-size: 0.8rem !important;
        padding: 0 8px !important;
        min-height: 44px;
        min-width: 44px;
    }

    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-toolbar .dashboard-activity-mark-all {
        min-width: 112px;
    }

    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-scopes,
    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-filters {
        gap: 6px;
    }

    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-scopes {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-mark-all {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        white-space: nowrap;
    }

    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-filters {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }

    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 8px;
    }

    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-copy strong,
    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-time {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Expanded comments otherwise retain desktop floats and an absolutely
       positioned action group. Keep all content in the same mobile flow. */
    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-row.is-expanded {
        display: grid;
        grid-template-areas: none;
        padding-right: 18px;
    }

    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-row.is-expanded .dashboard-activity-type {
        float: none;
        width: auto;
        margin-right: 0;
    }

    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-row.is-expanded .dashboard-activity-copy,
    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-row.is-expanded .dashboard-activity-time {
        margin: 0;
    }

    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-row.is-expanded .dashboard-activity-actions {
        position: static;
        width: auto;
    }

    body.projects-dashboard #dashboard-activity-dialog .dashboard-activity-row.is-expanded::after {
        display: none;
    }
}
/* End mobile Activity monitor. */

/* Small-screen admin media controls: the original editor owns every action.
   Only the connected Video/Photo/Audio header opts into this presentation. */
@media (max-width: 899px) {
    body.projects-dashboard .dashboard-project-header-context.dashboard-mobile-header-controls-active {
        grid-template-columns: 48px minmax(0, 1fr) 44px;
        gap: 8px;
    }
    body.projects-dashboard .dashboard-project-header-context.dashboard-mobile-header-controls-audio {
        grid-template-columns: 94px minmax(0, 1fr) 44px;
    }
    body.projects-dashboard .dashboard-mobile-header-controls {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }
    body.projects-dashboard .dashboard-mobile-header-controls-active > .dashboard-project-header-title,
    body.projects-dashboard .dashboard-mobile-header-controls-active > .dashboard-project-header-close {
        grid-row: 1;
    }
    body.projects-dashboard .dashboard-mobile-header-control {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 48px;
        width: 48px !important;
        min-width: 48px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--unified-border) !important;
        border-radius: 14px !important;
        background: transparent !important;
        color: #23364b !important;
        box-shadow: none !important;
        cursor: pointer;
    }
    body.projects-dashboard .dashboard-mobile-header-control svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.4;
        stroke-linecap: round;
        stroke-linejoin: round;
        pointer-events: none;
    }
    /* Keep the existing upload arrow and touch target, without a visible pill. */
    body.projects-dashboard .dashboard-mobile-header-controls:not(.audio-editor-playback-controls) .dashboard-mobile-header-control {
        border-color: transparent !important;
    }
    body.projects-dashboard .dashboard-mobile-header-controls-audio .dashboard-mobile-header-control {
        flex-basis: 44px;
        width: 44px !important;
        min-width: 44px !important;
    }
    body.projects-dashboard .dashboard-mobile-header-control:disabled {
        opacity: .5;
        cursor: not-allowed;
    }
    body.projects-dashboard .dashboard-mobile-header-control:focus-visible {
        outline: 2px solid #53667d;
        outline-offset: 3px;
    }
    body.projects-dashboard .dashboard-mobile-session-notice {
        position: fixed;
        z-index: 10050;
        left: 50%;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        width: max-content;
        max-width: calc(100% - 32px);
        box-sizing: border-box;
        padding: 10px 14px;
        border: 1px solid var(--unified-border);
        border-radius: 14px;
        background: var(--unified-control, #f2efe9);
        color: var(--unified-muted, #53667d);
        font: 400 .75rem/1.4 "Avenir Next", "Segoe UI", sans-serif;
        text-align: center;
        pointer-events: none;
    }
    body.review-admin[data-dashboard-embedded-workspace="1"].dashboard-mobile-header-connected:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="audio"]):not(.dashboard-mobile-header-status) .project-header-sticky {
        display: none !important;
    }
    body.review-admin[data-dashboard-embedded-workspace="1"].dashboard-mobile-header-connected:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="audio"]):not(.dashboard-mobile-header-status) > main.layout {
        padding-top: 16px !important;
    }
    /* The legacy Video mask must not cover media after its toolbar collapses.
       Keep it for active status rows and for unconnected/standalone editors. */
    html.ios-safari-video-top-mask:has(> body.review-admin[data-dashboard-embedded-workspace="1"][data-project-mode="video"].dashboard-mobile-header-connected:not(.dashboard-mobile-header-status))::before {
        display: none;
    }
    body.review-admin.dashboard-mobile-header-connected :is(#dashboard-mobile-video-upload, #dashboard-mobile-photo-upload, #dashboard-mobile-audio-notice, .audio-editor-playback-controls),
    body.review-admin.dashboard-mobile-header-connected :is(#dashboard-mobile-video-notice, #dashboard-mobile-photo-notice) > p:first-child {
        display: none !important;
    }
    body.review-admin.dashboard-mobile-header-connected.dashboard-mobile-header-status .project-header-sticky .topbar-actions {
        grid-template-columns: minmax(0, 1fr) !important;
        min-height: 0 !important;
        gap: 0 !important;
    }
    body.review-admin.dashboard-mobile-header-connected.dashboard-mobile-header-status :is(#dashboard-mobile-video-notice, #dashboard-mobile-photo-notice) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 899px) {
    /* Match the existing narrow Audio artwork and selected-mode colors. */
    body.projects-dashboard .dashboard-mobile-header-controls-audio .dashboard-mobile-header-control {
        color: #5f728d !important;
        border-color: #d2dbe5 !important;
        font-size: calc(var(--dash-pill-font-size) * .9) !important;
    }
    body.projects-dashboard .dashboard-mobile-header-controls-audio .dashboard-mobile-header-control svg {
        width: 13px !important;
        height: 13px !important;
        stroke-width: 2.15;
    }
    body.projects-dashboard .dashboard-mobile-header-controls-audio .audio-repeat-one-label {
        font-size: .78rem;
    }
    body.projects-dashboard .dashboard-mobile-header-controls-audio .dashboard-mobile-header-control:is(.is-active, [aria-pressed="true"]) {
        border-color: #ccd8e6 !important;
        background: #eaf3ff !important;
        color: #0b62d6 !important;
    }
}

/* Compact admin project headers only; original editor actions retain ownership. */
@media (max-width: 899px) {
    body.projects-dashboard:is(.dashboard-video-project-context-open, .dashboard-photo-project-context-open, .dashboard-files-project-context-open, .dashboard-audio-project-context-open, .dashboard-blog-project-context-open, .dashboard-portfolio-context-open) .dashboard-project-header-context {
        grid-template-columns: minmax(0, 1fr) auto 44px;
        gap: 6px;
    }
    body.projects-dashboard .dashboard-project-header-context > .dashboard-project-header-title {
        grid-column: 1;
        grid-row: 1;
        text-align: left;
    }
    body.projects-dashboard .dashboard-project-header-context #dashboard-project-header-mode,
    body.projects-dashboard .dashboard-project-header-context .dashboard-project-header-divider {
        display: none;
    }
    body.projects-dashboard .dashboard-project-header-context > .dashboard-mobile-header-controls {
        grid-column: 2;
        grid-row: 1;
    }
    body.projects-dashboard .dashboard-project-header-context > .dashboard-project-header-close {
        grid-column: 3;
        grid-row: 1;
    }
    body.projects-dashboard .dashboard-project-header-context .dashboard-mobile-header-controls .dashboard-mobile-header-control {
        flex: 0 0 44px;
        width: 44px !important;
        min-width: 44px !important;
        border-color: var(--unified-border) !important;
        color: var(--unified-muted) !important;
    }
    body.projects-dashboard .dashboard-mobile-header-control[hidden] { display: none !important; }
    body.projects-dashboard .dashboard-mobile-header-control:is(.is-active, [aria-pressed="true"]) {
        background: #eaf3ff !important;
        color: #0b62d6 !important;
    }
    body.projects-dashboard .dashboard-mobile-header-controls-audio .dashboard-mobile-header-control[data-header-action="share"] svg {
        width: 19px !important;
        height: 19px !important;
        stroke-width: 1.4;
    }
}

/* Compact Audio cards: retain original artwork, editor and media controls. */
@media (max-width: 899px) {
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-card-meta {
        display: grid; grid-template-columns: clamp(76px, 27%, 114px) minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-track-artwork {
        position: relative; display: block; width: 100%; min-width: 0; height: auto; min-height: 0; align-self: stretch; padding: 0; border: 0; border-right: 1px solid #d8e3ef; border-radius: 0; background: #f3f0ea url("./audio-artwork-default.png") center / cover no-repeat; overflow: hidden; cursor: pointer;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-card-meta > .audio-track-row {
        position: relative; display: grid; grid-template-columns: 44px 44px minmax(0, 1fr); grid-template-rows: 36px 44px auto; column-gap: 6px; row-gap: 3px; padding: 8px; align-items: center; min-width: 0;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row :is(.audio-track-main, .audio-waveform-row) {
        display: contents;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-top-meta {
        grid-column: 1 / -1; grid-row: 1; width: auto; max-width: none; min-width: 0; margin: 0 44px 0 2px;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-top-title {
        font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-top-label {
        display: none;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-play-toggle {
        grid-column: 1; grid-row: 2; width: 44px; height: 44px;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-reset-start-btn {
        grid-column: 2; grid-row: 2; width: 44px; height: 44px; border-radius: 14px;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-waveform {
        grid-column: 3; grid-row: 2; width: 100%; min-width: 0; height: 34px; box-sizing: border-box;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-inline-actions {
        position: absolute; top: 4px; right: 6px; display: block;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-inline-actions .edit-track-btn {
        width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border-color: transparent !important; background: transparent !important; font-size: 0 !important; box-shadow: none !important;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-inline-actions .edit-track-btn::after {
        content: ""; display: block; width: 20px; height: 16px; background: center / 20px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cg fill='%23929292'%3E%3Ccircle cx='4' cy='8' r='2'/%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3Ccircle cx='20' cy='8' r='2'/%3E%3C/g%3E%3C/svg%3E");
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-inline-actions .edit-track-btn:focus-visible {
        outline: 2px solid #8fb0d2; outline-offset: -3px;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-time-row {
        grid-column: 3; grid-row: 3; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; max-width: none; margin: 0; gap: 2px; font-size: .7rem;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-time-elapsed {
        grid-column: 1; grid-row: 1;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-time-total {
        grid-column: 2; grid-row: 1; justify-self: end;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-time-row .card-commented-pill {
        grid-column: 1 / -1; grid-row: 2; max-width: 100%; transform: none;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] .audio-main-workspace:not(.is-playlist-open) .video-grid .audio-row .audio-mix-cue-row {
        grid-column: 1 / -1;
    }
}

/* Audio-first compact artwork and sharing; original controls retain their handlers. */
@media (max-width: 899px) {
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #audio-artwork-dialog {
        box-sizing: border-box; width: calc(100% - 24px); max-width: calc(100% - 24px); min-width: 0; margin-inline: auto; left: 0; right: 0; max-height: calc(100dvh - 24px); overflow: auto;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #audio-artwork-dialog .dialog-head {
        padding: 12px; gap: 12px; min-width: 0;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #audio-artwork-dialog .dialog-head h3 {
        font-size: 1rem; min-width: 0;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #audio-artwork-dialog .audio-artwork-dialog-body {
        padding: 12px; min-width: 0;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #audio-artwork-dialog .audio-artwork-choice-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #audio-artwork-dialog .audio-artwork-source-btn {
        width: 100%; min-width: 0; min-height: 64px; padding: 10px; align-items: center; justify-content: center; white-space: normal; text-align: center;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #audio-artwork-dialog .audio-artwork-source-btn span {
        font-size: .875rem; line-height: 1.3; overflow-wrap: anywhere;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #audio-artwork-dialog .audio-artwork-source-btn small {
        display: none;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #audio-artwork-dialog :is(.audio-artwork-browser, .audio-artwork-browser-list, .audio-artwork-browser-head) {
        min-width: 0; max-width: 100%;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #audio-artwork-dialog :is(#audio-artwork-browser-title, #audio-artwork-status) {
        white-space: normal; overflow-wrap: anywhere;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details {
        min-width: 0; box-sizing: border-box;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-grid-video-pills {
        display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 8px; align-items: center;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-grid-video-pills #share-name {
        grid-column: 1; grid-row: 1; width: 100%; min-width: 0; box-sizing: border-box;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details #share-require-login-toggle {
        grid-column: 2; grid-row: 1; width: 76px; min-width: 0; height: auto; min-height: 48px; align-self: center;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details #share-require-login-toggle .share-access-switch-label {
        position: static; transform: none; white-space: nowrap;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details :is(#share-username-field, #share-password-field, #create-share-login) {
        grid-column: 1 / -1; min-width: 0; width: 100%; box-sizing: border-box;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-video-pill-field.is-disabled {
        display: none;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-access-row-compact .share-access-video-head {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 4px; padding: 12px; min-width: 0;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-access-row-compact .share-access-video-identity {
        grid-column: 1 / 3; grid-row: 1; min-width: 0; align-self: center;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-access-title-divider {
        display: none;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-access-row-compact .share-access-state-pills {
        display: contents;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-access-target-pill {
        grid-column: 3 / 5; grid-row: 1; display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 2px 4px; min-width: 0; width: auto; height: auto; min-height: 0; padding: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0; font-size: .72rem; white-space: normal; text-align: right;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-access-target-pill strong {
        min-width: 0; overflow-wrap: anywhere;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-access-state-pill-toggle {
        grid-row: 2; width: 100%; min-width: 0; min-height: 48px; padding: 0 2px !important;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-access-state-pill-toggle[data-toggle-kind="password"] {
        grid-column: 1;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-access-state-pill-toggle[data-toggle-kind="comments"] {
        grid-column: 2;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-access-state-pill-toggle[data-toggle-kind="download"] {
        grid-column: 3;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-access-state-pill-toggle[data-toggle-kind="collaboration"] {
        grid-column: 4;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-access-switch-label {
        font-size: .65rem; white-space: normal; overflow-wrap: normal;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-access-video-actions {
        grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; min-width: 0;
    }
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .share-access-video-actions .soft-btn {
        width: 100%; min-width: 0; height: auto; min-height: 44px; padding: 6px 4px !important; white-space: normal; overflow-wrap: anywhere; font-size: .72rem !important;
    }
}

/* Audio share source belongs beside its name; retain the compact phone grid. */
@media (max-width: 899px) {
    body.review-admin[data-project-mode="audio"][data-dashboard-embedded-workspace="1"] #share-details .audio-share-identity {
        display: contents;
    }
}
/* Only the narrow admin Audio editor receives section disclosure controls. */
@media (max-width: 899px) {
    html body.review-admin[data-project-mode="audio"] dialog#video-dialog#video-dialog.mobile-comments-only.mobile-audio-editor-sections .mobile-audio-section-controls {
        display: flex; flex: 0 0 auto; gap: 8px; padding: 8px 12px 12px; background: #f2f0eb;
    }
    html body.review-admin[data-project-mode="audio"] dialog#video-dialog#video-dialog.mobile-comments-only.mobile-audio-editor-sections .mobile-audio-section-button {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 12px; font-size: 16px;
    }
    html body.review-admin[data-project-mode="audio"] dialog#video-dialog#video-dialog.mobile-comments-only.mobile-audio-editor-sections .mobile-audio-section-button::before { content: '▸'; }
    html body.review-admin[data-project-mode="audio"] dialog#video-dialog#video-dialog.mobile-comments-only.mobile-audio-editor-sections .mobile-audio-section-button[aria-expanded="true"] {
        background: #eaf3ff; border-color: #b8cfe5;
    }
    html body.review-admin[data-project-mode="audio"] dialog#video-dialog#video-dialog.mobile-comments-only.mobile-audio-editor-sections .mobile-audio-section-button[aria-expanded="true"]::before { content: '▾'; }
    html body.review-admin[data-project-mode="audio"] dialog#video-dialog#video-dialog.mobile-comments-only.mobile-audio-editor-sections .mobile-audio-comment-actions {
        flex: 1 1 0; min-height: 0; max-height: none; overflow: auto; padding: 12px; background: #fff;
    }
    html body.review-admin[data-project-mode="audio"] dialog#video-dialog#video-dialog.mobile-comments-only.mobile-audio-editor-sections :is(.mobile-audio-comment-actions, .dialog-body)[hidden] {
        display: none !important;
    }
}

/* Audio library creation prototype: presentation only, phone/tablet widths. */
@media (max-width: 899px) {
    html body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-create-card.mode-audio:is([data-audio-kind="library"], [data-audio-kind="playlist"]) > .folder-body {
        background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible;
    }
    html body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-create-card.mode-audio:is([data-audio-kind="library"], [data-audio-kind="playlist"]) .folder-preview.create-project-preview {
        position: relative; width: 100% !important; min-width: 0; max-width: 100%; aspect-ratio: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; min-height: 172px;
    }
    html body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-create-card.mode-audio:is([data-audio-kind="library"], [data-audio-kind="playlist"]) .create-project-empty-wrap {
        position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; gap: 12px; box-sizing: border-box; width: 100%; height: 100%; padding: 46px 6px 10px !important;
    }
    html body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-create-card.mode-audio:is([data-audio-kind="library"], [data-audio-kind="playlist"]) .create-project-empty-wrap::after {
        display: none !important;
    }
    html body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-create-card.mode-audio:is([data-audio-kind="library"], [data-audio-kind="playlist"]) .create-project-name-input {
        position: static !important; inset: auto !important; transform: none !important; box-sizing: border-box; width: 100% !important; max-width: 260px; min-width: 0; height: 44px !important; min-height: 44px; flex: 0 0 auto; margin: 0 !important; padding: 0 8px; border: 1px solid #ccd9e6; border-radius: 12px; font-size: 16px !important; text-align: center;
    }
    html body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-create-card.mode-audio:is([data-audio-kind="library"], [data-audio-kind="playlist"]) .create-project-name-input::placeholder {
        font-size: 14px !important;
    }
    html body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-create-card.mode-audio:is([data-audio-kind="library"], [data-audio-kind="playlist"]) .create-project-inline-add {
        position: static !important; inset: auto !important; transform: none !important; display: inline-flex; align-items: center; justify-content: center; width: 44px !important; min-width: 44px; height: 44px !important; min-height: 44px; padding: 0 !important; margin: 0 !important; flex: 0 0 auto; opacity: 1;
    }
    html body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-create-card.mode-audio:is([data-audio-kind="library"], [data-audio-kind="playlist"]) .create-project-add-glyph {
        width: 40px !important; height: 40px !important; color: #667e98; border-color: #ccd9e6 !important;
    }
    html body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-create-card.mode-audio:is([data-audio-kind="library"], [data-audio-kind="playlist"]) .dashboard-create-card-cancel {
        position: absolute; top: 0 !important; right: 4px !important; bottom: auto !important; left: auto !important; width: auto !important; height: 44px !important; min-height: 44px; padding: 0 8px !important; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; font-size: 14px; z-index: 2;
    }
    html body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-create-card.mode-audio:is([data-audio-kind="library"], [data-audio-kind="playlist"]) .audio-create-cancel-glyph {
        display: none;
    }
    html body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-create-card.mode-audio:is([data-audio-kind="library"], [data-audio-kind="playlist"]) .audio-create-cancel-label {
        display: inline;
    }
    html body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-create-card.mode-audio:is([data-audio-kind="library"], [data-audio-kind="playlist"]) .create-project-add-glyph::before,
    html body.projects-dashboard .library-tab-cards[data-library-tab-cards="audio"] > .project-create-card.mode-audio:is([data-audio-kind="library"], [data-audio-kind="playlist"]) .create-project-add-glyph::after { background: currentColor !important; }
}

/* Video, Photo, Files and Notes creation: presentation only, phone/tablet widths. */
@media (max-width: 899px) {
    html body.projects-dashboard .library-tab-cards:is([data-library-tab-cards="video"], [data-library-tab-cards="photo"], [data-library-tab-cards="files"], [data-library-tab-cards="blog"]) > .project-create-card > .folder-body {
        background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible;
    }
    html body.projects-dashboard .library-tab-cards:is([data-library-tab-cards="video"], [data-library-tab-cards="photo"], [data-library-tab-cards="files"], [data-library-tab-cards="blog"]) > .project-create-card .folder-preview.create-project-preview {
        position: relative; width: 100% !important; min-width: 0; max-width: 100%; aspect-ratio: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; min-height: 172px;
    }
    html body.projects-dashboard .library-tab-cards:is([data-library-tab-cards="video"], [data-library-tab-cards="photo"], [data-library-tab-cards="files"], [data-library-tab-cards="blog"]) > .project-create-card .create-project-empty-wrap {
        position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; gap: 12px; box-sizing: border-box; width: 100%; height: 100%; padding: 46px 6px 10px !important;
    }
    html body.projects-dashboard .library-tab-cards:is([data-library-tab-cards="video"], [data-library-tab-cards="photo"], [data-library-tab-cards="files"], [data-library-tab-cards="blog"]) > .project-create-card .create-project-empty-wrap::after {
        display: none !important;
    }
    html body.projects-dashboard .library-tab-cards:is([data-library-tab-cards="video"], [data-library-tab-cards="photo"], [data-library-tab-cards="files"], [data-library-tab-cards="blog"]) > .project-create-card .create-project-name-input {
        position: static !important; inset: auto !important; transform: none !important; box-sizing: border-box; width: 100% !important; max-width: 260px; min-width: 0; height: 44px !important; min-height: 44px; flex: 0 0 auto; margin: 0 !important; padding: 0 8px; border: 1px solid #ccd9e6; border-radius: 12px; font-size: 16px !important; text-align: center;
    }
    html body.projects-dashboard .library-tab-cards:is([data-library-tab-cards="video"], [data-library-tab-cards="photo"], [data-library-tab-cards="files"], [data-library-tab-cards="blog"]) > .project-create-card .create-project-name-input::placeholder {
        font-size: 14px !important;
    }
    html body.projects-dashboard .library-tab-cards:is([data-library-tab-cards="video"], [data-library-tab-cards="photo"], [data-library-tab-cards="files"], [data-library-tab-cards="blog"]) > .project-create-card .create-project-inline-add {
        position: static !important; inset: auto !important; transform: none !important; display: inline-flex; align-items: center; justify-content: center; width: 44px !important; min-width: 44px; height: 44px !important; min-height: 44px; padding: 0 !important; margin: 0 !important; flex: 0 0 auto; opacity: 1;
    }
    html body.projects-dashboard .library-tab-cards:is([data-library-tab-cards="video"], [data-library-tab-cards="photo"], [data-library-tab-cards="files"], [data-library-tab-cards="blog"]) > .project-create-card .create-project-add-glyph {
        width: 40px !important; height: 40px !important; color: #667e98; border-color: #ccd9e6 !important;
    }
    html body.projects-dashboard .library-tab-cards:is([data-library-tab-cards="video"], [data-library-tab-cards="photo"], [data-library-tab-cards="files"], [data-library-tab-cards="blog"]) > .project-create-card .dashboard-create-card-cancel {
        position: absolute; top: 0 !important; right: 4px !important; bottom: auto !important; left: auto !important; width: auto !important; height: 44px !important; min-height: 44px; padding: 0 8px !important; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; font-size: 14px; z-index: 2;
    }
    html body.projects-dashboard .library-tab-cards:is([data-library-tab-cards="video"], [data-library-tab-cards="photo"], [data-library-tab-cards="files"], [data-library-tab-cards="blog"]) > .project-create-card .audio-create-cancel-glyph {
        display: none;
    }
    html body.projects-dashboard .library-tab-cards:is([data-library-tab-cards="video"], [data-library-tab-cards="photo"], [data-library-tab-cards="files"], [data-library-tab-cards="blog"]) > .project-create-card .audio-create-cancel-label {
        display: inline;
    }
    html body.projects-dashboard .library-tab-cards:is([data-library-tab-cards="video"], [data-library-tab-cards="photo"], [data-library-tab-cards="files"], [data-library-tab-cards="blog"]) > .project-create-card .create-project-add-glyph::before,
    html body.projects-dashboard .library-tab-cards:is([data-library-tab-cards="video"], [data-library-tab-cards="photo"], [data-library-tab-cards="files"], [data-library-tab-cards="blog"]) > .project-create-card .create-project-add-glyph::after { background: currentColor !important; }
}

/* Portfolio creation: presentation only, phone/tablet widths. */
@media (max-width: 899px) {
    html body.projects-dashboard .portfolio-dashboard-cards > .project-create-card.mode-portfolio > .folder-body {
        background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible;
    }
    html body.projects-dashboard .portfolio-dashboard-cards > .project-create-card.mode-portfolio .folder-preview.create-project-preview {
        position: relative; width: 100% !important; min-width: 0; max-width: 100%; aspect-ratio: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; min-height: 172px;
    }
    html body.projects-dashboard .portfolio-dashboard-cards > .project-create-card.mode-portfolio .create-project-empty-wrap {
        position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; gap: 12px; box-sizing: border-box; width: 100%; height: 100%; padding: 46px 6px 10px !important;
    }
    html body.projects-dashboard .portfolio-dashboard-cards > .project-create-card.mode-portfolio .create-project-empty-wrap::after {
        display: none !important;
    }
    html body.projects-dashboard .portfolio-dashboard-cards > .project-create-card.mode-portfolio .create-project-name-input {
        position: static !important; inset: auto !important; transform: none !important; box-sizing: border-box; width: 100% !important; max-width: 260px; min-width: 0; height: 44px !important; min-height: 44px; flex: 0 0 auto; margin: 0 !important; padding: 0 8px; border: 1px solid #ccd9e6; border-radius: 12px; font-size: 16px !important; text-align: center;
    }
    html body.projects-dashboard .portfolio-dashboard-cards > .project-create-card.mode-portfolio .create-project-name-input::placeholder {
        font-size: 14px !important;
    }
    html body.projects-dashboard .portfolio-dashboard-cards > .project-create-card.mode-portfolio .create-project-inline-add {
        position: static !important; inset: auto !important; transform: none !important; display: inline-flex; align-items: center; justify-content: center; width: 44px !important; min-width: 44px; height: 44px !important; min-height: 44px; padding: 0 !important; margin: 0 !important; flex: 0 0 auto; opacity: 1;
    }
    html body.projects-dashboard .portfolio-dashboard-cards > .project-create-card.mode-portfolio .create-project-add-glyph {
        width: 40px !important; height: 40px !important; color: #667e98; border-color: #ccd9e6 !important;
    }
    html body.projects-dashboard .portfolio-dashboard-cards > .project-create-card.mode-portfolio .dashboard-create-card-cancel {
        position: absolute; top: 0 !important; right: 4px !important; bottom: auto !important; left: auto !important; width: auto !important; height: 44px !important; min-height: 44px; padding: 0 8px !important; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; font-size: 14px; z-index: 2;
    }
    html body.projects-dashboard .portfolio-dashboard-cards > .project-create-card.mode-portfolio .audio-create-cancel-glyph {
        display: none;
    }
    html body.projects-dashboard .portfolio-dashboard-cards > .project-create-card.mode-portfolio .audio-create-cancel-label {
        display: inline;
    }
    html body.projects-dashboard .portfolio-dashboard-cards > .project-create-card.mode-portfolio .create-project-add-glyph::before,
    html body.projects-dashboard .portfolio-dashboard-cards > .project-create-card.mode-portfolio .create-project-add-glyph::after { background: currentColor !important; }
}

/* Compact project sharing; existing permission and link handlers are retained. */
@media (max-width: 899px) {
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details {
        min-width: 0; box-sizing: border-box;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .share-grid-video-pills {
        display: grid; grid-template-columns: minmax(0, 1fr) 76px !important; gap: 8px; align-items: center;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .share-grid-video-pills #share-name {
        grid-column: 1; grid-row: 1; width: 100%; min-width: 0; box-sizing: border-box;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details #share-require-login-toggle {
        grid-column: 2; grid-row: 1; width: 76px; min-width: 0; height: auto; min-height: 48px; align-self: center;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details #share-require-login-toggle .share-access-switch-label {
        position: static; transform: none; white-space: nowrap;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details :is(#share-username-field, #share-password-field, #create-share-login) {
        grid-column: 1 / -1; min-width: 0; width: 100%; box-sizing: border-box;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .share-video-pill-field.is-disabled {
        display: none;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .share-access-row-compact .share-access-video-head {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 4px; padding: 12px; min-width: 0;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .share-access-row-compact .share-access-video-identity {
        grid-column: 1 / 3; grid-row: 1; min-width: 0; align-self: center;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .share-access-title-divider {
        display: none;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .share-access-row-compact .share-access-state-pills {
        display: contents !important;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .phone-share-source {
        grid-column: 3 / 5; grid-row: 1; display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 2px 4px; min-width: 0; width: auto; height: auto; min-height: 0; padding: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0; font-size: .72rem; white-space: normal; text-align: right;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .phone-share-source strong {
        min-width: 0; overflow-wrap: anywhere;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .share-access-state-pill-toggle {
        grid-row: 2; width: 100%; min-width: 0; min-height: 48px; padding: 0 2px !important;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .share-access-state-pill-toggle[data-toggle-kind="password"] {
        grid-column: 1;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .share-access-state-pill-toggle[data-toggle-kind="comments"] {
        grid-column: 2;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .share-access-state-pill-toggle[data-toggle-kind="download"] {
        grid-column: 3;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .share-access-state-pill-toggle[data-toggle-kind="collaboration"] {
        grid-column: 4;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .share-access-switch-label {
        font-size: .65rem; white-space: normal; overflow-wrap: normal;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .share-access-video-actions {
        grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; min-width: 0;
    }
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"])[data-dashboard-embedded-workspace="1"] #share-details .share-access-video-actions .soft-btn {
        width: 100%; min-width: 0; height: auto; min-height: 44px; padding: 6px 4px !important; white-space: normal; overflow-wrap: anywhere; font-size: .72rem !important;
    }
}

/* Section-specific share controls remain available within the compact layout. */
@media (max-width: 899px) {
    body.review-admin:is([data-project-mode="video"], [data-project-mode="photo"], [data-project-mode="files"]) #share-details .phone-share-source strong,
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog .phone-share-source strong {
        display: inline-block; max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    body.review-admin[data-project-mode="files"] #share-details #share-download-toggle-btn {
        grid-column: 1 / -1; min-width: 0; width: 100%; white-space: normal;
    }
    body.review-admin[data-project-mode="files"] #share-details .share-access-state-pill-toggle[data-toggle-kind="password"] { grid-column: 1 / 3; }
    body.review-admin[data-project-mode="files"] #share-details .share-access-state-pill-toggle[data-toggle-kind="collaboration"] { grid-column: 3 / 5; }
    body.review-admin[data-project-mode="files"] #share-details .share-access-video-actions .share-access-max-upload-btn { grid-column: 1 / -1; }

    body:is(.projects-dashboard, .review-admin) #blog-share-dialog {
        box-sizing: border-box; min-width: 0; max-width: 100%;
    }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog :is(.share-access-panel, .share-library-layout, .share-preview-panel, .share-preview-list-wrap, .share-preview-list) {
        min-width: 0; max-width: 100%; box-sizing: border-box;
    }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog :is(.blog-share-create-row, .share-preview-auth-row) {
        display: grid; grid-template-columns: minmax(0, 1fr) 76px !important; gap: 8px; align-items: center;
    }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog #blog-share-name {
        grid-column: 1; grid-row: 1; min-width: 0; width: 100%; box-sizing: border-box;
    }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog #blog-share-password-toggle-btn {
        grid-column: 2; grid-row: 1; min-width: 0; width: 76px; min-height: 48px; height: auto; padding: 0 2px; white-space: normal;
    }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog #blog-share-password-toggle-btn .share-access-switch-label { position: static; transform: none; }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog :is(#blog-share-username, #blog-share-password, #blog-share-create-link-btn, #blog-share-download-toggle-btn, #blog-share-collaboration-toggle-btn) {
        grid-column: 1 / -1; min-width: 0; width: 100%; box-sizing: border-box;
    }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog :is(#blog-share-username, #blog-share-password):disabled { display: none; }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog :is(#blog-share-name, #blog-share-username, #blog-share-password) { font-size: 16px; min-height: 44px; }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog .share-preview-item {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 4px; min-width: 0; padding: 12px;
    }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog .blog-share-row-identity { grid-column: 1; grid-row: 1; min-width: 0; }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog .share-preview-title-divider { display: none; }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog .phone-share-source {
        grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 4px; min-width: 0; font-size: .72rem; text-align: right;
    }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog .blog-share-permission-group {
        grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: space-around; gap: 4px; min-width: 0; width: 100%;
    }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog .blog-share-permission-switch {
        flex: 1 1 0; min-width: 0; width: auto; min-height: 48px; padding: 0 2px;
    }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog .share-access-switch-label { font-size: .65rem; white-space: normal; }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog .share-preview-item-actions {
        grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-width: 0; width: 100%;
    }
    body:is(.projects-dashboard, .review-admin) #blog-share-dialog .share-preview-item-actions .share-preview-action-btn {
        width: 100% !important; min-width: 0 !important; min-height: 44px !important; height: auto !important; padding: 6px 4px !important; font-size: .72rem !important; white-space: normal; overflow-wrap: anywhere;
    }
}
@media (max-width: 899px) {
    body.review-admin[data-project-mode="files"] #share-details .share-access-video-actions :is(.share-access-delete-btn, .share-access-copy-btn, .share-access-review-btn) { grid-row: auto; }
}

/* Overview views. This stylesheet is loaded only below 900px. Keep the
   existing Grid and mobile actions; List/Reel change their presentation. */
body.projects-dashboard .dashboard-reel-toolbar:has(.dashboard-mobile-view-controls) {
    padding: 12px 12px 20px;
    gap: 6px;
    flex-wrap: wrap;
}
body.projects-dashboard .dashboard-reel-toolbar:has(.dashboard-mobile-view-controls) .dashboard-reel-toolbar-start {
    flex: 0 0 auto;
}
body.projects-dashboard .dashboard-reel-toolbar:has(.dashboard-mobile-view-controls) .dashboard-reel-new-project {
    font-size: 14px;
    gap: 6px;
    min-height: 44px;
    white-space: nowrap;
}
body.projects-dashboard .dashboard-reel-new-project-icon { flex: 0 0 36px; }
body.projects-dashboard .dashboard-reel-toolbar:has(.dashboard-mobile-view-controls) .dashboard-audio-switch:not([hidden]) {
    flex: 0 0 auto;
    gap: 3px;
    margin-left: auto;
}
body.projects-dashboard .dashboard-reel-toolbar:has(.dashboard-mobile-view-controls) .dashboard-audio-switch button {
    font-size: 12px;
    min-width: 44px;
    min-height: 44px;
}
body.projects-dashboard .dashboard-reel-toolbar:has(.dashboard-mobile-view-controls) .dashboard-audio-switch-control {
    width: 44px;
    min-width: 44px;
}
body.projects-dashboard .dashboard-mobile-view-controls {
    position: relative;
    display: flex;
    flex: 0 0 96px;
    width: 96px;
    height: 46px;
    margin-left: auto;
    box-sizing: border-box;
    border: 1px solid #d0d2d3;
    border-radius: 10px;
    background: transparent;
    z-index: 51;
}
body.projects-dashboard .dashboard-mobile-view-controls > :is(.dashboard-view-menu, .dashboard-menu) {
    display: block !important;
    position: static;
    flex: 0 0 auto;
    margin: 0;
    height: 44px;
}
body.projects-dashboard .dashboard-mobile-view-controls > div > :is(#dashboard-view-cycle-btn, #dashboard-menu-btn) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    border: 0 !important;
    border-radius: 9px 0 0 9px;
    color: #62686d !important;
    background: transparent !important;
    box-shadow: none !important;
    font: 400 14px/1 "Avenir Next", "Segoe UI", sans-serif;
}
body.projects-dashboard .dashboard-mobile-view-controls #dashboard-view-cycle-btn { width: 50px !important; min-width: 50px !important; }
body.projects-dashboard .dashboard-mobile-view-controls > .dashboard-menu > #dashboard-menu-btn {
    width: 44px;
    min-width: 44px;
    border-left: 1px solid #d0d2d3 !important;
    border-radius: 0 9px 9px 0;
}
body.projects-dashboard .dashboard-mobile-view-controls button:focus-visible {
    outline: 2px solid #81878b;
    outline-offset: 2px;
}
body.projects-dashboard .dashboard-mobile-view-controls .dashboard-view-menu-popover {
    position: absolute;
    inset: 52px 0 auto auto;
    transform: none;
    width: 120px;
    min-width: 120px;
    padding: 4px;
    border: 1px solid #d0d2d3;
    border-radius: 10px;
    background: var(--unified-surface);
    z-index: 151;
}
body.projects-dashboard .dashboard-mobile-view-controls .dashboard-view-menu-option {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
    font-weight: 400;
    color: #62686d;
}

/* Neutral mobile menu: gray text and borders, no coloured overlay. */
body.projects-dashboard .dashboard-mobile-view-controls .dashboard-view-menu-option,
body.projects-dashboard .dashboard-mobile-view-controls .dashboard-view-menu-option:is(:hover, :focus-visible, :active, [aria-selected="true"], [aria-pressed="true"]) {
    color: #62686d;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}
body.projects-dashboard .dashboard-mobile-view-controls .dashboard-view-menu-option + .dashboard-view-menu-option {
    border-top: 1px solid #d0d2d3;
}

/* A single column of compact rows, using the metadata already in each card. */
body.projects-dashboard[data-dashboard-mobile-view="list"] :is(.library-tab-cards:not([hidden]), .portfolio-dashboard-cards) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0;
}
body.projects-dashboard[data-dashboard-mobile-view="list"] .library-tab-cards .project-folder-card:not(.project-create-card) {
    margin: 0 !important;
    padding: 12px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #d8e0e8 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
body.projects-dashboard[data-dashboard-mobile-view="list"] .library-tab-cards .project-folder-card:not(.project-create-card) > .folder-head-row {
    display: none !important;
}
body.projects-dashboard[data-dashboard-mobile-view="list"] .library-tab-cards .project-folder-card:not(.project-create-card) > .folder-body {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) 36px !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
}
body.projects-dashboard[data-dashboard-mobile-view="list"] .library-tab-cards .project-folder-card:not(.project-create-card) > .folder-body > .folder-preview {
    position: relative !important;
    display: block !important;
    grid-column: 1;
    grid-row: 1;
    width: 76px !important;
    height: 56px !important;
    min-height: 0 !important;
    margin: 0 !important;
    aspect-ratio: auto;
    border-radius: 8px !important;
    transform: none !important;
}
body.projects-dashboard[data-dashboard-mobile-view="list"] .library-tab-cards .project-folder-card .dashboard-list-row-meta {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap;
    align-content: center;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: auto !important;
    padding: 0;
    gap: 4px 10px;
    color: #71869b;
    font: 400 12px/1.35 "Avenir Next", "Segoe UI", sans-serif;
}
body.projects-dashboard[data-dashboard-mobile-view="list"] .library-tab-cards .dashboard-list-row-meta > .dashboard-list-row-name {
    display: block;
    flex: 0 0 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #263548;
    font-size: 14px;
    font-weight: 400;
}
body.projects-dashboard[data-dashboard-mobile-view="list"] .library-tab-cards .dashboard-list-row-meta > :is(.dashboard-list-row-projects, .dashboard-list-row-folders),
body.projects-dashboard[data-dashboard-mobile-view="list"] .library-tab-cards .folder-body > :is(.reel-card-title, .reel-card-select-toggle, .folder-list-meta) {
    display: none !important;
}
body.projects-dashboard[data-dashboard-mobile-view="list"] .library-tab-cards .project-folder-card:not(.project-create-card) > .folder-body > .folder-actions-row {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 76px !important;
    height: 56px !important;
    aspect-ratio: auto;
    margin: 0;
    transform: none !important;
}
body.projects-dashboard[data-dashboard-mobile-view="list"] .library-tab-cards .portfolio-persistent-preview-btn {
    position: static !important;
    grid-column: 3;
    grid-row: 1;
    width: 36px;
    min-height: 44px;
    margin: 0;
    transform: none;
}

/* These dashboard sections cannot move cards in the narrow layout. */
body.projects-dashboard .library-tab-body:has(> .library-tab-cards-wrap > .library-tab-cards:is([data-library-tab-cards="video"], [data-library-tab-cards="photo"], [data-library-tab-cards="files"], [data-library-tab-cards="audio"], [data-library-tab-cards="blog"]):not([hidden])) .dashboard-folder-close-hint {
    display: none;
}

/* Reel uses native horizontal scrolling rather than desktop wheel/drag logic. */
body.projects-dashboard[data-dashboard-mobile-view="100"] :is(.library-tab-cards:not([hidden]), .portfolio-dashboard-cards) {
    display: flex !important;
    flex-flow: row nowrap;
    align-items: flex-start;
    gap: 18px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--unified-edge);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
body.projects-dashboard[data-dashboard-mobile-view="100"] .library-tab-cards[data-library-tab-cards="portfolio"]:not([hidden]) {
    display: block !important;
    overflow: visible !important;
}
body.projects-dashboard[data-dashboard-mobile-view="100"] :is(.library-tab-cards, .portfolio-dashboard-cards) > .project-folder-card {
    flex: 0 0 min(78vw, 420px);
    width: min(78vw, 420px);
    scroll-snap-align: start;
}
/* Desktop Reel previews are 320px wide by 416px tall. Use that same
   proportion, keeping names below and the complete preview clickable. */
body.projects-dashboard[data-dashboard-mobile-view="100"] :is(.library-tab-cards, .portfolio-dashboard-cards) > .project-folder-card:not(.project-create-card):not(.is-expanded) > .folder-body > :is(.folder-preview, .folder-actions-row) {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 10 / 13 !important;
}
body.projects-dashboard[data-dashboard-mobile-view="100"] :is(.library-tab-cards, .portfolio-dashboard-cards) > .project-folder-card:not(.project-create-card):not(.is-expanded) > .folder-body::before {
    aspect-ratio: 10 / 13;
}
/* Keep creation forms usable in all presentations. */
body.projects-dashboard[data-dashboard-mobile-view="list"] .project-create-card.is-reel-create-open {
    margin-bottom: 16px;
}

body.projects-dashboard[data-dashboard-mobile-view="list"] .library-tab-cards .folder-preview-empty {
    padding: 4px;
    justify-content: center;
    gap: 0;
}
body.projects-dashboard[data-dashboard-mobile-view="list"] .library-tab-cards .folder-preview-empty-title {
    font-size: 10px;
    line-height: 1.2;
}
body.projects-dashboard[data-dashboard-mobile-view="list"] .library-tab-cards .folder-preview-empty-subtitle { display: none; }
body.projects-dashboard[data-dashboard-mobile-view="list"] .library-tab-cards[data-library-tab-cards="portfolio"] .portfolio-dashboard-cards > .portfolio-site-card .portfolio-persistent-preview-btn {
    height: 44px !important;
    min-height: 44px !important;
}
body.projects-dashboard[data-dashboard-mobile-view="list"] .library-tab-cards .project-create-card.is-reel-create-open .folder-preview.create-project-preview {
    display: block !important;
}

/* The existing New playlist handler already supports creation. Retire the
   older mobile-only hide rule when that form is explicitly opened. */
body.projects-dashboard[data-dashboard-mobile-view] .library-tab-cards[data-library-tab-cards="audio"] > .project-create-card[data-audio-kind="playlist"].is-reel-create-open {
    display: flex !important;
}

/* Portfolio-only mobile header: retain the editor's source controls. */
@media (max-width: 899px) {
    body.projects-dashboard .dashboard-mobile-header-controls-portfolio > .dashboard-mobile-header-controls {
        gap: 0;
        border: 1px solid var(--unified-border);
        border-radius: 10px;
    }
    body.projects-dashboard .dashboard-mobile-header-controls-portfolio .dashboard-mobile-header-controls .dashboard-mobile-header-control {
        border: 0 !important;
        border-radius: 0 !important;
    }
    body.projects-dashboard .dashboard-mobile-header-controls-portfolio .dashboard-mobile-header-controls .dashboard-mobile-header-control + .dashboard-mobile-header-control {
        border-left: 1px solid var(--unified-border) !important;
    }
    body.projects-dashboard .dashboard-mobile-header-controls-portfolio .dashboard-mobile-header-control:first-child { border-radius: 9px 0 0 9px !important; }
    body.projects-dashboard .dashboard-mobile-header-controls-portfolio .dashboard-mobile-header-control:last-child { border-radius: 0 9px 9px 0 !important; }
    body.projects-dashboard .dashboard-mobile-header-controls-portfolio > .dashboard-project-header-title { min-width: 0; overflow: hidden; }
    body.projects-dashboard .dashboard-mobile-header-controls-portfolio .dashboard-project-header-name {
        display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}