/*
 * 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) .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;
}

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;
}

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;
}

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: "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);
    }
}