/* v4.19.4: compact Growth Path context bar. */
.workspace-context-panel {
    display: block;
    padding: 14px;
    border-radius: 18px;
}
.workspace-context-bar {
    display: grid;
    grid-template-columns: minmax(280px, 430px) minmax(320px, 1fr) 44px;
    gap: 12px;
    align-items: end;
    width: 100%;
    min-width: 0;
}
.workspace-context-bar > .input-label {
    min-width: 0;
    margin: 0;
    gap: 6px;
}
.workspace-context-bar .control-label-text {
    color: var(--muted);
    font-size: 13px;
    font-weight: var(--weight-semibold);
}
.workspace-context-bar select,
.workspace-context-bar input[type="search"] {
    min-height: 44px;
}
.workspace-context-menu {
    position: relative;
    align-self: end;
}
.workspace-context-menu > summary {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    list-style: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}
.workspace-context-menu > summary::-webkit-details-marker {
    display: none;
}
.workspace-context-menu[open] > summary {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.workspace-context-popover {
    position: absolute;
    z-index: 90;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    gap: 14px;
    width: min(340px, calc(100vw - 36px));
    padding: 14px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--shadow);
}
.workspace-context-popover .input-label,
.workspace-context-popover .focus-scope-toggle {
    width: 100%;
    margin: 0;
}
.workspace-context-option {
    display: grid;
    gap: 6px;
}
.workspace-context-option .scope-button {
    flex: 1 1 0;
}
.workspace-context-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.workspace-context-links .ghost-button {
    width: 100%;
    min-height: 40px;
    justify-content: center;
}

/* Search stays inline on tablets; the shared navigation trigger occupies the
   last control cell instead of creating a separate mobile app bar. */
@media (max-width: 1100px) {
    .workspace-context-bar {
        grid-template-columns: minmax(220px, 380px) minmax(200px, 1fr) 44px 44px;
    }
    /* The trigger has its own grid cell here, so the shared nav-host padding
       (workspaces.css, for headers with a floating trigger) must not apply. */
    .workspace-context-bar.app-mobile-nav-host { padding-right: 0; }
    .workspace-context-bar .hero-path-select { grid-column: 1; grid-row: 1; }
    .workspace-context-bar .hero-search { grid-column: 2; grid-row: 1; }
    .workspace-context-menu { grid-column: 3; grid-row: 1; }
    .workspace-context-bar > .app-sidebar-mobile-trigger {
        position: static;
        grid-column: 4;
        grid-row: 1;
    }
}

@media (max-width: 900px) {
    .workspace-context-bar {
        grid-template-columns: minmax(0, 1fr) 44px 44px;
        grid-template-areas:
            "path menu nav"
            "search search search";
    }
    .workspace-context-bar .hero-path-select { grid-area: path; }
    .workspace-context-bar .hero-search { grid-area: search; }
    .workspace-context-menu { grid-area: menu; }
    .workspace-context-bar > .app-sidebar-mobile-trigger { grid-area: nav; }
}

@media (max-width: 720px) {
    .workspace-context-panel {
        gap: 0;
        padding: 10px;
        border-radius: 14px;
    }
    .workspace-context-bar {
        gap: 8px;
    }
    .workspace-context-bar .control-label-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .workspace-context-popover .control-label-text {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
    .workspace-context-panel .path-select-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .workspace-context-panel .path-select-row .small-button {
        min-width: 60px;
        min-height: 44px;
    }
    .workspace-context-popover {
        position: fixed;
        top: auto;
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        left: 10px;
        width: auto;
        max-height: calc(100dvh - 20px);
        overflow: auto;
    }
}