.ksw-jobs {
    --ksw-jobs-gap: var(--space-s, 1rem);
    --ksw-jobs-padding: var(--space-m, 1.25rem);
    --ksw-jobs-radius: var(--radius-m, 0.5rem);
    --ksw-jobs-surface: var(--white, #fff);
    --ksw-jobs-text: var(--base, #1f2933);
    --ksw-jobs-muted: var(--base-medium, #5f6b7a);
    --ksw-jobs-border: var(--base-ultra-light, #e5e7eb);
    --ksw-jobs-action: #000;
    --ksw-jobs-action-hover: #222;
    --ksw-jobs-action-text: #fff;

    display: grid;
    gap: var(--ksw-jobs-gap);
    color: var(--ksw-jobs-text);
}

.ksw-jobs__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ksw-jobs-gap);
    padding: var(--ksw-jobs-padding);
    background: var(--ksw-jobs-surface);
    border: 1px solid var(--ksw-jobs-border);
    border-radius: var(--ksw-jobs-radius);
}

.ksw-jobs__content {
    min-width: 0;
}

.ksw-jobs__title {
    margin: 0;
    color: var(--ksw-jobs-text);
    font-size: var(--text-l, 1.125rem);
    line-height: 1.25;
}

.ksw-jobs__meta,
.ksw-jobs--empty p {
    margin: 0.4rem 0 0;
    color: var(--ksw-jobs-muted);
    font-size: var(--text-s, 0.9375rem);
}

.ksw-jobs__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding: 0.95rem 1.4rem;
    color: var(--ksw-jobs-action-text);
    background: var(--ksw-jobs-action);
    border-radius: var(--ksw-jobs-radius);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color 160ms ease, transform 160ms ease;
}

.ksw-jobs__button:hover,
.ksw-jobs__button:focus {
    color: var(--ksw-jobs-action-text);
    background: var(--ksw-jobs-action-hover);
    text-decoration: none;
    transform: translateY(-1px);
}

.ksw-jobs--empty {
    padding: var(--ksw-jobs-padding);
    background: var(--ksw-jobs-surface);
    border: 1px solid var(--ksw-jobs-border);
    border-radius: var(--ksw-jobs-radius);
}

.ksw-jobs--empty p:first-child {
    margin-top: 0;
}

.ksw-jobs__admin-note {
    font-size: var(--text-xs, 0.8125rem);
}

@media (max-width: 640px) {
    .ksw-jobs__item {
        align-items: stretch;
        flex-direction: column;
    }

    .ksw-jobs__button {
        width: 100%;
    }
}