/* ===========================================
   Project / channel context (partials/_context_switcher.html)
   Phones: context bar under the header → bottom sheet with a Projects card
   and a Channels card. Desktop keeps the header pickers (layout.css .hdr-picker);
   both mark the current item with an accent bar + tint instead of a checkmark.
   =========================================== */

.ctx-bar,
.ctx-sheet { display: none; }

@media (max-width: 600px) {
    .hdr-picker { display: none; }

    /* A full-bleed strip on the header's bottom edge: one flat cell per picker, split
       by the same 1px line as the desktop bar (layout.css), the whole strip one button. */
    .top-nav .user-menu ~ .ctx-bar,
    .ctx-bar {
        order: 4;
        flex: 0 0 calc(100% + var(--nav-pad-left) + var(--nav-pad-right));
        display: flex;
        align-items: stretch;
        min-width: 0;
        height: 48px;
        /* Edge to edge: out through the header's padding (burger gutter on the left). */
        margin: 0.05rem calc(-1 * var(--nav-pad-right)) calc(-1 * var(--nav-pad-y)) calc(-1 * var(--nav-pad-left));
        padding: 0;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
        color: var(--text-primary);
        text-align: left;
        cursor: pointer;
    }
    .ctx-bar:active { background: var(--surface-hover); }
    .ctx-cell {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        min-width: 0;
        padding: 0 0.6rem;
    }
    .ctx-cell + .ctx-cell { border-left: 1px solid var(--border); }
    .ctx-cell .hdr-picker-icon { width: 26px; height: 26px; }
    .ctx-bar-chev {
        align-self: center;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin: 0 0.75rem 0 0.25rem;
        fill: none;
        stroke: var(--text-muted);
        stroke-width: 2;
        stroke-linecap: round;
    }
    body:has(.ctx-sheet.open) .ctx-bar-chev { transform: rotate(180deg); }

    .ctx-sheet {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        max-height: 85dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0.5rem 0.75rem calc(1rem + env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
        background: var(--raised);
        border: none;
        box-shadow: var(--shadow-lg);
        z-index: 1100;
        opacity: 0;
        visibility: hidden;
        transform: translateY(16px);
        transition: opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
    }
    .ctx-sheet.open { opacity: 1; visibility: visible; transform: none; }
    body:has(.ctx-sheet.open)::after {
        content: "";
        position: fixed;
        inset: 0;
        background: var(--overlay-bg);
        z-index: 1050;
    }

    .ctx-grab { width: 40px; height: 4px; margin: 0.25rem auto 0; border-radius: 4px; background: var(--border); }

    .ctx-card { padding: 0.35rem; border: 1px solid var(--border-light); border-radius: var(--r-lg); background: var(--card); }
    .ctx-card-head {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 0.5rem 0.55rem;
        margin-bottom: 0.25rem;
        border-bottom: 1px solid var(--border-light);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-secondary);
    }
    .ctx-card-head svg { width: 16px; height: 16px; }
    .ctx-count, .ctx-in { font-weight: 400; letter-spacing: 0; text-transform: none; }
    .ctx-card-link { margin-left: auto; font-size: 0.8rem; font-weight: 500; letter-spacing: 0; text-transform: none; }

    .ctx-row {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.6rem 0.6rem;
        border-radius: var(--r-md);
        color: var(--text-primary);
        font-size: 0.9rem;
        text-decoration: none;
    }
    .ctx-row.ctx-channel { padding-left: 2rem; }
    .ctx-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ctx-row.current,
    .ctx-platform.current {
        background: color-mix(in srgb, var(--c-secondary), transparent 82%);
        font-weight: 600;
    }
    .ctx-row.current::before,
    .ctx-platform.current::before {
        content: "";
        position: absolute;
        left: 0;
        top: 6px;
        bottom: 6px;
        width: 3px;
        border-radius: 3px;
        background: var(--c-secondary);
    }
    .ctx-platform {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.55rem 0.6rem 0.3rem;
        border-radius: var(--r-md);
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-secondary);
        text-decoration: none;
    }
    .ctx-platform .platform-icon { width: 16px; height: 16px; }
    .ctx-muted { font-size: 0.75rem; color: var(--text-muted); }
    .ctx-role { font-size: 0.7rem; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }
}