/**
 * v3 careerweb — mobile back-bar.
 *
 * Visible only when body.mobile-detail-open AND viewport ≤ 860px.
 * Houses the "← Back to jobs" affordance.
 * The base styles live here; the visibility gate is in responsive.css.
 */

.detail-back-bar { display: none; }

@media (max-width: 860px) {
    .detail-back-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
        position: sticky;
        top: 0;
        /* Sit above the .detail--form-loading shimmer overlay
           (z-index 10 + 11) so the back affordance stays usable
           through the loading window. */
        z-index: 15;
        padding-top: calc(10px + env(safe-area-inset-top));
    }
    .detail-back-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 12px;
        margin-left: -8px;
        background: transparent;
        border: none;
        color: var(--ink);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        border-radius: var(--radius);
    }
    .detail-back-btn:hover { background: var(--surface-2); }
    .detail-back-btn:active { background: var(--surface-3); }
    .detail-back-btn i { font-size: 18px; }
}