/**
 * Recruit Suite native integration styles.
 * All public-facing surfaces inherit WP Job Portal design tokens.
 */

/* Consolidated from admin_recruitautomation. */
.wpjobportal-recruit-automation {
    --wjp-blue: var(--wpjp-ds-color-primary,var(--wpjp-primary-color,#3baeda));
    --wjp-ink: var(--wpjp-ds-color-text);
    --wjp-muted: var(--wpjp-ds-color-text-muted);
    max-width: 1400px;
}

.wpjobportal-recruit-automation.is-frontend {
    margin: 28px auto;
    padding: 0 var(--wpjp-ds-space-4);
}

.wpjobportal-recruit-automation.is-frontend .button {
    display: inline-block;
    padding: var(--wpjp-ds-space-2) var(--wpjp-ds-space-3);
    border: 1px solid var(--wjp-blue);
    border-radius: var(--wpjp-ds-radius-sm);
    background: var(--wpjp-ds-color-surface);
    color: var(--wjp-blue);
    text-decoration: none;
}

.wjp-auto-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--wpjp-ds-space-4);
    margin: var(--wpjp-ds-space-4) 0;
}

.wjp-auto-heading>div>span {
    color: var(--wpjp-secondary-color, #333333);
    font-size: var(--wpjp-ds-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.wjp-auto-heading h1 {
    margin: 3px 0;
    color: var(--wjp-ink);
}

.wjp-auto-heading p {
    margin: 0;
    color: var(--wjp-muted);
}

.wjp-auto-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: var(--wpjp-ds-space-3);
    margin: var(--wpjp-ds-space-4) 0;
}

.wjp-auto-cards article,
.wjp-auto-panel {
    /* A look's card measurements where one is installed; Core's otherwise. */
    padding: var(--wpjp-ed-gap-4, var(--wpjp-ds-space-4));
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
    background: var(--wpjp-card-background, #fff);
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.08));
}

.wjp-auto-cards span,
.wjp-auto-cards small {
    display: block;
    color: var(--wjp-muted);
}

.wjp-auto-cards strong {
    display: block;
    margin: 5px 0;
    font-size: var(--wpjp-second-sub-heading, 27px);
    font-weight: 700;
    color: var(--wpjp-secondary-color, #333333);
}

.wjp-auto-panel {
    margin-bottom: var(--wpjp-ds-space-3);
}

.wjp-auto-panel h2 {
    margin-top: 0;
}

.wjp-auto-list {
    display: grid;
    gap: var(--wpjp-ds-space-2);
}

.wjp-auto-list>article {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    gap: var(--wpjp-ds-space-3);
    align-items: start;
    padding: var(--wpjp-ds-space-3);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
}

.wjp-auto-list>article.is-unread {
    border-color: var(--wpjp-ds-color-primary);
    background: var(--wpjp-ds-color-canvas);
}

.wjp-auto-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--wpjp-ds-radius-md);
    background: var(--wpjp-ds-color-canvas);
    color: var(--wpjp-ds-color-primary-strong);
    font-weight: 800;
}

.wjp-auto-copy h3,
.wjp-auto-copy p {
    margin: 3px 0;
}

.wjp-auto-copy>div {
    display: flex;
    gap: var(--wpjp-ds-space-2);
    color: var(--wjp-muted);
    font-size: 13px;
}

.wjp-auto-type {
    font-weight: 700;
    color: var(--wpjp-secondary-color, #333333);
}

.wjp-auto-copy small {
    color: var(--wjp-muted);
}

.wjp-auto-actions {
    display: flex;
    align-items: center;
    gap: var(--wpjp-ds-space-2);
}

.wjp-auto-admin-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--wpjp-ds-space-3);
}

.wjp-auto-check {
    display: flex;
    gap: var(--wpjp-ds-space-2);
    margin: var(--wpjp-ds-space-3) 0;
    padding: var(--wpjp-ds-space-3);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-md);
}

.wjp-auto-check span,
.wjp-auto-check small {
    display: block;
}

.wjp-auto-check small {
    margin-top: 3px;
    color: var(--wjp-muted);
}

.wjp-auto-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wpjp-ds-space-2);
}

.wjp-auto-fields label {
    display: grid;
    gap: var(--wpjp-ds-space-1);
}

.wjp-auto-fields input {
    width: 100%;
    box-sizing: border-box;
}

.wjp-auto-fields small,
.wjp-auto-empty {
    color: var(--wjp-muted);
}

.wjp-signature-list {
    display: grid;
    gap: 8px;
    /*
     * Fifty signature requests is a list, not a page. Bounded so the panel is
     * the same height on a busy site as on a quiet one - the notification
     * centre beside it is paged for the same reason. A section that grows
     * without limit pushes everything below it off the screen, which is what
     * a tester found here: the settings sat six thousand pixels down.
     */
    max-block-size: 26rem;
    overflow-y: auto;
}

.wjp-signature-list article {
    display: grid;
    gap: var(--wpjp-ds-space-1);
    padding: var(--wpjp-ds-space-3);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-md);
}

.wjp-signature-list article>div {
    display: grid;
}

.wjp-signature-list span,
.wjp-signature-list small {
    color: var(--wjp-muted);
}

.wjp-signature-status {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
}

@media (max-width:900px) {
    .wjp-auto-cards,
    .wjp-auto-admin-grid,
    .wjp-auto-fields {
        grid-template-columns: 1fr;
    }

    .wjp-auto-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .wjp-auto-list>article {
        grid-template-columns: 38px 1fr;
    }

    .wjp-auto-actions {
        grid-column: 2;
        flex-wrap: wrap;
    }
}

/* Consolidated from admin_recruitinsights. */
.wpjobportal-recruit-insights {
    --wjp-blue: var(--wpjp-ds-color-primary,var(--wpjp-primary-color,#3baeda));
    --wjp-ink: var(--wpjp-ds-color-text);
    --wjp-muted: var(--wpjp-ds-color-text-muted);
    max-width: 1400px;
}

.wpjobportal-recruit-insights.is-frontend {
    margin: 28px auto;
    padding: 0 var(--wpjp-ds-space-4);
}

.wpjobportal-recruit-insights.is-frontend .button {
    display: inline-block;
    padding: 9px var(--wpjp-ds-space-3);
    border: 1px solid var(--wjp-blue);
    border-radius: var(--wpjp-ds-radius-sm);
    background: var(--wpjp-ds-color-surface);
    color: var(--wjp-blue);
    cursor: pointer;
}

.wpjobportal-recruit-insights.is-frontend .button-primary {
    background: var(--wjp-blue);
    color: var(--wpjp-ds-color-surface);
}

.wjp-insights-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--wpjp-ds-space-4);
    margin: var(--wpjp-ds-space-4) 0;
}

.wjp-insights-heading span {
    color: var(--wpjp-secondary-color, #333333);
    font-size: var(--wpjp-ds-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.wjp-insights-heading h1 {
    margin: 3px 0;
    color: var(--wjp-ink);
}

.wjp-insights-heading p {
    margin: 0;
    color: var(--wjp-muted);
}

.wjp-insights-filters {
    display: grid;
    grid-template-columns: 1.2fr 1.4fr 1fr auto;
    gap: var(--wpjp-ds-space-3);
    align-items: end;
    padding: var(--wpjp-ds-space-4);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
    background: var(--wpjp-ds-color-surface);
}

.wjp-insights-filters label {
    display: grid;
    gap: 4px;
}

.wjp-insights-filters select {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    padding: 6px;
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
}

.wjp-insights-scope {
    display: flex;
    gap: var(--wpjp-ds-space-2);
    flex-wrap: wrap;
    margin: var(--wpjp-ds-space-4) 0 var(--wpjp-ds-space-2);
}

.wjp-insights-scope>* {
    padding: 5px var(--wpjp-ds-space-2);
    border-radius: 999px;
    background: var(--wpjp-ds-color-canvas);
    color: var(--wpjp-ds-color-primary-strong);
}

.wjp-insights-cards {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: var(--wpjp-ds-space-3);
    margin: var(--wpjp-ds-space-4) 0;
}

.wjp-insights-cards article,
.wjp-insights-panel,
.wjp-insights-empty {
    padding: var(--wpjp-ds-space-4);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
    background: var(--wpjp-card-background, #fff);
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.08));
}

.wjp-insights-cards article span,
.wjp-insights-cards article small {
    display: block;
    color: var(--wjp-muted);
}

.wjp-insights-cards article strong {
    display: block;
    margin: 5px 0;
    font-size: var(--wpjp-second-sub-heading, 27px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--wpjp-secondary-color, #333333);
}

/*
 * A sentence in the figure's place.
 *
 * "No hires yet" and "Not enough data" answer the question the card asks, but
 * they are not figures, and set at 27px bold they wrapped onto two lines and
 * pushed every card in the row taller - measured at 139px of content against
 * 81px for the card beside it, in a row that then stood 181px tall. Said at
 * body size they read as the sentence they are and the row settles.
 */
.wjp-insights-cards article strong.is-phrase {
    font-size: var(--wpjp-body-font-size, 17px);
    font-weight: 600;
    line-height: 1.4;
}

/*
 * The cards were mostly air: nine of them, each carrying 81px to 139px of
 * content inside 167px to 181px of card, so between 42px and 99px of every one
 * was empty - the better part of 660px of nothing on one screen. The row still
 * squares itself off, which is what keeps a grid tidy; it just no longer holds
 * three lines of text in the space of six.
 */
.wjp-insights-cards article {
    padding: var(--wpjp-ds-space-3) var(--wpjp-ds-space-4);
}

.wjp-insights-cards article span,
.wjp-insights-cards article small {
    line-height: 1.35;
}

.wjp-insights-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--wpjp-ds-space-3);
    margin-bottom: var(--wpjp-ds-space-3);
}

.wjp-insights-panel h2 {
    margin-top: 0;
    color: var(--wjp-ink);
}

.wjp-stage-row {
    margin: var(--wpjp-ds-space-3) 0;
}

.wjp-stage-row>div:first-child {
    display: flex;
    align-items: center;
    gap: var(--wpjp-ds-space-2);
}

.wjp-stage-row em {
    margin-left: auto;
    color: var(--wjp-muted);
    font-style: normal;
}

.wjp-stage-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.wjp-stage-track {
    height: 9px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--wpjp-ds-color-canvas);
}

.wjp-stage-track i {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.wjp-status-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wpjp-ds-space-5);
}

.wjp-status-groups h3 {
    margin-top: 0;
}

.wjp-status-groups p {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--wpjp-ds-color-border);
}

.wjp-workload-table {
    overflow: auto;
}

.wjp-workload-table table {
    width: 100%;
    border-collapse: collapse;
}

.wjp-workload-table th,
.wjp-workload-table td {
    padding: var(--wpjp-ds-space-2);
    text-align: left;
    border-bottom: 1px solid var(--wpjp-ds-color-border);
}

.wjp-workload-table th {
    color: var(--wjp-muted);
    font-size: 13px;
    text-transform: uppercase;
}

.wjp-workload-table .is-overdue {
    color: var(--wpjp-ds-color-danger);
    font-weight: 700;
}

.wjp-muted,
.wpjobportal-recruit-insights .description {
    color: var(--wjp-muted);
}

.wjp-insights-empty {
    margin-top: var(--wpjp-ds-space-4);
    text-align: center;
}

@media (max-width:900px) {
    .wjp-insights-filters,
    .wjp-insights-cards,
    .wjp-insights-grid {
        grid-template-columns: 1fr;
    }

    .wjp-insights-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .wjp-status-groups {
        grid-template-columns: 1fr;
    }
}

/* Consolidated from admin_recruitoffers. */
.wjp-offer-fields {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: var(--wpjp-ds-space-2);
    margin: var(--wpjp-ds-space-3) 0;
}

.wjp-offer-fields label {
    display: grid;
    gap: var(--wpjp-ds-space-1);
}

.wjp-offer-boundary {
    margin: var(--wpjp-ds-space-4) 0;
    padding: var(--wpjp-ds-space-2) var(--wpjp-ds-space-3);
    border-left: 4px solid var(--wpjp-ds-color-primary);
    background: var(--wpjp-ds-color-canvas);
}

.wjp-offer-list {
    display: grid;
    gap: var(--wpjp-ds-space-3);
    margin-top: var(--wpjp-ds-space-4);
}

.wjp-offer {
    padding: 16px;
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-md);
    background: var(--wpjp-ds-color-canvas);
}

.wjp-offer-head,
.wjp-offer-compensation,
.wjp-offer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wpjp-ds-space-2);
}

.wjp-offer-head>div {
    display: grid;
}

.wjp-offer-head small,
.wjp-offer-dates,
.wjp-offer-compensation span {
    color: var(--wpjp-ds-color-text-muted);
}

.wjp-offer-compensation {
    justify-content: flex-start;
    margin: var(--wpjp-ds-space-2) 0;
}

.wjp-offer-compensation strong {
    font-size: var(--wpjp-sub-heading, 22px);
}

.wjp-offer-status-approved,
.wjp-offer-status-accepted {
    color: var(--wpjp-ds-color-success);
}

.wjp-offer-status-rejected,
.wjp-offer-status-declined,
.wjp-offer-status-withdrawn {
    color: var(--wpjp-ds-color-danger);
}

.wjp-approval-list {
    display: grid;
    gap: var(--wpjp-ds-space-2);
    margin: var(--wpjp-ds-space-3) 0;
}

.wjp-approval-row {
    padding: var(--wpjp-ds-space-2);
    border-radius: var(--wpjp-ds-radius-sm);
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-border);
}

.wjp-approval-row>div:first-child {
    display: grid;
    gap: 3px;
}

.wjp-approval-row span,
.wjp-approval-row small {
    color: var(--wpjp-ds-color-text-muted);
}

.wjp-approval-actions {
    display: grid;
    gap: 6px;
    margin-top: var(--wpjp-ds-space-2);
}

.wjp-approval-actions form {
    display: flex;
    gap: 6px;
}

.wjp-approval-actions input[type=text] {
    flex: 1;
}

.wjp-request-approval {
    margin: var(--wpjp-ds-space-3) 0;
    padding: var(--wpjp-ds-space-3);
    border-radius: var(--wpjp-ds-radius-sm);
    background: var(--wpjp-ds-color-surface);
}

.wjp-approver-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wpjp-ds-space-2) var(--wpjp-ds-space-4);
    margin: var(--wpjp-ds-space-2) 0;
}

.wjp-offer-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: var(--wpjp-ds-space-3);
}

.wjp-signature-history {
    display: grid;
    gap: 6px;
    margin: var(--wpjp-ds-space-3) 0;
    padding: var(--wpjp-ds-space-3);
    border-radius: var(--wpjp-ds-radius-sm);
    background: var(--wpjp-ds-color-canvas);
}

.wjp-signature-history>div {
    display: flex;
    align-items: center;
    gap: var(--wpjp-ds-space-2);
}

.wjp-signature-history small {
    color: var(--wpjp-ds-color-text-muted);
}

@media (max-width:800px) {
    .wjp-offer-fields {
        grid-template-columns: 1fr;
    }

    .wjp-approval-actions form {
        align-items: stretch;
        flex-direction: column;
    }

    .wjp-signature-history>div {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Consolidated from admin_recruitpipeline. */
.wpjobportal-recruit-pipeline .wjp-pipeline-toolbar {
    /*
     * A stable two columns - find-a-job on the left, add-stage on the right.
     * This was flex with wrap and space-between, so the two forms sat side by
     * side only until the job select grew: a long job title widened the
     * find-a-job form and dropped add-stage onto its own row, so the shape of
     * the screen depended on which job happened to be open. minmax(0, 1fr)
     * ties the left column to the space it has, not to the length of the
     * selected job's name. The native recruiter view already lays its toolbar
     * out this way; this brings the admin screen in line with it.
     */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--wpjp-ds-space-3);
    align-items: end;
    margin: var(--wpjp-ds-space-5) 0;
    padding: var(--wpjp-ds-space-3);
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
}

/* Below this the two forms stack, rather than squeezing find-a-job to nothing. */
@media (max-width: 960px) {
    .wpjobportal-recruit-pipeline .wjp-pipeline-toolbar {
        grid-template-columns: 1fr;
    }
}

.wpjobportal-recruit-pipeline .wjp-pipeline-toolbar form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wpjp-ds-space-3);
    /*
     * The controls line up along their bottom edge, not their middle, so the
     * search box and the job select sit level and the button sits with them -
     * regardless of the labels stacked above each one.
     */
    align-items: flex-end;
}

/*
 * Each control keeps its own label above it.
 *
 * The three were a flat run - Find a job, the search box, Job, the select,
 * the button - so "Job" landed between the search box and the select and read
 * as a heading for neither. Pairing every label with its field, and letting
 * the search box take the room the select does not need, is the whole of it.
 */
.wpjobportal-recruit-pipeline .wjp-pipeline-field {
    display: flex;
    flex-direction: column;
    gap: var(--wpjp-ds-space-1);
    min-inline-size: 0;
}

.wpjobportal-recruit-pipeline .wjp-pipeline-field--search {
    flex: 1 1 15rem;
}

.wpjobportal-recruit-pipeline .wjp-pipeline-field--job {
    flex: 1 1 13rem;
}

.wpjobportal-recruit-pipeline .wjp-pipeline-field > label {
    margin: 0;
}

.wpjobportal-recruit-pipeline .wjp-pipeline-field > input,
.wpjobportal-recruit-pipeline .wjp-pipeline-field > select,
.wpjobportal-recruit-pipeline .wjp-pipeline-field .wpjp-recruit-select {
    inline-size: 100%;
}

.wpjobportal-recruit-pipeline .wjp-pipeline-submit {
    flex: 0 0 auto;
}

.wpjobportal-recruit-pipeline .wjp-stage-create input[type=text] {
    min-width: 190px;
}

/*
 * The add-stage row: a name that grows, a fixed colour swatch, a button.
 *
 * On the admin screen this form was flex, and the form framework stretches a
 * bare input to width:100%, so the type=color input filled the row as a grey
 * bar. The native recruiter view avoids that by laying the form out as a grid
 * with a fixed swatch column; the colour then sits in a 2.75rem track whatever
 * its own width rule says. Matching that here is what tidies the admin row.
 */
.wpjobportal-recruit-pipeline .wjp-pipeline-toolbar .wjp-stage-create {
    display: grid;
    grid-template-columns: minmax(11rem, 1fr) 2.75rem auto;
    gap: var(--wpjp-ds-space-2);
    align-items: center;
}

.wpjobportal-recruit-pipeline .wjp-stage-create input[type="color"] {
    inline-size: 2.75rem;
    min-inline-size: 2.75rem;
    block-size: 2.5rem;
    padding: .25rem;
    cursor: pointer;
}

/* ==========================================================================
   The pipeline, stacked
   ==========================================================================

   On the portal a stage is a section of the page rather than a column of a
   board: .wjportal-cp-sect-wrp draws the panel, .wjportal-cp-sec-title the
   heading, and the candidates inside are .wjportal-resume-list rows. The
   board's own classes are still on the markup so the move control and the
   "show more" endpoint keep working, so what is left here is undoing the
   column: no grid track, no height cap, no inner scroll.
   ========================================================================== */

.wjp-stage-stack {
    display: block;
}

.wjp-stage-stack .wjp-kanban-column {
    display: block;
    min-block-size: 0;
    margin-block-end: var(--wpjp-ds-space-5);
    overflow: visible;
    /*
     * Both classes are on the one element, and the column's own rules win on
     * order - so a stage kept the board's grey fill, its 12px corner and no
     * padding at all while claiming to be a .wjportal-cp-sect-wrp. These are
     * that panel's own measurements, stated again where they can be seen.
     */
    padding: 25px;
    background: transparent;
    border-radius: var(--wpjp-ds-radius-md);
}

.wjp-stage-stack .wjp-kanban-cards {
    display: block;
    min-block-size: 0;
    max-block-size: none;
    overflow: visible;
    padding: 0;
}

.wjp-stage-stack .wjp-candidate-card + .wjp-candidate-card {
    margin-block-start: var(--wpjp-ds-space-4);
}

.wjp-stage-stack .wjp-card-move {
    display: inline-flex;
    align-items: center;
    gap: var(--wpjp-ds-space-2);
    flex-wrap: wrap;
}

/*
 * The stage heading is a heading, not a column cap.
 *
 * .wjp-kanban-column > header carried the board's grey fill and a 12px top
 * corner, which inside a panel drew a curved line above every stage title.
 * .wjportal-cp-sec-title is on the same element; this lets it through.
 */
.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-stage-stack .wjp-kanban-column > header,
.wpjp-native-recruit-view .wjp-stage-stack .wjp-kanban-column > header,
.wjp-stage-stack .wjp-kanban-column > header {
    background: transparent;
    border-radius: 0;
    padding-inline: 0;
    /*
     * The 3px inset bar is a column's cap. Inside a panel it reads as a rule
     * drawn across the top of the section for no reason - and the stage's
     * colour is already on the dot beside its name.
     */
    box-shadow: none;
}

/*
 * The toolbar reads across, and the search field gets the room.
 *
 * Something upstream lays this form out as a grid of content-sized tracks, and
 * the search column came out 114px wide - so "Find a job" broke into three
 * stacked words over a sliver of an input, with "Open pipeline" wrapping
 * beside it. A filter row is a row: the field takes the free space, the
 * controls take what they need, and a label does not wrap.
 */
.wpjp-native-recruit-view .wjp-pipeline-toolbar form,
#wjportal-emp-cp-wrp .wpjp-native-recruit-view .wjp-pipeline-toolbar form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--wpjp-ds-space-3);
}

#wjportal-emp-cp-wrp .wpjp-native-recruit-view .wjp-pipeline-toolbar .wjp-pipeline-field--search {
    flex: 1 1 16rem;
    min-inline-size: 0;
}

.wpjp-native-recruit-view .wjp-pipeline-toolbar .wjp-pipeline-field--search {
    flex: 1 1 16rem;
    min-inline-size: 0;
}

.wpjp-native-recruit-view .wjp-pipeline-toolbar .wjp-pipeline-field--job {
    flex: 0 1 18rem;
    min-inline-size: 0;
}

.wpjp-native-recruit-view .wjp-pipeline-toolbar .wjp-pipeline-field label {
    white-space: nowrap;
}

.wpjp-native-recruit-view .wjp-pipeline-toolbar .wjp-pipeline-field .wpjp-ds-control,
.wpjp-native-recruit-view .wjp-pipeline-toolbar .wjp-pipeline-field input,
.wpjp-native-recruit-view .wjp-pipeline-toolbar .wjp-pipeline-field select {
    inline-size: 100%;
}

/*
 * A button is as wide as its label here too.
 *
 * justify-self as well as width: these sit in single-column grids, and a grid
 * item stretches to its track whatever its width says - which is how Add stage
 * came to be a 598px blue bar across the panel.
 */
.wpjp-native-recruit-view .wjp-stage-stack .wjportal-form-btn,
.wpjp-native-recruit-view .wjp-stage-create .wjportal-form-btn,
.wpjp-native-recruit-view .wjp-pipeline-toolbar .wjportal-form-btn,
.wjp-stage-stack .wjportal-form-btn {
    display: inline-flex;
    width: auto;
    justify-self: start;
}

.wjp-kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px,1fr);
    gap: var(--wpjp-ds-space-3);
    overflow-x: auto;
    padding: var(--wpjp-ds-space-1) 2px var(--wpjp-ds-space-5);
}

.wjp-kanban-column {
    background: var(--wpjp-background-color, #f6f6f6);
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    /* Core's card corner. A board is columns where a list is rows - that much
       is the shape of the thing - but the surfaces are the same surfaces. */
    border-radius: var(--wpjp-ed-radius, 12px);
    min-height: 260px;
}

.wjp-kanban-column>header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--wpjp-ds-space-3) var(--wpjp-ds-space-3);
    background: var(--wpjp-ds-color-surface);
    border-bottom: 3px solid var(--wjp-stage-color);
    border-radius: var(--wpjp-ds-radius-lg) var(--wpjp-ds-radius-lg) 0 0;
}

.wjp-stage-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--wjp-stage-color);
}

.wjp-stage-count {
    min-width: 25px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--wpjp-ds-color-canvas);
    text-align: center;
}

.wjp-kanban-cards {
    min-height: 190px;
    padding: var(--wpjp-ds-space-2);
}

.wjp-kanban-column.is-drag-over {
    outline: 3px solid var(--wpjp-ds-color-primary,var(--wpjp-primary-color,#3baeda));
    outline-offset: -3px;
}

.wjp-candidate-card {
    margin-bottom: var(--wpjp-ds-space-2);
    padding: var(--wpjp-ds-space-3);
    background: var(--wpjp-card-background, #fff);
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: var(--wpjp-ed-radius, 12px);
    /* The shadow was 0 1px 2px rgba(0,0,0,.04), which belongs to no other card
       in this plugin. Core's card is what a card looks like here. */
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.08));
    cursor: grab;
}

.wjp-candidate-card.is-moving {
    opacity: .55;
}

.wjp-candidate-card strong,
.wjp-candidate-card span,
.wjp-candidate-card small {
    display: block;
    margin-bottom: 5px;
    /*
     * break-word, not anywhere. anywhere breaks between any two characters, so
     * an email that would fit on one line was split mid-word - sample@resume6.c
     * over to om - the moment the column was the least bit tight. break-word
     * only breaks a word that genuinely cannot fit, which a name or an email in
     * a card this wide does not.
     */
    overflow-wrap: break-word;
}

.wjp-candidate-card span,
.wjp-candidate-card small {
    color: var(--wpjp-ds-color-text-muted);
}

.wjp-workspace-link {
    display: inline-block;
    margin: var(--wpjp-ds-space-1) 0 2px;
}

.wjp-card-move {
    display: flex;
    /* The stage select and its button wrap rather than pushing past the edge
       of the card, which is what was overflowing the column in the first
       place. */
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--wpjp-ds-space-2);
}

.wjp-card-move select {
    min-width: 0;
    max-width: 175px;
}

.wjp-stage-delete {
    padding: 0 var(--wpjp-ds-space-3) var(--wpjp-ds-space-3);
}

@media (max-width:782px) {
    .wpjobportal-recruit-pipeline .wjp-pipeline-toolbar,
    .wpjobportal-recruit-pipeline .wjp-pipeline-toolbar form {
        align-items: stretch;
        flex-direction: column;
    }

    .wjp-kanban {
        grid-auto-columns: minmax(260px,88vw);
    }
}

/*
 * Consolidated from admin_recruitworkspace - and the team screen joins it.
 *
 * Both screens render a wp-admin template on the front end, so both emit
 * .button, .button-primary, .button-link-delete and .notice: classes that
 * only exist in wp-admin's stylesheet. Off the dashboard nothing answers
 * them, so the buttons fell back to the browser's own grey box - square
 * corners, 13px text - beside a portal that is 17px and 6px-rounded.
 *
 * The workspace, insights and automation screens were each given this
 * treatment. The team screen was not, which is the whole of why it reads as
 * foreign. It is added to these selectors rather than given a copy, so the
 * two cannot drift.
 */
.wpjobportal-recruit-team.is-frontend input,
.wpjobportal-recruit-workspace.is-frontend input,
.wpjobportal-recruit-team.is-frontend select,
.wpjobportal-recruit-workspace.is-frontend select,
.wpjobportal-recruit-team.is-frontend textarea,
.wpjobportal-recruit-workspace.is-frontend textarea {
    box-sizing: border-box;
    max-width: 100%;
    padding: var(--wpjp-ds-space-2);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-sm,6px);
    font-family: inherit;
    /* Without this the control keeps the browser's own 13px next to a 17px page. */
    font-size: var(--wpjp-body-font-size, 17px);
}

/*
 * A form button is as wide as its label, the way Core's are.
 *
 * .wjportal-form-btn is display:flex so the icon and label centre together,
 * and in Core's own forms a wrapper gives it its width. Dropped straight into
 * a <p> here it stretched the whole panel - three 550px blue bars down a
 * column, which is not what Core's Search or Find Jobs button looks like.
 */
.wpjobportal-recruit-team.is-frontend .wjportal-form-btn,
.wpjobportal-recruit-workspace.is-frontend .wjportal-form-btn {
    display: inline-flex;
    width: auto;
}

.wpjobportal-recruit-team.is-frontend .button,
.wpjobportal-recruit-workspace.is-frontend .button {
    display: inline-block;
    /*
     * Core's button, since these stand on Core's pages now.
     *
     * A wp-admin .button dressed at 8px by 12px on a 6px corner, which is
     * wp-admin's size, not this plugin's: .wjportal-form-btn is 10px by 15px
     * on 8px everywhere a reader has just been. Same shape as the Candidate
     * Portal's buttons, which were corrected to the same measurements.
     */
    padding: 10px 15px;
    border: 1px solid var(--wpjp-ds-color-primary,var(--wpjp-primary-color,#3baeda));
    border-radius: 8px;
    background: var(--wpjp-ds-color-surface);
    color: var(--wpjp-ds-color-primary,var(--wpjp-primary-color,#3baeda));
    font-family: inherit;
    font-size: var(--wpjp-body-font-size, 17px);
    text-decoration: none;
    cursor: pointer;
}

.wpjobportal-recruit-team.is-frontend .button-primary,
.wpjobportal-recruit-workspace.is-frontend .button-primary {
    background: var(--wpjp-ds-color-primary,var(--wpjp-primary-color,#3baeda));
    border-color: var(--wpjp-ds-color-primary,var(--wpjp-primary-color,#3baeda));
    color: var(--wpjp-ds-color-surface);
}

.wpjobportal-recruit-team.is-frontend .button-link-delete,
.wpjobportal-recruit-workspace.is-frontend .button-link-delete {
    border: 0;
    background: transparent;
    color: var(--wpjp-ds-color-danger);
    cursor: pointer;
}

.wpjobportal-recruit-team.is-frontend .notice,
.wpjobportal-recruit-workspace.is-frontend .notice {
    margin: var(--wpjp-ds-space-3) 0;
    padding: var(--wpjp-ds-space-2) var(--wpjp-ds-space-3);
    border-left: 4px solid var(--wpjp-ds-color-primary);
    background: var(--wpjp-ds-color-surface);
}

.wpjobportal-recruit-team.is-frontend .notice-success,
.wpjobportal-recruit-workspace.is-frontend .notice-success {
    border-left-color: var(--wpjp-ds-color-success);
}

.wpjobportal-recruit-team.is-frontend .notice-error,
.wpjobportal-recruit-workspace.is-frontend .notice-error {
    border-left-color: var(--wpjp-ds-color-danger);
}

.wpjobportal-recruit-team.is-frontend .notice-warning,
.wpjobportal-recruit-workspace.is-frontend .notice-warning {
    border-left-color: var(--wpjp-ds-color-warning);
}
/* ==========================================================================
   The recruiting workspace, in the portal's own colours
   ==========================================================================

   This block arrived minified: 3,928 characters on one line, 46 rules, 25
   hardcoded hex colours against 5 design tokens - while the rest of this
   stylesheet runs 669 tokens to 137 hexes. And the hexes were WordPress admin
   greys, #50575e, #646970, #c3c4c7, #dcdcde, #f6f7f7, so the screens they
   paint read as wp-admin lifted into the front end rather than as WP Job
   Portal. That is the whole of the "these pages do not look like part of the
   plugin" report: not the layout, the palette.

   Same rules, same selectors, same order. Only the values change, to the
   tokens Core already publishes, so the workspace takes its colour from the
   portal and follows it into a dark theme or a re-skin.
*/

.wpjobportal-recruit-team.is-frontend,
.wpjobportal-recruit-workspace.is-frontend {
    max-width: 1280px;
    margin: var(--wpjp-ds-space-6) auto;
    padding: 0 var(--wpjp-ds-space-4);
}

.wpjobportal-recruit-team.is-frontend h1,
.wpjobportal-recruit-workspace.is-frontend h1 {
    font-size: var(--wpjp-main-heading, 32px);
}

.wjp-workspace-picker {
    display: flex;
    gap: var(--wpjp-ds-space-2);
    align-items: center;
    margin: var(--wpjp-ds-space-5) 0;
    padding: var(--wpjp-ds-space-3);
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
}

.wjp-workspace-picker select {
    min-width: 420px;
}

.wjp-candidate-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wpjp-ds-space-5);
    margin-bottom: var(--wpjp-ds-space-4);
    padding: var(--wpjp-ds-space-4) var(--wpjp-ds-space-5);
    /* Flat, like every other surface Core draws - the 135deg wash was the
       only diagonal on the page. */
    background: var(--wpjp-ds-color-canvas);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
}

.wjp-candidate-summary h2 {
    margin: 3px 0;
}

.wjp-candidate-summary p {
    margin: 0;
    color: var(--wpjp-ds-color-text-muted);
}

.wjp-summary-kicker {
    color: var(--wpjp-secondary-color, #333333);
    font-weight: 600;
}

.wjp-summary-actions {
    display: flex;
    align-items: flex-end;
    gap: var(--wpjp-ds-space-2);
    flex-direction: column;
}

.wjp-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(280px,1fr);
    gap: var(--wpjp-ds-space-4);
}

.wjp-workspace-main {
    display: grid;
    gap: var(--wpjp-ds-space-4);
}

.wjp-workspace-card {
    padding: var(--wpjp-ds-space-4);
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
}

.wjp-workspace-card h2 {
    margin-top: 0;
}

.wjp-workspace-card textarea {
    width: 100%;
}

.wjp-note-list,
.wjp-task-list,
.wjp-interview-list,
.wjp-scorecard-list {
    display: grid;
    gap: var(--wpjp-ds-space-2);
    margin-top: var(--wpjp-ds-space-4);
}

.wjp-note,
.wjp-task,
.wjp-interview,
.wjp-scorecard {
    padding: var(--wpjp-ds-space-3);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-md);
    background: var(--wpjp-ds-color-canvas);
}

.wjp-note-meta,
.wjp-task-head,
.wjp-task-meta,
.wjp-task-actions,
.wjp-interview-head,
.wjp-interview-actions,
.wjp-evaluation-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wpjp-ds-space-2);
}

.wjp-note-meta span,
.wjp-task-meta,
.wjp-interview-meta {
    color: var(--wpjp-ds-color-text-muted);
    font-size: 13px;
}

.wjp-note form {
    margin-top: var(--wpjp-ds-space-2);
    text-align: right;
}

.wjp-task-fields,
.wjp-interview-fields {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--wpjp-ds-space-2);
    margin: var(--wpjp-ds-space-3) 0;
}

.wjp-task-fields label,
.wjp-interview-fields label {
    display: grid;
    gap: var(--wpjp-ds-space-1);
}

.wjp-task.is-complete {
    opacity: .68;
}

.wjp-task.is-complete .wjp-task-head strong {
    text-decoration: line-through;
}

.wjp-task-actions,
.wjp-interview-actions {
    justify-content: flex-start;
    margin-top: var(--wpjp-ds-space-2);
}

.wjp-priority,
.wjp-status-pill {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--wpjp-ds-color-canvas);
    font-size: 13px;
    text-transform: uppercase;
}

.wjp-priority-high,
.is-overdue {
    color: var(--wpjp-ds-color-danger)!important;
}

.wjp-priority-low {
    color: var(--wpjp-ds-color-primary,var(--wpjp-primary-color,#3baeda));
}

.wjp-evaluation-summary {
    margin: var(--wpjp-ds-space-3) 0;
    padding: var(--wpjp-ds-space-3);
    border-radius: var(--wpjp-ds-radius-md);
    background: var(--wpjp-ds-color-canvas);
}

.wjp-evaluation-summary strong {
    font-size: var(--wpjp-sub-heading, 22px);
    font-weight: 700;
    color: var(--wpjp-secondary-color, #333333);
}

.wjp-score-grid {
    display: grid;
    grid-template-columns: 1fr 90px;
    gap: var(--wpjp-ds-space-2) var(--wpjp-ds-space-3);
    align-items: center;
    margin: var(--wpjp-ds-space-3) 0;
}

.wjp-score-grid label {
    font-weight: 600;
}

.wjp-score-grid textarea {
    grid-column: 1/-1;
}

.wjp-scorecard details {
    margin-top: var(--wpjp-ds-space-2);
}

.wjp-scorecard-rating {
    display: flex;
    justify-content: space-between;
    padding: var(--wpjp-ds-space-1) 0;
    border-bottom: 1px solid var(--wpjp-ds-color-border);
}

.wjp-timeline ol {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wjp-timeline li {
    position: relative;
    margin: 0 0 0 7px;
    padding: 0 0 var(--wpjp-ds-space-5) var(--wpjp-ds-space-5);
    border-left: 2px solid var(--wpjp-ds-color-border);
}

.wjp-timeline li:last-child {
    border-left-color: transparent;
}

.wjp-timeline li strong,
.wjp-timeline li small {
    display: block;
}

.wjp-timeline li small {
    margin-top: var(--wpjp-ds-space-1);
    color: var(--wpjp-ds-color-text-muted);
}

.wjp-timeline-dot {
    position: absolute;
    left: -7px;
    top: 2px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--wpjp-ds-color-surface);
    border-radius: 50%;
    background: var(--wpjp-ds-color-primary,var(--wpjp-primary-color,#3baeda));
    box-shadow: 0 0 0 1px var(--wpjp-ds-color-primary,var(--wpjp-primary-color,#3baeda));
}

.wjp-empty {
    padding: var(--wpjp-ds-space-4);
    text-align: center;
    color: var(--wpjp-ds-color-text-muted);
    background: var(--wpjp-ds-color-canvas);
    border-radius: var(--wpjp-ds-radius-md);
}

@media (max-width: 960px) {
    .wjp-workspace-grid {
        grid-template-columns: 1fr;
    }

    .wjp-workspace-picker,
    .wjp-candidate-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .wjp-workspace-picker select {
        min-width: 0;
        width: 100%;
    }

    .wjp-summary-actions {
        align-items: flex-start;
    }

    .wjp-task-fields,
    .wjp-interview-fields {
        grid-template-columns: 1fr;
    }
}


.wpjp-recruit-menu-item .wjportal-list-anchor {
    position: relative;
}

/* Release 4 candidate operations use the same neutral card/form tokens as WP Job Portal. */
/* Two columns whatever the room. Inside the employer control panel that room
   is about 486px, so each card came out 237px and "No talent pools yet." was
   four words over three lines. As many columns as fit instead. */
.wjp-candidate-management-grid,
.wjp-duplicate-grid,
.wjp-reason-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--wpjp-ds-space-5);
    margin: var(--wpjp-ds-space-5) 0;
    /* Each panel is as tall as what it holds. Side by side, "Active talent
       pools" was stretched to match the form beside it, so four words sat at
       the top of an empty 300px box. */
    align-items: start;
}
.wjp-candidate-management-grid > *,
.wjp-duplicate-grid > article,
.wjp-reason-grid > form {
    min-width: 0;
    padding: var(--wpjp-ds-space-5);
    border: 1px solid var(--wpjp-border-color, #d8dee6);
    border-radius: var(--wpjp-ds-radius-sm);
    background: var(--wpjp-ds-color-surface);
}
.wjp-candidate-management-grid label,
.wjp-reason-grid label {
    display: block;
    margin: 0 0 var(--wpjp-ds-space-4);
}
/* Core's front stylesheet makes every portal checkbox display:flex, which put
   "Allow recruiters to share this reason" on the line below its box. */
.wjportal-main-up-wrapper .wjp-reason-grid label > input[type="checkbox"] {
    display: inline-block;
    vertical-align: middle;
}
.wjp-candidate-management-grid input[type="text"],
.wjp-candidate-management-grid select,
.wjp-candidate-management-grid textarea,
.wjp-reason-grid input[type="text"],
.wjp-reason-grid select,
.wjp-reason-grid textarea {
    width: 100%;
    max-width: none;
}
.wjp-pool-list article {
    padding: 12px 0;
    border-bottom: 1px solid var(--wpjp-border-color, #e5e7eb);
}
.wjp-pool-list article:last-child { border-bottom: 0; }
.wjp-pool-list form {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.wjp-pool-list form :where(input[type="text"], select, textarea) { inline-size: 100%; }
.wjp-duplicate-grid article h3 { margin-top: 0; }
.wpjobportal-recruit-candidates .wpjp-ds-card { margin-bottom: var(--wpjp-ds-space-5); }
.wpjobportal-recruit-candidates table small { display: block; color: var(--wpjp-ds-color-text-muted); }
@media (max-width: 782px) {
    .wjp-candidate-management-grid,
    .wjp-duplicate-grid,
    .wjp-reason-grid { grid-template-columns: 1fr; }
}

.wpjp-recruit-badge {
    display: inline-grid;
    min-inline-size: 1.5rem;
    block-size: 1.5rem;
    margin-inline-start: auto;
    padding-inline: var(--wpjp-ds-space-2);
    place-items: center;
    color: #fff;
    background: var(--wpjp-ds-color-danger);
    border-radius: 999px;
    font-size: var(--wpjp-ds-font-size-xs);
    line-height: 1;
}

/*
 * The dashboard panel is a card, like the Applied Jobs and Recent
 * Applications panels either side of it.
 *
 * Core draws those cards from `.wjportal-cp-graph-wrp.wjportal-cp-sect-wrp`
 * and `.wjportal-cp-sect-wrp.wjportal-applied-resume-wrp` - its own two
 * panels, by name - so this one carried the shared class and none of the
 * card: its stat tiles stood against nothing and its links sat on the next
 * panel's border. The values are Core's, through Core's own variables.
 */
.wjportal-cp-sect-wrp.wpjp-recruit-dashboard {
    width: 100%;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: 10px;
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.08));
}

/* No company yet: one sentence and the way to fix it, side by side. */
.wpjp-recruit-needs-company-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wpjp-ds-space-3);
}

.wpjp-recruit-needs-company-note p {
    flex: 1 1 18rem;
    margin: 0;
    color: var(--wpjp-ds-color-text-muted);
}

/* The 16px Recent Applications keeps between its title rule and its list. */
.wpjp-recruit-dashboard > .wjportal-cp-cnt {
    padding-block-start: 16px;
}

.wpjp-recruit-dashboard .wjportal-cp-sec-title {
    display: flex;
    align-items: center;
    gap: var(--wpjp-ds-space-2);
}

.wpjp-recruit-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wpjp-ds-space-3);
}

.wpjp-recruit-stat {
    display: grid;
    gap: var(--wpjp-ds-space-1);
    padding: var(--wpjp-ds-space-4);
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-canvas);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-md);
    text-align: center;
}

.wpjp-recruit-stat strong {
    color: var(--wpjp-secondary-color, #333333);
    font-weight: 700;
    font-size: var(--wpjp-ds-font-size-xl);
}

.wpjp-recruit-stat span {
    color: var(--wpjp-ds-color-text-muted);
    font-size: var(--wpjp-ds-font-size-sm);
}

.wpjp-recruit-quick-links,
.wpjp-recruit-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--wpjp-ds-space-2);
    margin-block-start: var(--wpjp-ds-space-4);
}

.wpjp-recruit-quick-links a,
.wpjp-recruit-tabs a {
    padding: var(--wpjp-ds-space-2) var(--wpjp-ds-space-4);
    color: var(--wpjp-ds-color-primary);
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-primary);
    border-radius: var(--wpjp-ds-radius-md);
    text-decoration: none;
}

.wpjp-recruit-tabs {
    margin-block: 0 var(--wpjp-ds-space-5);
    padding: var(--wpjp-ds-space-3);
    overflow-x: auto;
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-lg);
    scrollbar-width: thin;
}

.wpjp-recruit-tabs a {
    flex: 0 0 auto;
    white-space: nowrap;
}

.wpjp-recruit-tabs a.is-active {
    color: #fff;
    background: var(--wpjp-ds-color-primary);
}

.wpjp-recruit-list-context,
.wpjp-recruit-resume-context {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wpjp-ds-space-3);
    margin: 0 var(--wpjp-ds-space-4) var(--wpjp-ds-space-4);
    padding: var(--wpjp-ds-space-3) var(--wpjp-ds-space-4);
    color: var(--wpjp-ds-color-text);
    background: color-mix(in srgb, var(--wpjp-ds-color-primary) 7%, var(--wpjp-ds-color-surface));
    border: 1px solid color-mix(in srgb, var(--wpjp-ds-color-primary) 25%, var(--wpjp-ds-color-border));
    border-radius: var(--wpjp-ds-radius-md);
}

.wpjp-recruit-list-context > span,
.wpjp-recruit-resume-context > span {
    flex: 1 1 auto;
}

.wpjp-recruit-list-context a,
.wpjp-recruit-resume-context a {
    color: var(--wpjp-ds-color-primary);
    font-weight: 600;
}

.wpjobportal-candidate-portal {
    color: var(--wpjp-ds-color-text);
}

.wpjobportal-candidate-portal .wjp-candidate-hero {
    display: flex;
    /* Centred: the page header above now carries the portal's name, so the
       band holds a label and a sentence, and a label on the bottom edge of
       a band read as something that had slipped. */
    align-items: center;
    justify-content: space-between;
    gap: var(--wpjp-ds-space-6);
    margin-block-end: var(--wpjp-ds-space-5);
    padding: var(--wpjp-ds-space-6);
    color: #fff;
    /*
     * The same band Core draws, not a second one of our own.
     *
     * Core's control panel band runs primary down to secondary, vertically,
     * on a 10px corner. This ran secondary to primary at 135deg on a 14px
     * one - Core's two colours, reversed and turned, which is enough to read
     * as another product's header sitting inside this one. Same direction,
     * same order and same corner as .wjportal-cp-top now.
     *
     * Painted at the height Core's band has and clipped, for the reason that
     * band needs it too: secondary is a text colour, near black, and across
     * 176px of hero the full gradient arrives there in a few centimetres.
     */
    background-color: var(--wpjp-ds-color-primary-strong);
    background-image: linear-gradient(var(--wpjp-ds-color-primary), var(--wpjp-ds-color-primary-strong));
    background-size: 100% 758px;
    background-repeat: no-repeat;
    border-radius: var(--wpjp-ds-radius-md);
}

.wpjobportal-candidate-portal .wjp-candidate-hero span {
    font-size: var(--wpjp-ds-font-size-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .85;
}

.wpjobportal-candidate-portal .wjp-candidate-hero h2 {
    margin: var(--wpjp-ds-space-1) 0 0;
    color: #fff;
}

.wpjobportal-candidate-portal .wjp-candidate-hero p {
    max-inline-size: 30rem;
    margin: 0;
}

.wpjobportal-candidate-portal .wjp-candidate-picker,
.wpjobportal-candidate-portal .wjp-candidate-summary {
    display: flex;
    align-items: center;
    gap: var(--wpjp-ds-space-3);
    margin-block: var(--wpjp-ds-space-4);
    padding: var(--wpjp-ds-space-4);
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
}

.wpjobportal-candidate-portal .wjp-candidate-picker select {
    min-inline-size: 22rem;
}

/* The picker and its button are one control: the button takes the field's
   height rather than standing 7px shorter beside it. */
.wpjobportal-candidate-portal .wjp-candidate-picker {
    align-items: stretch;
}

.wpjobportal-candidate-portal .wjp-candidate-picker label {
    align-self: center;
}

.wpjobportal-candidate-portal :where(select, button, .wjp-candidate-button) {
    min-block-size: var(--wpjp-ds-control-height);
    box-sizing: border-box;
    /* A <button> takes the browser's own 13.333px unless something says
       otherwise, which is a size no other control on these pages uses. */
    font: inherit;
    font-size: var(--wpjp-body-font-size, 17px);
    /*
     * The size of the Core button standing next to it.
     *
     * This page already renders .wjportal-form-btn - Core's own - at 10px by
     * 15px on an 8px corner, and these were 8px by 12px on a 6px one, so two
     * button shapes sat side by side in the same card. Matching the neighbour
     * beats matching a spec sheet: whatever the design system says in the
     * abstract, what a reader compares this control against is the one an inch
     * away from it.
     */
    padding: 10px 15px;
    border: 1px solid var(--wpjp-ds-color-primary);
    border-radius: 8px;
}

.wpjobportal-candidate-portal :where(button, .wjp-candidate-button.is-primary) {
    color: #fff;
    background: var(--wpjp-ds-color-primary);
    cursor: pointer;
}

.wpjobportal-candidate-portal .wjp-candidate-summary {
    justify-content: space-between;
    background: color-mix(in srgb, var(--wpjp-ds-color-primary) 6%, var(--wpjp-ds-color-surface));
}

.wpjobportal-candidate-portal .wjp-candidate-summary h3 {
    margin: var(--wpjp-ds-space-1) 0;
}

.wpjobportal-candidate-portal .wjp-candidate-summary h3 .wjp-candidate-job-link {
    color: inherit;
    text-decoration: none;
}

.wpjobportal-candidate-portal .wjp-candidate-summary h3 .wjp-candidate-job-link:hover,
.wpjobportal-candidate-portal .wjp-candidate-summary h3 .wjp-candidate-job-link:focus-visible {
    text-decoration: underline;
}

.wpjobportal-candidate-portal .wjp-candidate-summary > div:last-child {
    display: grid;
    justify-items: end;
    gap: var(--wpjp-ds-space-1);
}

.wpjobportal-candidate-portal .wjp-candidate-summary > div:last-child strong {
    color: var(--wpjp-secondary-color, #333333);
    font-weight: 700;
    font-size: var(--wpjp-ed-fs-h3, var(--wpjp-ds-font-size-lg));
}

.wpjobportal-candidate-portal .wjp-candidate-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wpjp-ds-space-4);
}

.wpjobportal-candidate-portal .wjp-candidate-portal-card {
    margin-block-end: var(--wpjp-ds-space-4);
    padding: var(--wpjp-ds-space-5);
    background: var(--wpjp-card-background, #fff);
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: var(--wpjp-ed-radius, 12px);
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.08));
}

/*
 * One card corner on the page.
 *
 * The messages panel is a .wpjp-ds-card, and the design system gives that
 * radius-lg - so it sat at 14px among five cards at 12px, which is this
 * plugin's card corner and what the job and resume cards either side of the
 * portal use. Two classes, because the design system's own rule weighs one
 * and a tie would be settled by load order instead of by intent.
 */
.wpjobportal-candidate-portal .wpjp-ds-card {
    border-radius: var(--wpjp-ed-radius, 12px);
}

.wpjobportal-candidate-portal .wjp-candidate-portal-card h3 {
    margin-block-start: 0;
}

.wpjobportal-candidate-portal .wjp-candidate-intro,
.wpjobportal-candidate-portal .wjp-candidate-item small,
.wpjobportal-candidate-portal .wjp-candidate-privacy {
    color: var(--wpjp-ds-color-text-muted);
}

.wpjobportal-candidate-portal .wjp-candidate-item,
.wpjobportal-candidate-portal .wjp-candidate-notification {
    margin-block-start: var(--wpjp-ds-space-3);
    padding: var(--wpjp-ds-space-4);
    background: var(--wpjp-ds-color-canvas);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-md);
}

.wpjobportal-candidate-portal .wjp-candidate-notification {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wpjp-ds-space-4);
}

.wpjobportal-candidate-portal .wjp-candidate-notification.is-unread {
    border-inline-start: 4px solid var(--wpjp-ds-color-primary);
}

.wpjobportal-candidate-portal .wjp-candidate-notification p {
    margin-block: var(--wpjp-ds-space-1);
}

/* --- Answering an offer --- */
/* Two one-button forms and, once answered, a sentence in their place. They sit
   in the same row as Download and Review-and-sign, so they line up with them
   rather than stacking underneath. */

.wpjobportal-candidate-portal .wjp-candidate-offer-answer {
    display: inline-flex;
    margin: 0;
}

.wpjobportal-candidate-portal .wjp-candidate-offer-answered {
    align-self: center;
    font-weight: 600;
}

/* --- The updates list --- */
/* Its heading carries a clear-everything button, and a row can stand for the
   same thing said many times, so it says how many. */

.wpjobportal-candidate-portal .wjp-candidate-updates-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wpjp-ds-space-3);
    flex-wrap: wrap;
}

.wpjobportal-candidate-portal .wjp-candidate-updates-head h3 {
    margin: 0;
}

.wpjobportal-candidate-portal .wjp-candidate-updates-clear {
    margin: 0;
}

.wpjobportal-candidate-portal .wjp-candidate-repeat {
    display: inline-block;
    margin-inline-start: var(--wpjp-ds-space-2);
    padding: 1px 8px;
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: 999px;
    font-size: 13px;
    color: var(--wpjp-ds-color-text-muted);
    white-space: nowrap;
}

/* The job an update belongs to, beside when it arrived. Two flex children
   rather than two inline runs in one sentence: a line that mixes a link and a
   date reorders unpredictably in a right-to-left page, where a flex row simply
   turns around. */
.wpjobportal-candidate-portal .wjp-candidate-update-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.wpjobportal-candidate-portal .wjp-candidate-update-time {
    color: var(--wpjp-ds-color-text-muted);
}

.wpjobportal-candidate-portal .wjp-candidate-updates-more {
    margin-block-start: var(--wpjp-ds-space-3);
    margin-block-end: 0;
}

.wpjobportal-candidate-portal .wjp-candidate-item.is-completed,
.wpjobportal-candidate-portal .wjp-candidate-item.is-cancelled {
    opacity: .65;
}

.wpjobportal-candidate-portal .wjp-candidate-item-head,
.wpjobportal-candidate-portal .wjp-candidate-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--wpjp-ds-space-2);
}

.wpjobportal-candidate-portal .wjp-candidate-item-head span,
.wpjobportal-candidate-portal .wjp-signature-state {
    padding: var(--wpjp-ds-space-1) var(--wpjp-ds-space-2);
    color: var(--wpjp-ds-color-primary);
    background: color-mix(in srgb, var(--wpjp-ds-color-primary) 10%, var(--wpjp-ds-color-surface));
    border-radius: 999px;
    font-size: var(--wpjp-ds-font-size-xs);
    text-transform: uppercase;
}

.wpjobportal-candidate-portal .wjp-candidate-item .is-overdue {
    color: var(--wpjp-ds-color-danger);
    font-weight: 700;
}

.wpjobportal-candidate-portal .wjp-candidate-button {
    display: inline-flex;
    align-items: center;
    color: var(--wpjp-ds-color-primary);
    background: var(--wpjp-ds-color-surface);
    text-decoration: none;
}

.wpjobportal-candidate-portal .wjp-candidate-actions {
    justify-content: flex-start;
    margin-block-start: var(--wpjp-ds-space-4);
}

.wpjobportal-candidate-portal .wjp-candidate-offers dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wpjp-ds-space-2);
}

.wpjobportal-candidate-portal .wjp-candidate-offers dl div,
.wpjobportal-candidate-portal .wjp-candidate-empty {
    padding: var(--wpjp-ds-space-3);
    background: var(--wpjp-ds-color-canvas);
    border-radius: var(--wpjp-ds-radius-sm);
}

.wpjobportal-candidate-portal .wjp-candidate-offers dt {
    color: var(--wpjp-ds-color-text-muted);
    font-size: var(--wpjp-ds-font-size-xs);
    text-transform: uppercase;
}

.wpjobportal-candidate-portal .wjp-candidate-offers dd {
    margin: var(--wpjp-ds-space-1) 0 0;
}

.wpjobportal-candidate-portal .wjp-candidate-terms {
    padding: var(--wpjp-ds-space-3);
    background: var(--wpjp-ds-color-canvas);
    border-inline-start: 3px solid var(--wpjp-ds-color-primary);
}

.wpjobportal-candidate-portal .wjp-candidate-empty,
.wpjobportal-candidate-portal .wjp-candidate-privacy {
    text-align: center;
}

.wpjobportal-candidate-portal .wjp-candidate-notice {
    margin-block: var(--wpjp-ds-space-3);
    padding: var(--wpjp-ds-space-3) var(--wpjp-ds-space-4);
    background: var(--wpjp-ds-color-surface);
    border-inline-start: 4px solid var(--wpjp-ds-color-primary);
}

.wpjobportal-candidate-portal .wjp-candidate-notice.is-success {
    border-inline-start-color: var(--wpjp-ds-color-success);
}

.wpjobportal-candidate-portal .wjp-candidate-notice.is-error {
    border-inline-start-color: var(--wpjp-ds-color-danger);
}

/* Frontend recruiter components inherit the base portal rather than wp-admin colours. */
.wpjp-recruit-center :where(.wpjobportal-recruit-pipeline.is-frontend, .wpjobportal-recruit-workspace.is-frontend, .wpjobportal-recruit-automation.is-frontend, .wpjobportal-recruit-insights.is-frontend) {
    max-inline-size: none;
    margin: 0;
    padding: 0;
    color: var(--wpjp-ds-color-text);
}

.wpjp-recruit-center .wpjobportal-recruit-pipeline.is-frontend .wjp-pipeline-toolbar,
.wpjp-recruit-center .wpjobportal-recruit-pipeline.is-frontend .wjp-kanban-column,
.wpjp-recruit-center .wpjobportal-recruit-pipeline.is-frontend .wjp-candidate-card {
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-surface);
    border-color: var(--wpjp-ds-color-border);
}

.wpjp-recruit-center .wpjobportal-recruit-pipeline.is-frontend .wjp-kanban-column {
    background: var(--wpjp-ds-color-canvas);
}

.wpjobportal-recruit-team.is-frontend .wpjp-team-company-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wpjp-ds-space-2);
    margin-block: var(--wpjp-ds-space-5);
    padding: var(--wpjp-ds-space-4);
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-md);
}

.wpjobportal-recruit-team.is-frontend .wpjp-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: var(--wpjp-ds-space-5);
    align-items: start;
}

/* The members table is a .widefat, which is a WordPress admin class carrying
   a 576px minimum - wider than this card, which was hiding what would not
   fit. A table too wide for its box scrolls; it does not get trimmed. */
.wpjobportal-recruit-team.is-frontend .wpjp-team-card {
    overflow-x: auto;
    max-inline-size: none;
    /* A look's card measurements where one is installed; Core's otherwise. */
    padding: var(--wpjp-ed-gap-4, var(--wpjp-ds-space-5));
    background: var(--wpjp-card-background, #fff);
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: var(--wpjp-ed-radius, 12px);
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.08));
}

/*
 * The front end prints the members table as .wjportal-table-wrp (wp-admin's
 * .widefat is the admin class), so rules written for .widefat never reached
 * it: cells had 1px padding and centred headers. Same look as the team view
 * inside the employer dashboard.
 */
.wpjobportal-recruit-team.is-frontend .wpjp-team-card table.wjportal-table-wrp {
    inline-size: 100%;
    min-inline-size: 36rem;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    background: var(--wpjp-card-background, #fff);
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: var(--wpjp-ed-radius, 12px);
    box-shadow: none;
    overflow: hidden;
}

.wpjobportal-recruit-team.is-frontend .wpjp-team-card table.wjportal-table-wrp :where(th, td) {
    padding: var(--wpjp-ds-space-3) var(--wpjp-ds-space-4);
    color: var(--wpjp-ds-color-text);
    text-align: start;
    vertical-align: middle;
    border: 0;
    border-block-end: 1px solid var(--wpjp-border-color, #e9ecef);
}

.wpjobportal-recruit-team.is-frontend .wpjp-team-card table.wjportal-table-wrp th {
    color: var(--wpjp-ds-color-text-muted);
    background: var(--wpjp-ds-color-canvas);
    font-size: var(--wpjp-ds-font-size-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wpjobportal-recruit-team.is-frontend .wpjp-team-card table.wjportal-table-wrp tbody tr:last-child td {
    border-block-end: 0;
}

.wpjobportal-recruit-team.is-frontend .wpjp-team-card table.wjportal-table-wrp tbody tr:hover td {
    background: color-mix(in srgb, var(--wpjp-primary-color, #3baeda) 4%, var(--wpjp-card-background, #fff));
}

.wpjobportal-recruit-team.is-frontend .wpjp-team-card table.wjportal-table-wrp td small {
    color: var(--wpjp-ds-color-text-muted);
}

.wpjobportal-recruit-team.is-frontend .wpjp-team-card table.wjportal-table-wrp form {
    margin: 0;
}

/* "No members found." / "No member matches that search." - the one full-width cell. */
.wpjobportal-recruit-team.is-frontend .wpjp-team-card table.wjportal-table-wrp td[colspan] {
    padding: var(--wpjp-ds-space-5) var(--wpjp-ds-space-4);
    color: var(--wpjp-ds-color-text-muted);
    text-align: center;
}

.wpjobportal-recruit-team.is-frontend .wpjp-team-card table.wjportal-table-wrp tbody tr:hover td[colspan] {
    background: transparent;
}

.wpjp-recruit-center :where(.wjp-workspace-card, .wjp-auto-panel, .wjp-auto-cards article, .wjp-insights-card, .wjp-insights-panel) {
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-surface);
    border-color: var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.08));
}

.wpjp-recruit-center :where(.button, a.button) {
    display: inline-flex;
    min-block-size: var(--wpjp-ds-control-height);
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: var(--wpjp-ds-space-2) var(--wpjp-ds-space-3);
    color: var(--wpjp-ds-color-primary);
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-primary);
    border-color: var(--wpjp-ds-color-primary);
    border-radius: var(--wpjp-ds-radius-md);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.wpjp-recruit-center :where(.button-primary, button.button-primary) {
    color: #fff;
    background: var(--wpjp-ds-color-primary);
    border-color: var(--wpjp-ds-color-primary);
}

.wpjp-recruit-center :where(.button-link, .button-link-delete) {
    display: inline-flex;
    min-block-size: 2.25rem;
    align-items: center;
    padding: var(--wpjp-ds-space-1) var(--wpjp-ds-space-2);
    color: var(--wpjp-ds-color-primary);
    background: transparent;
    border: 0;
    border-radius: var(--wpjp-ds-radius-sm);
    font: inherit;
    cursor: pointer;
}

.wpjp-recruit-center .button-link-delete {
    color: var(--wpjp-ds-color-danger);
}

.wpjp-recruit-center :where(.wjp-summary-kicker, .wjp-auto-type, .wjp-insights-heading > div > span) {
    color: var(--wpjp-secondary-color, #333333);
}

@media (max-width: 780px) {
    .wpjp-recruit-stats,
    .wpjobportal-candidate-portal .wjp-candidate-grid,
    .wpjobportal-candidate-portal .wjp-candidate-offers dl {
        grid-template-columns: 1fr 1fr;
    }

    .wpjobportal-candidate-portal .wjp-candidate-hero,
    .wpjobportal-candidate-portal .wjp-candidate-summary,
    .wpjobportal-candidate-portal .wjp-candidate-picker {
        align-items: stretch;
        flex-direction: column;
    }

    .wpjobportal-candidate-portal .wjp-candidate-picker select {
        min-inline-size: 0;
        inline-size: 100%;
    }

    .wpjobportal-candidate-portal .wjp-candidate-summary > div:last-child {
        justify-items: start;
    }
}

/* Recruit Suite 2.0 native dashboard and application-detail integration. */
.wpjp-native-recruit-view,
.wpjp-native-application-workflow {
    color: var(--wpjp-ds-color-text);
    font-family: inherit;
}

.wpjp-native-view-heading {
    margin: 0 0 var(--wpjp-ds-space-5);
    padding: var(--wpjp-ds-space-4);
    color: var(--wpjp-ds-color-text-muted);
    background: var(--wpjp-ds-color-canvas);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-md);
    font-size: var(--wpjp-ds-font-size-sm);
    font-weight: 400;
}

.wpjp-native-recruit-metrics {
    margin: 0 0 var(--wpjp-ds-space-5);
}

.wpjp-native-recruit-metrics .wjportal-cp-box {
    min-width: 0;
}

/*
 * These screens are drawn inside the employer control panel, in a column of
 * about 486px, not across the page. A media query asks the window how wide it
 * is and the window says 1280, so the rule further down that collapses this
 * to one column never fired: 486px was split into 194 and 272, and a three
 * word heading came out over four lines.
 *
 * Asking for a minimum column width instead lets the grid answer to the box
 * it is actually in, at any window size.
 */
.wpjp-native-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--wpjp-ds-space-5);
}

.wpjp-native-job-list,
.wpjp-native-candidate-list,
.wpjp-native-work-list {
    display: grid;
    gap: var(--wpjp-ds-space-4);
}

.wpjp-native-job-card,
.wpjp-native-candidate-card,
.wpjp-native-work-item {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

/*
 * The featured ribbon and its hover label are spans too, but their fill is
 * the whole point of them - clearing it left an invisible corner that cut
 * into the candidate's name.
 */
.wpjp-native-job-card :where(h2, h3, p, span:not(.wjportal-featured-tag-icon, .wjportal-featured-hover-wrp), strong, small),
.wpjp-native-candidate-card :where(h2, h3, p, span:not(.wjportal-featured-tag-icon, .wjportal-featured-hover-wrp), strong, small),
.wpjp-native-work-item :where(h2, h3, p, span, strong, small),
.wpjp-native-application-workflow :where(h2, h3, h4, p, span, strong, small, label) {
    background-color: transparent !important;
    box-shadow: none !important;
}

.wpjp-native-recruit-view :where(.wjp-auto-copy, .wjp-auto-copy h3, .wjp-auto-copy p, .wjp-auto-copy small, .wjp-timeline p, .wjp-timeline small) {
    background-color: transparent !important;
    box-shadow: none !important;
}

.wpjp-native-work-item .wjportal-cp-cnt {
    display: grid;
    gap: var(--wpjp-ds-space-1);
}

.wpjp-native-work-item .wjportal-cp-cnt :where(span, small) {
    color: var(--wpjp-ds-color-text-muted);
}

.wpjp-native-compact-workload {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wpjp-native-compact-workload li + li {
    border-top: 1px solid var(--wpjp-ds-color-border);
}

.wpjp-native-compact-workload a {
    display: grid;
    gap: var(--wpjp-ds-space-1);
    padding: var(--wpjp-ds-space-3) 0;
    color: var(--wpjp-ds-color-text);
    text-decoration: none;
}

.wpjp-native-compact-workload a:hover strong {
    color: var(--wpjp-ds-color-primary);
}

.wpjp-native-compact-workload span {
    color: var(--wpjp-ds-color-text-muted);
    font-size: var(--wpjp-ds-font-size-sm);
}

.wpjp-native-candidate-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, .4fr) auto;
    gap: var(--wpjp-ds-space-3);
    margin: 0 0 var(--wpjp-ds-space-5);
    padding: var(--wpjp-ds-space-4);
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-md);
    /* A raised white panel, like every other one Core puts on this page. */
    box-shadow: var(--wpjp-ds-shadow-md);
}

.wpjp-native-candidate-filter :where(input, select, button) {
    min-height: var(--wpjp-ds-control-height);
}

/* A filter with no list to choose from: the button sits in the list's column
   otherwise, stretched to a third of the bar (Tasks, Interviews, Offers). */
@media (min-width: 783px) {
    .wpjp-native-candidate-filter:not(:has(select)) {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.wpjp-native-assignees {
    margin-top: var(--wpjp-ds-space-2);
    color: var(--wpjp-ds-color-text-muted);
    font-size: var(--wpjp-ds-font-size-sm);
}

.wpjp-native-assignees.is-unassigned {
    color: var(--wpjp-ds-color-warning, #8a5a00);
}

.wpjp-native-pagination {
    margin-top: var(--wpjp-ds-space-5);
}

/* The list WordPress prints. Its links carry the same class, and this reset
   used to strip their padding, leaving "Next" against its own border. */
.wpjp-native-pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wpjp-ds-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wpjp-native-pagination a,
.wpjp-native-pagination .current {
    display: inline-grid;
    min-width: var(--wpjp-ds-control-height);
    min-height: var(--wpjp-ds-control-height);
    place-items: center;
    padding-inline: var(--wpjp-ds-space-2);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-sm);
    text-decoration: none;
}

/* Room for the words in "Next" / "Previous"; numbers keep their square. */
.wpjp-native-pagination a.page-numbers,
.wpjp-native-pagination span.page-numbers {
    padding: 0 var(--wpjp-ds-space-3, 12px);
}

/* WordPress's own text already ends in "»"; the portal's extra chevron made it two arrows. */
.wjportal-main-up-wrapper .wpjp-native-pagination .next.page-numbers::after {
    display: none;
}

.wpjp-native-pagination .current {
    color: #fff;
    background: var(--wpjp-ds-color-primary);
    border-color: var(--wpjp-ds-color-primary);
}

/* The gap marker "…" sits in line with the page buttons, at their height. */
.wpjp-native-pagination .dots {
    display: inline-grid;
    min-height: var(--wpjp-ds-control-height);
    place-items: center;
}

/*
 * Core's admin screens give every .page-numbers a padded, bordered box, and
 * by the wrapper's id, so it outranked the rules above. The list itself got a
 * box round the whole row, and the inline "…" rode above the buttons on its
 * padding. Here the list is a plain row again and the marker has no box.
 */
#wpjobportaladmin-wrapper .wpjp-native-pagination ul.page-numbers {
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
}

#wpjobportaladmin-wrapper .wpjp-native-pagination a.page-numbers,
#wpjobportaladmin-wrapper .wpjp-native-pagination span.page-numbers {
    padding: 0 var(--wpjp-ds-space-3, 12px);
}

#wpjobportaladmin-wrapper .wpjp-native-pagination .dots {
    border: 0;
    background: none;
}

.wpjp-native-application-workflow {
    clear: both;
    margin-top: var(--wpjp-ds-space-6);
}

.wpjp-native-application-workflow .wpjobportal-recruit-workspace.is-native-application {
    max-width: none;
    margin: 0;
    padding: 0;
}

.wpjp-native-application-workflow .wjp-workspace-tabs {
    flex-wrap: wrap;
    margin: 0 0 var(--wpjp-ds-space-4);
    padding: 0 0 var(--wpjp-ds-space-2);
    overflow: visible;
    border-bottom: 1px solid var(--wpjp-ds-color-border);
    scrollbar-width: thin;
}

.wpjp-native-application-workflow .wjp-workspace-tab {
    flex: 0 0 auto;
    color: var(--wpjp-ds-color-text-muted);
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
}

.wpjp-native-application-workflow .wjp-workspace-tab.is-active {
    color: var(--wpjp-ds-color-primary);
    background: transparent;
    border-bottom-color: var(--wpjp-ds-color-primary);
}

.wpjp-native-application-workflow .wjp-workspace-card,
.wpjp-native-recruit-view :where(.wjp-auto-cards article, .wjp-auto-panel, .wjp-insights-cards article, .wjp-insights-panel, .wjp-insights-empty, .wjp-candidate-management-grid > *, .wjp-duplicate-grid > article) {
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-card-background, #fff);
    border-color: var(--wpjp-border-color, #e9ecef);
}

.wpjp-native-recruit-view :where(.wpjobportal-recruit-automation, .wpjobportal-recruit-insights, .wpjobportal-recruit-pipeline, .wpjobportal-recruit-candidates, .wpjobportal-recruit-team) {
    --wjp-blue: var(--wpjp-ds-color-primary);
    --wjp-ink: var(--wpjp-ds-color-text);
    --wjp-muted: var(--wpjp-ds-color-text-muted);
    max-width: none;
    margin: 0;
    padding: 0;
}

/* The native dashboard supplies the page heading; embedded legacy headings are compatibility-only. */
.wpjp-native-recruit-view .wpjobportal-recruit-pipeline > h1,
.wpjp-native-recruit-view .wpjobportal-recruit-pipeline > h1 + p,
.wpjp-native-recruit-view .wpjobportal-recruit-team > h1,
.wpjp-native-recruit-view .wpjobportal-recruit-team > h1 + p,
.wpjp-native-recruit-view .wpjobportal-recruit-candidates > .wjp-insights-heading,
.wpjp-native-recruit-view .wpjobportal-recruit-automation > .wjp-auto-heading,
.wpjp-native-recruit-view .wpjobportal-recruit-insights > .wjp-insights-heading > div {
    display: none;
}

.wpjp-native-recruit-view :where(.wpjobportal-recruit-automation, .wpjobportal-recruit-insights, .wpjobportal-recruit-pipeline, .wpjobportal-recruit-candidates, .wpjobportal-recruit-team) :where(.button, button, input[type="submit"]),
.wpjp-native-application-workflow :where(.button, button, input[type="submit"]) {
    /*
     * The same button the rest of the control panel uses.
     *
     * These were the primary colour on white and outlined in the primary
     * colour too - 2.5:1 against the page, and louder than every button beside
     * them, so a recruiting screen read as another product's toolbar inside
     * the same page. .wjportal-jobs-act-btn is what an action button looks like
     * here: the heading colour on a neutral outline, at the body size.
     */
    min-height: var(--wpjp-ds-control-height);
    box-sizing: border-box;
    padding: 10px 15px;
    color: var(--wpjp-secondary-color, #333333);
    background: var(--wpjp-card-background, #fff);
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: 6px;
    font: inherit;
    font-size: var(--wpjp-body-font-size, 17px);
    font-weight: 500;
    line-height: 1.2;
}

.wpjp-native-recruit-view :where(.button-primary, .wjportal-form-btn, .wjportal-save-btn),
/* Not a record's own row of actions: those have a main one and quieter ones. */
.wpjp-native-application-workflow :where(.button-primary, .wjportal-form-btn, .wjportal-save-btn):not(:where(.wjp-task-actions, .wjp-interview-actions, .wjp-offer-actions, .wjp-approval-actions) *) {
    color: #fff !important;
    background: var(--wpjp-ds-color-primary) !important;
    border-color: var(--wpjp-ds-color-primary) !important;
}

.wpjp-native-recruit-view :where(.button, button, input[type="submit"]):hover,
.wpjp-native-application-workflow :where(.button, button, input[type="submit"]):hover {
    color: #fff;
    background: var(--wpjp-ds-color-primary-strong);
    border-color: var(--wpjp-ds-color-primary-strong);
}

.wpjp-native-recruit-view .button-link-delete,
.wpjp-native-application-workflow .button-link-delete {
    min-height: 0;
    padding: 0;
    color: var(--wpjp-ds-color-danger);
    background: transparent;
    border: 0;
}

.wpjp-native-recruit-view .wjp-kanban {
    padding-bottom: var(--wpjp-ds-space-5);
    overscroll-behavior-inline: contain;
    /* The stage buttons carry the affordance now, so the bar does not have
       to shout in the brand colour at full width. Thin, like every other
       scroller in this sheet. */
    scrollbar-width: thin;
}

.wpjp-native-recruit-view .wjp-kanban-navigation {
    display: flex;
    justify-content: flex-end;
    gap: var(--wpjp-ds-space-2);
    margin-bottom: var(--wpjp-ds-space-3);
}

/* The corner is said once, on the base rules above. */
.wpjp-native-recruit-view .wjp-kanban-column,
.wpjp-native-recruit-view .wjp-candidate-card {
    border-color: var(--wpjp-border-color, #e9ecef);
}

@media (max-width: 960px) {
    .wpjp-native-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 782px) {
    .wpjp-native-candidate-filter {
        grid-template-columns: 1fr;
    }

    .wpjp-native-candidate-filter button {
        width: 100%;
    }

    .wpjp-native-application-workflow .wjp-workspace-tab {
        flex: 1 1 calc(50% - var(--wpjp-ds-space-2));
        justify-content: center;
    }

    .wpjp-native-recruit-view .wjp-kanban-navigation {
        justify-content: stretch;
    }

    .wpjp-native-recruit-view .wjp-kanban-navigation .button {
        flex: 1 1 50%;
    }
}

[dir="rtl"] .wpjp-native-work-item,
[dir="rtl"] .wpjp-native-candidate-filter,
[dir="rtl"] .wpjp-native-application-workflow {
    text-align: right;
}

/* Recruit Suite 1.9.1: recruiter-route identity, role clarity, and theme hardening. */
body.wpjp-recruit-center-route :where(.wp-block-post-title, .entry-title, .page-title) {
    display: none !important;
}

body.wpjp-recruit-center-route .wp-block-post-content {
    margin-block-start: 0;
}

.wpjp-recruit-center {
    min-inline-size: 0;
}

.wpjp-recruit-center :where(input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="password"], select, textarea) {
    box-sizing: border-box;
    max-inline-size: 100%;
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-md);
}

.wpjobportal-recruit-team.is-frontend :where(input[type="text"], select) {
    inline-size: 100%;
    min-block-size: var(--wpjp-ds-control-height);
}

.wpjobportal-recruit-team.is-frontend .wpjp-team-company-picker select {
    flex: 1 1 20rem;
}

.wjp-candidate-management-grid.is-read-only {
    grid-template-columns: 1fr;
}

.wpjobportal-recruit-pipeline,
.wpjobportal-recruit-pipeline .wjp-kanban {
    min-inline-size: 0;
    max-inline-size: 100%;
}

.wpjobportal-recruit-pipeline .wjp-kanban {
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

@media (max-width: 520px) {
    .wpjp-recruit-stats,
    .wpjobportal-candidate-portal .wjp-candidate-grid,
    .wpjobportal-candidate-portal .wjp-candidate-offers dl {
        grid-template-columns: 1fr;
    }

    .wpjobportal-candidate-portal .wjp-candidate-notification {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wpjp-recruit-center *,
    .wpjobportal-candidate-portal * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Recruit Suite 1.9.2: native WP Job Portal shortcode reference cards. */
.wpjp-recruit-admin-shortcodes {
    clear: both;
    margin-block-start: 28px;
}

.wpjp-recruit-admin-shortcodes-heading {
    margin: 0 0 16px;
    padding: 20px;
    border-inline-start: 4px solid var(--wpjp-ds-color-primary, #2271b1);
    background: var(--wpjp-ds-color-surface, #fff);
}

.wpjp-recruit-admin-shortcodes-heading h2,
.wpjp-recruit-admin-shortcodes-heading p {
    margin: 0;
}

.wpjp-recruit-admin-shortcodes-heading p {
    margin-block-start: 6px;
    color: var(--wpjp-ds-color-text-muted);
}

.wpjp-recruit-recommended {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 3px 8px;
    color: #fff;
    background: var(--wpjp-ds-color-primary, #2271b1);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: middle;
}

/* Recruit Suite 1.8.1: native, scalable workspace controls. */
.wpjobportal-recruit-workspace {
    inline-size: 100%;
    max-inline-size: none;
    color: var(--wpjp-ds-color-text);
}

.wpjobportal-recruit-workspace .wjp-workspace-picker {
    display: grid;
    grid-template-columns: minmax(8rem, auto) minmax(18rem, 1fr) auto;
    gap: var(--wpjp-ds-space-3);
    align-items: center;
    padding: var(--wpjp-ds-space-4);
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-card-background, #fff);
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: var(--wpjp-ed-radius, 12px);
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.08));
}

.wpjobportal-recruit-workspace .wjp-workspace-picker .wjportal-form-title,
.wpjobportal-recruit-workspace .wjp-workspace-picker .wjportal-form-value {
    float: none;
    inline-size: auto;
    margin: 0;
    padding: 0;
}

.wpjobportal-recruit-workspace .wjp-workspace-picker-value,
.wpjobportal-recruit-workspace .chosen-container {
    min-inline-size: 0;
    inline-size: 100% !important;
}

.wpjobportal-recruit-workspace .chosen-container-single .chosen-single {
    /* The height of the Open workspace button beside it and of every other field. */
    min-block-size: var(--wpjp-field-height, 55px);
    box-sizing: border-box;
    padding: .625rem 2.25rem .625rem .75rem;
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-md);
    box-shadow: none;
    line-height: 1.45rem;
}

.wpjobportal-recruit-workspace .chosen-container-single .chosen-drop {
    border-color: var(--wpjp-ds-color-border);
    border-radius: 0 0 var(--wpjp-ds-radius-md) var(--wpjp-ds-radius-md);
    box-shadow: var(--wpjp-ds-shadow-md);
}

.wpjobportal-recruit-workspace .chosen-container .chosen-results li.highlighted {
    color: #fff;
    background: var(--wpjp-ds-color-primary);
}

.wpjobportal-recruit-workspace .wjp-workspace-tabs {
    display: flex;
    gap: var(--wpjp-ds-space-2);
    margin-block: var(--wpjp-ds-space-4);
    padding: var(--wpjp-ds-space-2);
    overflow-x: auto;
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-lg);
    scrollbar-width: thin;
}

.wpjobportal-recruit-workspace .wjp-workspace-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--wpjp-ds-space-2);
    min-block-size: 2.6rem;
    padding: var(--wpjp-ds-space-2) var(--wpjp-ds-space-3);
    color: var(--wpjp-ds-color-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--wpjp-ds-radius-md);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.wpjobportal-recruit-workspace .wjp-workspace-tab:hover,
.wpjobportal-recruit-workspace .wjp-workspace-tab:focus-visible {
    color: var(--wpjp-ds-color-primary);
    background: var(--wpjp-ds-color-canvas);
}

.wpjobportal-recruit-workspace .wjp-workspace-tab.is-active {
    color: #fff;
    background: var(--wpjp-ds-color-primary);
    border-color: var(--wpjp-ds-color-primary);
}

/*
 * wp-admin: core's div#wpjobportaladmin-wrapper a:hover outranks the two
 * rules above and turned a hovered tab's text dark indigo - on the active
 * tab, dark indigo on indigo. The id keeps the tab's own colours.
 */
#wpjobportaladmin-wrapper .wpjobportal-recruit-workspace .wjp-workspace-tab:hover,
#wpjobportaladmin-wrapper .wpjobportal-recruit-workspace .wjp-workspace-tab:focus-visible {
    color: var(--wpjp-ds-color-primary);
}

#wpjobportaladmin-wrapper .wpjobportal-recruit-workspace .wjp-workspace-tab.is-active,
#wpjobportaladmin-wrapper .wpjobportal-recruit-workspace .wjp-workspace-tab.is-active:hover,
#wpjobportaladmin-wrapper .wpjobportal-recruit-workspace .wjp-workspace-tab.is-active:focus-visible {
    color: #fff;
    background: var(--wpjp-ds-color-primary);
}

.wpjobportal-recruit-workspace .wjp-workspace-tab small {
    display: inline-grid;
    min-inline-size: 1.45rem;
    block-size: 1.45rem;
    margin: 0;
    padding-inline: .3rem;
    place-items: center;
    color: var(--wpjp-ds-color-text-muted);
    background: var(--wpjp-ds-color-canvas);
    border-radius: 999px;
    font-size: var(--wpjp-ds-font-size-xs);
}

.wpjobportal-recruit-workspace .wjp-workspace-tab.is-active small {
    color: var(--wpjp-ds-color-primary-strong);
    background: var(--wpjp-ds-color-surface);
}

.wpjobportal-recruit-workspace .wjp-workspace-grid,
.wpjobportal-recruit-workspace .wjp-workspace-main {
    display: block;
}

.wpjobportal-recruit-workspace .wjp-workspace-section[hidden] {
    display: none !important;
}

.wpjobportal-recruit-workspace .wjp-workspace-section {
    inline-size: 100%;
    min-inline-size: 0;
}

.wpjobportal-recruit-workspace .wjp-workspace-card {
    padding: var(--wpjp-ds-space-5);
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-surface);
    border-color: var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.08));
}

.wpjobportal-recruit-workspace .wjp-workspace-card :where(input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], select, textarea) {
    inline-size: 100%;
    max-inline-size: 100%;
}

.wpjobportal-recruit-workspace .wjportal-form-input-field,
.wpjobportal-recruit-workspace .wjportal-form-select-field,
.wpjobportal-recruit-workspace .wjportal-form-textarea-field {
    min-block-size: var(--wpjp-ds-control-height);
    color: var(--wpjp-ds-color-text);
    background-color: var(--wpjp-ds-color-surface);
    border-color: var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-md);
}

.wpjobportal-recruit-workspace .wjportal-form-textarea-field {
    min-block-size: 7rem;
    resize: vertical;
}

.wpjobportal-recruit-workspace .wjp-task-fields,
.wpjobportal-recruit-workspace .wjp-interview-fields,
.wpjobportal-recruit-workspace .wjp-offer-fields {
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.wpjobportal-recruit-workspace .wjp-timeline {
    margin: 0;
}

/* Prevent host themes and the pipeline card class from painting strips behind portal text. */
.wpjobportal-candidate-portal :where(h2, h3, h4, p, strong, small, label, dt, dd) {
    background: transparent !important;
    box-shadow: none !important;
}

.wpjobportal-candidate-portal .wjp-candidate-portal-card {
    cursor: default;
}

.wpjobportal-candidate-portal .wjp-candidate-portal-card :where(strong, span, small) {
    margin-block-end: 0;
}

@media (max-width: 782px) {
    .wpjobportal-recruit-workspace .wjp-workspace-picker {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .wpjobportal-recruit-workspace .wjp-workspace-picker .wjportal-form-btn {
        inline-size: 100%;
        justify-content: center;
    }
}

/* Native Insights uses the shared Employer Control Panel token system. */
.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-insights-heading {
    justify-content: flex-end;
    margin: 0 0 var(--wpjp-ds-space-4);
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-insights-heading > form {
    margin: 0;
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-insights-filters {
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: var(--wpjp-ds-space-3);
    padding: var(--wpjp-ds-space-4);
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-surface);
    border-color: var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.08));
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-insights-filters label {
    gap: var(--wpjp-ds-space-2);
    color: var(--wpjp-ds-color-text);
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-insights-filters select {
    min-block-size: var(--wpjp-ds-control-height);
    padding: var(--wpjp-ds-space-2) var(--wpjp-ds-space-3);
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-surface);
    border-color: var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
    font: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-insights-filters button {
    align-self: end;
    justify-self: start;
    inline-size: auto;
    min-inline-size: 10rem;
    white-space: nowrap;
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-insights-scope {
    gap: var(--wpjp-ds-space-2);
    margin: var(--wpjp-ds-space-4) 0 var(--wpjp-ds-space-2);
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-insights-scope > * {
    padding: var(--wpjp-ds-space-1) var(--wpjp-ds-space-3);
    color: var(--wpjp-secondary-color, #333333);
    background: var(--wpjp-ds-color-canvas);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: 999px;
}

/*
 * wp-admin: the scope chips and the cohort note read as one card, not as loose
 * text on the page background. They are separate items in the shell's 16px
 * grid, so the note is pulled up under the chips to close that gap.
 */
.wpjobportal-recruit-native-content .wpjobportal-recruit-insights .wjp-insights-scope {
    margin: 0;
    padding: 16px 16px 8px;
    background: var(--wjp-bg-card, #fff);
    border: 1px solid var(--wjp-border-color, #e2e8f0);
    border-block-end: 0;
    border-start-start-radius: 8px;
    border-start-end-radius: 8px;
}

/* Apply filters is this filter bar's submit, drawn like Search on the other admin lists. */
#wpjobportaladmin-wrapper .wpjobportal-recruit-insights .wjp-insights-filters button[type="submit"] {
    color: #fff;
    background: var(--wjp-color-primary, #4f46e5);
    border-color: var(--wjp-color-primary, #4f46e5);
    font-weight: 600;
}

#wpjobportaladmin-wrapper .wpjobportal-recruit-insights .wjp-insights-filters button[type="submit"]:hover,
#wpjobportaladmin-wrapper .wpjobportal-recruit-insights .wjp-insights-filters button[type="submit"]:focus-visible {
    color: #fff;
    background: var(--wjp-color-primary-dark, #4338ca);
    border-color: var(--wjp-color-primary-dark, #4338ca);
}

.wpjobportal-recruit-native-content .wpjobportal-recruit-insights .wjp-insights-scope + .description {
    margin: -16px 0 0;
    padding: 0 16px 16px;
    color: var(--wjp-text-light, #64748b);
    background: var(--wjp-bg-card, #fff);
    border: 1px solid var(--wjp-border-color, #e2e8f0);
    border-block-start: 0;
    border-end-start-radius: 8px;
    border-end-end-radius: 8px;
    font-size: 13px;
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-insights-cards {
    /*
     * At most three to a row. Five 178px cards made two ragged rows of nine
     * figures; a third of the row is now the narrowest a card may be, so a
     * desktop shows three rows of three, and 10.5rem still lets a narrow
     * screen drop to two and then one.
     */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(10.5rem, calc((100% - 2 * var(--wpjp-ds-space-3)) / 3))), 1fr));
    gap: var(--wpjp-ds-space-3);
    margin: var(--wpjp-ds-space-4) 0;
}

/* The panels under the grid stood edge to edge. */
.wpjp-native-recruit-view .wpjobportal-recruit-insights > .wjp-insights-panel + .wjp-insights-panel {
    margin-block-start: var(--wpjp-ds-space-4);
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights :where(.wjp-insights-cards article, .wjp-insights-panel, .wjp-insights-empty) {
    padding: var(--wpjp-ds-space-4);
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-insights-cards article strong {
    margin-block: var(--wpjp-ds-space-1);
    color: var(--wpjp-secondary-color, #333333);
    font-size: var(--wpjp-ds-font-size-xl);
}

/* The sentence case again, at this weight of selector, or the rule above wins. */
.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-insights-cards article strong.is-phrase {
    font-size: var(--wpjp-body-font-size, 17px);
    font-weight: 600;
    line-height: 1.4;
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-insights-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--wpjp-ds-space-3);
    margin-block-end: var(--wpjp-ds-space-3);
    /* A panel is as tall as what it holds. "Current pipeline distribution"
       has one bar in it and was stretched to the height of the two columns
       of counts beside it, which left most of it empty. */
    align-items: start;
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-insights-panel h2 {
    margin-block-start: 0;
    color: var(--wpjp-ds-color-text);
    font-size: var(--wpjp-ed-fs-h3, var(--wpjp-ds-font-size-lg));
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights :where(.wjp-muted, .description, .wjp-insights-cards article small, .wjp-insights-cards article span) {
    color: var(--wpjp-ds-color-text-muted);
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-stage-track {
    background: var(--wpjp-ds-color-canvas);
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-status-groups p,
.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-workload-table :where(th, td) {
    border-color: var(--wpjp-ds-color-border);
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-workload-table :where(th, td) {
    padding: var(--wpjp-ds-space-3);
    color: var(--wpjp-ds-color-text);
}

.wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-workload-table th {
    color: var(--wpjp-ds-color-text-muted);
}

@media (max-width: 782px) {
    .wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-insights-heading,
    .wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-insights-heading > form,
    .wpjp-native-recruit-view .wpjobportal-recruit-insights .wjp-insights-filters button {
        inline-size: 100%;
    }
}

/* Native Recruit Suite view convergence: keep legacy and wp-admin surfaces untouched. */
.wpjp-native-recruit-view :where(.wpjobportal-recruit-pipeline, .wpjobportal-recruit-automation, .wpjobportal-recruit-candidates, .wpjobportal-recruit-team),
.wpjp-native-application-workflow .wpjobportal-recruit-workspace {
    color: var(--wpjp-ds-color-text);
}

.wpjp-native-recruit-view :where(input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="url"], input[type="password"], select, textarea),
.wpjp-native-application-workflow :where(input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="url"], input[type="password"], select, textarea) {
    min-block-size: var(--wpjp-ds-control-height);
    box-sizing: border-box;
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-sm);
    font: inherit;
}

.wpjp-native-recruit-view :where(.wjp-pipeline-toolbar, .wpjp-team-company-picker),
.wpjp-native-application-workflow :where(.wjp-workspace-picker) {
    gap: var(--wpjp-ds-space-3);
    margin-block: 0 var(--wpjp-ds-space-4);
    padding: var(--wpjp-ds-space-4);
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-surface);
    border-color: var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.08));
}

.wpjp-native-recruit-view .wjp-pipeline-toolbar form {
    gap: var(--wpjp-ds-space-2);
}

.wpjp-native-recruit-view .wjp-stage-create input[type="text"] {
    min-inline-size: min(12rem, 100%);
}

.wpjp-native-recruit-view .wjp-kanban-column {
    min-block-size: 18rem;
    background: var(--wpjp-ds-color-canvas);
}

.wpjp-native-recruit-view .wjp-kanban-column > header {
    padding: var(--wpjp-ds-space-3) var(--wpjp-ds-space-4);
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-surface);
}

.wpjp-native-recruit-view .wjp-kanban-cards {
    padding: var(--wpjp-ds-space-3);
}

.wpjp-native-recruit-view .wjp-candidate-card {
    margin-block-end: var(--wpjp-ds-space-3);
    padding: var(--wpjp-ds-space-3);
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-card-background, #fff);
}

.wpjp-native-recruit-view .wjp-candidate-card :where(span, small, .wjp-card-assignment),
.wpjp-native-recruit-view :where(.wjp-auto-copy small, .wjp-auto-copy > div, .wjp-auto-check small, .wjp-signature-list span, .wjp-signature-list small) {
    color: var(--wpjp-ds-color-text-muted);
}

.wpjp-native-recruit-view :where(.wjp-stage-count, .wjp-status-pill, .wjp-priority) {
    color: var(--wpjp-ds-color-primary);
    background: var(--wpjp-ds-color-canvas);
}

.wpjp-native-recruit-view .wjp-card-move {
    align-items: center;
    gap: var(--wpjp-ds-space-2);
}

.wpjp-native-recruit-view .wjp-card-move select {
    min-block-size: 2.25rem;
}

.wpjp-native-recruit-view :where(.wjp-auto-cards, .wjp-auto-list, .wjp-signature-list) {
    gap: var(--wpjp-ds-space-3);
}

.wpjp-native-recruit-view .wjp-auto-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(11.5rem, 100%), 1fr));
    margin-block: 0 var(--wpjp-ds-space-4);
}

.wpjp-native-recruit-view :where(.wjp-auto-cards article, .wjp-auto-panel, .wjp-signature-list article) {
    padding: var(--wpjp-ds-space-4);
}

.wpjp-native-recruit-view .wjp-auto-cards strong {
    margin-block: var(--wpjp-ds-space-1);
    color: var(--wpjp-secondary-color, #333333);
    font-weight: 700;
    font-size: var(--wpjp-ds-font-size-xl);
}

/*
 * These three numbers are all said in the primary colour, which is right for
 * a count and wrong for a state: "Disabled" in the same confident blue as
 * "7" reads as something working. A state that is off is said quietly, and
 * one that is on keeps the colour.
 */
.wpjp-native-recruit-view .wjp-auto-cards strong.is-off {
    color: var(--wpjp-ds-color-text-muted);
}

.wpjp-native-recruit-view .wjp-auto-cards strong.is-on {
    color: var(--wpjp-ds-color-success, #1a7f5a);
}

.wpjp-native-recruit-view .wjp-auto-list > article,
.wpjp-native-recruit-view .wjp-auto-check,
.wpjp-native-recruit-view .wjp-signature-list article {
    gap: var(--wpjp-ds-space-3);
    padding: var(--wpjp-ds-space-3);
    background: var(--wpjp-ds-color-canvas);
    border-color: var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-sm);
}

.wpjp-native-recruit-view .wjp-auto-list > article.is-unread {
    border-color: var(--wpjp-ds-color-primary);
    background: color-mix(in srgb, var(--wpjp-ds-color-primary) 6%, var(--wpjp-ds-color-surface));
}

.wpjp-native-recruit-view .wjp-auto-icon {
    background: color-mix(in srgb, var(--wpjp-ds-color-primary) 12%, var(--wpjp-ds-color-surface));
    color: var(--wpjp-secondary-color, #333333);
    border-radius: var(--wpjp-ds-radius-sm);
}

.wpjp-native-recruit-view .wjp-auto-panel h2,
.wpjp-native-recruit-view :where(.wpjp-ds-card h2, .wpjp-team-card h2) {
    color: var(--wpjp-ds-color-text);
}

.wpjp-native-recruit-view .wpjobportal-recruit-candidates :where(.wpjp-ds-card, .wjp-candidate-management-grid > *, .wjp-duplicate-grid > article, .wjp-reason-grid > form) {
    /* A look's card measurements where one is installed; Core's otherwise. */
    padding: var(--wpjp-ed-gap-4, var(--wpjp-ds-space-4));
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-surface);
    border-color: var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.08));
}

.wpjp-native-recruit-view .wpjobportal-recruit-candidates :where(.wjp-candidate-management-grid, .wjp-duplicate-grid, .wjp-reason-grid) {
    gap: var(--wpjp-ds-space-3);
    margin-block: var(--wpjp-ds-space-4);
}

.wpjp-native-recruit-view .wpjobportal-recruit-candidates .wjp-empty {
    color: var(--wpjp-ds-color-text-muted);
    background: var(--wpjp-ds-color-canvas);
}

.wpjp-native-recruit-view .wpjobportal-recruit-team .wpjp-team-grid {
    gap: var(--wpjp-ds-space-4);
}

.wpjp-native-recruit-view .wpjobportal-recruit-team .wpjp-team-card {
    /* Same members table, same admin 576px minimum, same narrow column - this
       is the copy of the card the native dashboard draws. */
    overflow-x: auto;
    padding: var(--wpjp-ds-space-4);
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-surface);
    border-color: var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.08));
}

.wpjp-native-recruit-view .wpjobportal-recruit-team .widefat :where(th, td),
.wpjp-native-recruit-view .wpjobportal-recruit-candidates .wjp-workload-table :where(th, td) {
    padding: var(--wpjp-ds-space-3);
    color: var(--wpjp-ds-color-text);
    border-color: var(--wpjp-ds-color-border);
}

.wpjp-native-application-workflow :where(.wjp-note, .wjp-task, .wjp-interview, .wjp-scorecard, .wjp-offer, .wjp-approval-row, .wjp-request-approval) {
    padding: var(--wpjp-ds-space-3);
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-canvas);
    border-color: var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-sm);
}

.wpjp-native-application-workflow :where(.wjp-note-list, .wjp-task-list, .wjp-interview-list, .wjp-scorecard-list, .wjp-offer-list) {
    gap: var(--wpjp-ds-space-3);
    margin-block-start: var(--wpjp-ds-space-4);
}

.wpjp-native-application-workflow :where(.wjp-offer-boundary, .wjp-signature-history, .wjp-evaluation-summary) {
    color: var(--wpjp-ds-color-text);
    background: color-mix(in srgb, var(--wpjp-ds-color-primary) 6%, var(--wpjp-ds-color-surface));
    border-color: var(--wpjp-ds-color-primary);
    border-radius: var(--wpjp-ds-radius-sm);
}

.wpjp-native-application-workflow :where(.wjp-note-meta span, .wjp-task-meta, .wjp-interview-meta, .wjp-offer-head small, .wjp-offer-dates, .wjp-offer-compensation span, .wjp-approval-row span, .wjp-approval-row small, .wjp-signature-history small) {
    color: var(--wpjp-ds-color-text-muted);
}

@media (max-width: 782px) {
    .wpjp-native-recruit-view .wjp-pipeline-toolbar,
    .wpjp-native-recruit-view .wjp-pipeline-toolbar form,
    .wpjp-native-recruit-view .wpjp-team-company-picker,
    .wpjp-native-recruit-view .wjp-auto-list > article {
        align-items: stretch;
        flex-direction: column;
    }

    .wpjp-native-recruit-view .wjp-pipeline-toolbar :where(select, input, button),
    .wpjp-native-recruit-view .wpjp-team-company-picker :where(select, input, button),
    .wpjp-native-recruit-view .wjp-auto-actions {
        inline-size: 100%;
    }

    .wpjp-native-recruit-view .wjp-auto-list > article {
        grid-template-columns: 1fr;
    }

    .wpjp-native-recruit-view .wjp-auto-actions {
        grid-column: auto;
        flex-wrap: wrap;
    }
}
/* Pipeline: purpose-built board treatment inside the Employer Control Panel. */
.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-pipeline-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-pipeline-toolbar > form {
    display: grid;
    grid-template-columns: auto minmax(13rem, 1fr) auto;
    gap: var(--wpjp-ds-space-2);
    align-items: center;
    min-width: 0;
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-pipeline-toolbar > form > label {
    color: var(--wpjp-ds-color-text-muted);
    font-size: var(--wpjp-ds-font-size-sm);
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-pipeline-toolbar .wjp-stage-create {
    grid-template-columns: minmax(11rem, 1fr) 2.75rem auto;
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-stage-create input[type="color"] {
    inline-size: 2.75rem;
    min-inline-size: 2.75rem;
    padding: .25rem;
    cursor: pointer;
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-kanban-navigation {
    justify-content: flex-start;
    margin-block: 0 var(--wpjp-ds-space-3);
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-kanban-scroll {
    min-inline-size: 9rem;
    cursor: pointer;
}

/* The board is already at one end, so the control reads as unavailable rather than broken. */
.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-kanban-scroll:disabled {
    color: var(--wpjp-body-font-color, #575757);
    background: var(--wpjp-background-color, #f6f6f6);
    opacity: .55;
    cursor: not-allowed;
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-kanban {
    grid-auto-columns: minmax(18rem, 22rem);
    gap: var(--wpjp-ds-space-4);
    padding: var(--wpjp-ds-space-1) var(--wpjp-ds-space-1) var(--wpjp-ds-space-5);
    scroll-padding-inline: var(--wpjp-ds-space-1);
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-kanban-column {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--wpjp-border-color, #e9ecef);
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-kanban-column > header {
    position: relative;
    min-block-size: 3.75rem;
    box-sizing: border-box;
    border-bottom: var(--wpjp-ed-sec-title-border, 1px solid var(--wpjp-ds-color-border));
    box-shadow: inset 0 3px 0 var(--wjp-stage-color);
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-kanban-column > header > div {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--wpjp-ds-space-2);
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-kanban-column > header strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-stage-dot {
    inline-size: .625rem;
    block-size: .625rem;
    flex: 0 0 auto;
    margin: 0;
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-stage-count {
    display: inline-grid;
    min-inline-size: 1.75rem;
    block-size: 1.75rem;
    padding: 0 var(--wpjp-ds-space-1);
    place-items: center;
    color: var(--wpjp-ds-color-text-muted);
    font-size: var(--wpjp-ds-font-size-xs);
    font-weight: 700;
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-kanban-cards {
    display: grid;
    /*
     * One column, and it may shrink.
     *
     * With no template the implicit track is auto, which sizes to the widest
     * card's max-content - a candidate name or a job title with nothing to
     * break on pushed the track past the column. On a phone that came to 209px
     * of card in a 198px box, and since this element clips sideways rather
     * than scrolls, the surplus was simply cut off the right of every card.
     * minmax(0, 1fr) lets the track take the width it is given instead of the
     * width the contents would like.
     */
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    flex: 1 1 auto;
    gap: var(--wpjp-ds-space-3);
    min-block-size: 14rem;
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-candidate-card {
    display: grid;
    gap: var(--wpjp-ds-space-2);
    margin: 0;
    padding: var(--wpjp-ds-space-4);
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-candidate-card:hover,
.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-candidate-card:focus-within {
    border-color: color-mix(in srgb, var(--wpjp-ds-color-primary) 50%, var(--wpjp-ds-color-border));
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.08));
    transform: translateY(-1px);
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-candidate-card > strong {
    margin: 0;
    color: var(--wpjp-ds-color-text);
    font-size: var(--wpjp-ds-font-size-md);
    line-height: 1.35;
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-candidate-card :where(span, small) {
    margin: 0;
    line-height: 1.4;
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-workspace-link {
    inline-size: fit-content;
    margin: var(--wpjp-ds-space-1) 0 0;
    color: var(--wpjp-ds-color-primary);
    font-size: var(--wpjp-ds-font-size-sm);
    font-weight: 600;
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-card-move {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-block-start: var(--wpjp-ds-space-1);
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-card-move select {
    max-inline-size: none;
    padding-inline: var(--wpjp-ds-space-2);
    font-size: var(--wpjp-ds-font-size-sm);
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-card-move .button {
    /* Narrow, because it sits beside a stage picker in a column - but the same
       size as every other button, not a size of its own. */
    min-inline-size: 4.5rem;
    padding-inline: var(--wpjp-ds-space-3);
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-stage-delete {
    margin-block-start: auto;
    padding: var(--wpjp-ds-space-3);
    border-top: 1px solid var(--wpjp-ds-color-border);
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-kanban-column.is-drag-over {
    outline-color: var(--wpjp-ds-color-primary);
    background: color-mix(in srgb, var(--wpjp-ds-color-primary) 8%, var(--wpjp-ds-color-canvas));
}

@media (max-width: 960px) {
    .wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-pipeline-toolbar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 782px) {
    .wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-pipeline-toolbar > form,
    .wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-pipeline-toolbar .wjp-stage-create,
    .wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-card-move {
        grid-template-columns: 1fr;
    }

    .wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-pipeline-toolbar > form > label {
        margin-block-start: var(--wpjp-ds-space-1);
    }

    .wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-stage-create input[type="color"] {
        inline-size: 100%;
    }

    .wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-kanban {
        grid-auto-columns: minmax(17rem, 86vw);
    }
}
/* Pipeline page sizing: use the available control-panel width before scrolling. */
#wjportal-emp-cp-wrp:has(.wpjp-native-recruit-view) {
    align-items: flex-start;
}

#wjportal-emp-cp-wrp:has(.wpjp-native-recruit-view) .wjportal-cp-left {
    min-height: 0;
}

#wjportal-emp-cp-wrp:has(.wpjp-native-recruit-view) .wjportal-cp-right {
    min-width: 0;
}

.wpjp-native-recruit-view[data-recruit-view="pipeline"] .wpjobportal-recruit-pipeline .wjp-kanban {
    grid-auto-columns: minmax(13rem, 1fr);
}

.wpjp-native-recruit-view[data-recruit-view="pipeline"] .wpjobportal-recruit-pipeline .wjp-kanban-column {
    min-block-size: 0;
}

.wpjp-native-recruit-view[data-recruit-view="pipeline"] .wpjobportal-recruit-pipeline .wjp-kanban-cards {
    min-block-size: 7rem;
}

@media (max-width: 782px) {
    .wpjp-native-recruit-view[data-recruit-view="pipeline"] .wpjobportal-recruit-pipeline .wjp-kanban {
        grid-auto-columns: minmax(15rem, 82vw);
    }
}
/*
 * The stage navigation is not hidden here any more.
 *
 * It was, under a note saying the pipeline uses vertical space rather than a
 * horizontal strip - which the rule immediately below contradicts: the board
 * is one scrolling row of columns. Seven stages need 1776px in an 890px
 * column, so three and a half are visible and the rest are behind a scrollbar.
 * Previous stages and Next stages exist, work, and were switched off.
 *
 * Core's compat sheet decides when they show; there is nothing to say here.
 */

.wpjp-native-recruit-view[data-recruit-view="pipeline"] .wpjobportal-recruit-pipeline .wjp-kanban {
    /*
     * A pipeline is a sequence and has to keep reading as one. This column
     * is about 625px inside the control panel, so the seven stages had been
     * turned into a grid that wraps - Inbox and Shortlisted, then
     * Interviewing and Offer, then Hired and Rejected, then Spam on its own,
     * seven hundred pixels down the page. Ordered stages laid out as a set
     * of tiles read as a set, not as an order, and the "Previous stage /
     * Next stages" buttons above them only mean anything for something that
     * scrolls. It stays the board it is written as.
     */
    grid-auto-flow: column;
    /*
     * 17-20rem, up from 15-18. At 15rem a card was ~210px and its own text -
     * an email, an applied-on date - had to wrap; the stages read as narrow
     * slips. A little wider and a card holds its lines, at the cost of half a
     * stage of what is visible before the scroll, which the Previous / Next
     * controls above the board are there for.
     */
    grid-auto-columns: minmax(17rem, 20rem);
    grid-template-columns: none;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: inline proximity;
    padding: 0 0 var(--wpjp-ds-space-3);
}

.wpjp-native-recruit-view[data-recruit-view="pipeline"] .wpjobportal-recruit-pipeline .wjp-kanban-column {
    inline-size: auto;
    scroll-snap-align: start;
}

@media (max-width: 782px) {
    .wpjp-native-recruit-view[data-recruit-view="pipeline"] .wpjobportal-recruit-pipeline .wjp-kanban {
        grid-auto-columns: minmax(14rem, 80%);
    }
}
/* Native work queues: tasks, interviews, scorecards, and offers. */
.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) {
    --wpjp-native-work-accent: var(--wpjp-ds-color-primary);
}

.wpjp-native-recruit-view[data-recruit-view="interviews"] {
    --wpjp-native-work-accent: var(--wpjp-ds-color-success, #15803d);
}

.wpjp-native-recruit-view[data-recruit-view="scorecards"] {
    --wpjp-native-work-accent: var(--wpjp-ds-color-primary-strong);
}

.wpjp-native-recruit-view[data-recruit-view="offers"] {
    --wpjp-native-work-accent: var(--wpjp-ds-color-warning, #b45309);
}
.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-list {
    grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
    gap: var(--wpjp-ds-space-4);
    align-items: stretch;
}

.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    overflow: hidden;
    /*
     * This card is laid out edge to edge: the title band carries its own
     * padding and its own rule underneath. The portal pads a control-panel
     * section by 24px, and that inset landed here too - so the rule under
     * the title stopped short of both edges and read as a stray mark rather
     * than a divider, and everything inside sat in two lots of padding.
     */
    padding: 0;
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-lg);
    box-shadow: var(--wpjp-ds-shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 4px;
    background: var(--wpjp-ds-color-primary);
}

.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item:hover,
.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item:focus-within {
    border-color: color-mix(in srgb, var(--wpjp-ds-color-primary) 45%, var(--wpjp-ds-color-border));
    box-shadow: var(--wpjp-ds-shadow-md);
    transform: translateY(-2px);
}

.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item .wjportal-cp-sec-title {
    position: relative;
    margin: 0;
    padding: var(--wpjp-ds-space-4) var(--wpjp-ds-space-5) var(--wpjp-ds-space-3);
    color: var(--wpjp-ds-color-text);
    border-bottom: var(--wpjp-ed-sec-title-border, 1px solid var(--wpjp-ds-color-border));
    font-size: var(--wpjp-ed-fs-h3, var(--wpjp-ds-font-size-lg));
    font-weight: 700;
    line-height: 1.35;
    text-align: start;
}

.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item .wjportal-cp-sec-title::after {
    /* The title band already ends in a rule that crosses the whole card. A
       40px accent dash sitting directly on top of it made two marks under
       one title, close enough together to read as a mistake. The card keeps
       its accent on the edge down its side. */
    content: none;
}

.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item .wjportal-cp-cnt {
    align-content: start;
    gap: var(--wpjp-ds-space-2);
    padding: var(--wpjp-ds-space-4) var(--wpjp-ds-space-5);
}

.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item .wjportal-cp-cnt > strong {
    color: var(--wpjp-ds-color-text);
    font-size: var(--wpjp-ds-font-size-md);
    line-height: 1.4;
    /* <strong> in a body set at weight 300: "bolder" than 300 computes to
       400, so the name of the person a task is about came out barely
       heavier than the line beneath it. It is the subject of the card. */
    font-weight: 700;
}

.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item .wjportal-cp-cnt > span {
    color: var(--wpjp-ds-color-text-muted);
    line-height: 1.45;
}

.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item .wjportal-cp-cnt > small {
    justify-self: start;
    margin-block-start: var(--wpjp-ds-space-2);
    padding: var(--wpjp-ds-space-1) var(--wpjp-ds-space-2);
    color: var(--wpjp-ds-color-primary);
    background: color-mix(in srgb, var(--wpjp-ds-color-primary) 9%, var(--wpjp-ds-color-surface));
    border: 1px solid color-mix(in srgb, var(--wpjp-ds-color-primary) 22%, var(--wpjp-ds-color-border));
    border-radius: 999px;
    font-size: var(--wpjp-ds-font-size-xs);
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
}

.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item .wjportal-cp-view-btn-wrp {
    margin: 0;
    padding: 0 var(--wpjp-ds-space-5) var(--wpjp-ds-space-5);
    text-align: start;
}

.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item .wjportal-cp-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--wpjp-ds-control-height);
    padding: var(--wpjp-ds-space-2) var(--wpjp-ds-space-4);
    color: #fff;
    background: var(--wpjp-ds-color-primary);
    border: 1px solid var(--wpjp-ds-color-primary);
    border-radius: var(--wpjp-ds-radius-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item .wjportal-cp-view-btn:hover,
.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item .wjportal-cp-view-btn:focus-visible {
    color: #fff;
    background: var(--wpjp-ds-color-primary-strong);
    border-color: var(--wpjp-ds-color-primary-strong);
}

@media (max-width: 782px) {
    .wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-list {
        grid-template-columns: 1fr;
    }

    .wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item .wjportal-cp-view-btn {
        inline-size: 100%;
    }
}
.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item::before,
.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item .wjportal-cp-sec-title::after {
    background: var(--wpjp-native-work-accent);
}

.wpjp-native-recruit-view:is([data-recruit-view="tasks"], [data-recruit-view="interviews"], [data-recruit-view="scorecards"], [data-recruit-view="offers"]) .wpjp-native-work-item .wjportal-cp-cnt > small {
    color: var(--wpjp-native-work-accent);
    background: color-mix(in srgb, var(--wpjp-native-work-accent) 9%, var(--wpjp-ds-color-surface));
    border-color: color-mix(in srgb, var(--wpjp-native-work-accent) 22%, var(--wpjp-ds-color-border));
}
/* Notifications: native alert-center layout. */
.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The corner is the card's, said once where the card is described. */
.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-cards article {
    position: relative;
    overflow: hidden;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-cards article::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 4px;
    background: var(--wpjp-ds-color-primary);
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-panel {
    padding: 0;
    overflow: hidden;
    border-radius: var(--wpjp-ed-radius, 12px);
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-panel > h2 {
    margin: 0;
    padding: var(--wpjp-ds-space-4) var(--wpjp-ds-space-5);
    border-bottom: var(--wpjp-ed-sec-title-border, 1px solid var(--wpjp-ds-color-border));
    font-size: var(--wpjp-ed-fs-h3, var(--wpjp-ds-font-size-lg));
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-list {
    gap: 0;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-list > article {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    margin: 0;
    padding: var(--wpjp-ds-space-4) var(--wpjp-ds-space-5);
    background: var(--wpjp-ds-color-surface);
    border: 0;
    border-bottom: 1px solid var(--wpjp-ds-color-border);
    border-radius: 0;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-list > article:last-child {
    border-bottom: 0;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-list > article.is-unread {
    box-shadow: inset 4px 0 0 var(--wpjp-ds-color-primary);
}

[dir="rtl"] .wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-list > article.is-unread {
    box-shadow: inset -4px 0 0 var(--wpjp-ds-color-primary);
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 50%;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-copy {
    min-width: 0;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-copy h3 {
    color: var(--wpjp-ds-color-text);
    font-size: var(--wpjp-ds-font-size-md);
    line-height: 1.4;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-copy p {
    color: var(--wpjp-ds-color-text-muted);
    line-height: 1.5;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-actions {
    align-self: center;
    justify-content: flex-end;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-empty {
    margin: 0;
    padding: var(--wpjp-ds-space-6);
    text-align: center;
}

@media (max-width: 782px) {
    .wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-cards {
        grid-template-columns: 1fr;
    }

    .wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-list > article {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        padding: var(--wpjp-ds-space-4);
    }

    .wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}
/* Native overview, assigned jobs, and assigned candidates. */
/*
 * The metric cards are styled by Core and by the look provider, not here.
 *
 * Eight rules used to sit at this point giving them a surface, a 4px primary
 * top edge, an ordered title and number and a left-aligned footer link, all
 * under .wpjp-native-recruit-view[data-recruit-view="overview"]. They matched
 * nothing: the cards render in .wpjp-recruit-cp-top inside #wjportal-emp-cp-wrp,
 * outside the native recruit view entirely, so the wrapper never contained
 * them. The rule below, on the same wrapper, matches two elements - it was only
 * the metrics that moved out from under it.
 *
 * Nothing was lost by removing them. jobseekercp.css orders the title and
 * number and sets the figure dark; Elegant Design gives the card its surface,
 * radius, shadow and its own blue for the number. The block's own comment
 * blamed this stylesheet for repainting .wjportal-cp-box-num in the link
 * colour, which was wrong - that colour is elegant-theme.css, and the look
 * provider is entitled to it.
 *
 * Only two intentions went unfulfilled, both cosmetic: the 4px top edge and a
 * left-aligned footer link. Re-aiming these rules to reinstate them would mean
 * this suite overriding the look provider on colour and border, which is the
 * habit that made these screens read as a different product. Left alone.
 *
 * The phone layout for these cards is at the foot of this sheet, correctly
 * aimed at .wpjp-recruit-cp-top.
 */
/*
 * One section to a row.
 *
 * Side by side, the candidates were squeezed into half the width - a name
 * wrapped over two lines and the category broke under its own icon - while
 * the work list beside them was mostly empty space. Stacked, each candidate
 * card gets the full width the dashboard's resume cards have.
 */
.wpjp-native-recruit-view[data-recruit-view="overview"] .wpjp-native-overview-grid {
    grid-template-columns: minmax(0, 1fr);
}

.wpjp-native-recruit-view[data-recruit-view="overview"] .wpjp-native-overview-grid > .wjportal-cp-sect-wrp {
    min-width: 0;
    overflow: hidden;
    background: var(--wpjp-card-background, #fff);
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: var(--wpjp-ed-radius, 12px);
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.08));
}

.wpjp-native-recruit-view[data-recruit-view="overview"] .wpjp-native-overview-grid > .wjportal-cp-sect-wrp > .wjportal-cp-sec-title {
    margin: 0;
    padding: var(--wpjp-ds-space-4) var(--wpjp-ds-space-5);
    color: var(--wpjp-ds-color-text);
    border-bottom: var(--wpjp-ed-sec-title-border, 1px solid var(--wpjp-ds-color-border));
    font-size: var(--wpjp-ed-fs-h3, var(--wpjp-ds-font-size-lg));
}

.wpjp-native-recruit-view[data-recruit-view="overview"] .wpjp-native-overview-grid > .wjportal-cp-sect-wrp > .wjportal-cp-cnt {
    padding: var(--wpjp-ds-space-4);
}

.wpjp-native-recruit-view[data-recruit-view="overview"] .wpjp-native-overview-grid > .wjportal-cp-sect-wrp > .wjportal-cp-view-btn-wrp {
    margin: 0;
    padding: 0 var(--wpjp-ds-space-4) var(--wpjp-ds-space-4);
    text-align: start;
}

.wpjp-native-recruit-view[data-recruit-view="overview"] .wpjp-native-overview-grid .wjportal-cp-view-btn {
    display: inline-flex;
    padding: var(--wpjp-ds-space-2) var(--wpjp-ds-space-4);
    color: #fff;
    background: var(--wpjp-ds-color-primary);
    border-radius: var(--wpjp-ds-radius-sm);
    font-weight: 600;
}

/* ==========================================================================
   The job and candidate cards are Core's
   ==========================================================================

   Two hundred lines used to live here, reshaping a card this add-on built
   itself out of Core's class names: a grid over the top wrapper, a flex row
   over the info line, a button told to fill the bar. The cards are drawn by
   Core's own templates now - job/views/frontend/joblist and
   resume/views/frontend/resumelist - so the markup is the markup those rules
   were written against, and the overrides had turned from holding the card
   together into pulling it apart: labels stacked where Core lays them in a
   row, one button stretched across the whole width.

   What is left is the one piece of markup that is still this add-on's: the
   checkbox it puts beside a candidate for the bulk bar.
*/

/*
 * One exception, and the reason for it.
 *
 * employercp.css hides the action bar on any resume card inside
 * #wjportal-emp-cp-wrp - right for the dashboard's Applied Resume panel,
 * where the cards are a read-only summary. The recruiting screens render
 * inside that same wrapper, and on them the bar is the point of the row.
 */
#wjportal-emp-cp-wrp .wpjp-native-recruit-view .wpjp-native-candidate-card :where(.wjportal-resume-list-btm-wrp, .wjportal-resume-action-wrp),
#wjportal-emp-cp-wrp .wpjp-native-recruit-view .wjp-candidate-card :where(.wjportal-resume-list-btm-wrp, .wjportal-resume-action-wrp),
#wjportal-emp-cp-wrp .wpjp-native-recruit-view .wjportal-resume-list :where(.wjportal-resume-list-btm-wrp, .wjportal-resume-action-wrp) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wpjp-ds-space-2);
}

/* Talent pools and recruiting team: dense-data layouts. */
.wpjp-native-recruit-view[data-recruit-view="pools"] .wpjobportal-recruit-candidates > .wpjp-ds-card,
.wpjp-native-recruit-view[data-recruit-view="pools"] .wjp-candidate-management-grid > *,
/*
 * The members table below is given a 36rem minimum on purpose, and this card
 * is about 486px inside the control panel - so the table is wider than the
 * card by design and has to be scrollable. The scroll was asked for on the
 * table itself, which does nothing for a table element, while the card hid
 * what would not fit: ninety pixels of the last column, unreachable.
 */
.wpjp-native-recruit-view[data-recruit-view="team"] .wpjp-team-card {
    overflow-x: auto;
    border-radius: var(--wpjp-ed-radius, 12px);
}

.wpjp-native-recruit-view[data-recruit-view="pools"] .wpjobportal-recruit-candidates :where(.wpjp-ds-card, .wjp-candidate-management-grid > *) > h2,
.wpjp-native-recruit-view[data-recruit-view="team"] .wpjp-team-card > h2 {
    margin: calc(var(--wpjp-ds-space-4) * -1) calc(var(--wpjp-ds-space-4) * -1) var(--wpjp-ds-space-4);
    padding: var(--wpjp-ds-space-4);
    color: var(--wpjp-ds-color-text);
    background: var(--wpjp-ds-color-canvas);
    border-bottom: var(--wpjp-ed-sec-title-border, 1px solid var(--wpjp-ds-color-border));
    font-size: var(--wpjp-ed-fs-h3, var(--wpjp-ds-font-size-lg));
}

.wpjp-native-recruit-view[data-recruit-view="pools"] .wpjobportal-recruit-candidates :where(label, .description),
.wpjp-native-recruit-view[data-recruit-view="team"] .wpjobportal-recruit-team :where(label, .description) {
    color: var(--wpjp-ds-color-text-muted);
    line-height: 1.5;
}

.wpjp-native-recruit-view[data-recruit-view="pools"] .wpjobportal-recruit-candidates label strong,
.wpjp-native-recruit-view[data-recruit-view="team"] .wpjobportal-recruit-team label strong {
    display: block;
    margin-block-end: var(--wpjp-ds-space-2);
    color: var(--wpjp-ds-color-text);
}

.wpjp-native-recruit-view[data-recruit-view="pools"] .wpjobportal-recruit-candidates :where(input[type="text"], select, textarea),
.wpjp-native-recruit-view[data-recruit-view="team"] .wpjobportal-recruit-team :where(input[type="text"], select) {
    inline-size: 100%;
    max-inline-size: none;
    padding: var(--wpjp-ds-space-2) var(--wpjp-ds-space-3);
}

.wpjp-native-recruit-view[data-recruit-view="pools"] .wjp-workload-table,
.wpjp-native-recruit-view[data-recruit-view="team"] .wpjp-team-card .widefat {
    inline-size: 100%;
    overflow-x: auto;
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ed-radius, 12px);
}

.wpjp-native-recruit-view[data-recruit-view="pools"] .wjp-workload-table table,
.wpjp-native-recruit-view[data-recruit-view="team"] .wpjp-team-card .widefat {
    min-inline-size: 36rem;
    margin: 0;
    background: var(--wpjp-ds-color-surface);
}

.wpjp-native-recruit-view[data-recruit-view="pools"] .wjp-workload-table th,
.wpjp-native-recruit-view[data-recruit-view="team"] .wpjp-team-card .widefat th,
.wpjp-native-recruit-view[data-recruit-view="team"] .wpjp-team-card table th {
    text-align: start;
    color: var(--wpjp-ds-color-text-muted);
    background: var(--wpjp-ds-color-canvas);
    font-size: var(--wpjp-ds-font-size-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wpjp-native-recruit-view[data-recruit-view="pools"] .wjp-workload-table tbody tr:hover,
.wpjp-native-recruit-view[data-recruit-view="team"] .wpjp-team-card .widefat tbody tr:hover {
    background: color-mix(in srgb, var(--wpjp-ds-color-primary) 4%, var(--wpjp-ds-color-surface));
}

.wpjp-native-recruit-view[data-recruit-view="pools"] :where(.wjp-duplicate-grid > article, .wjp-reason-grid > form) {
    background: var(--wpjp-ds-color-canvas);
    border-color: var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-md);
}

.wpjp-native-recruit-view[data-recruit-view="pools"] :where(.wjp-duplicate-grid > article, .wjp-reason-grid > form) h3 {
    margin-block-start: 0;
    color: var(--wpjp-ds-color-text);
}

.wpjp-native-recruit-view[data-recruit-view="pools"] .wjp-duplicate-grid form,
.wpjp-native-recruit-view[data-recruit-view="team"] .wpjp-team-card form p:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wpjp-ds-space-2);
}

/*
 * This picker holds two labelled controls and a button, in that order:
 * "Find a company" and its search box, "Company" and its list, then Select
 * company. Three columns flowed them across and down - so "Company" landed
 * in the third column of the first row while its own list sat in the first
 * column of the second, and the label read as an orphaned word at the far
 * right of the panel. A label goes beside the thing it names.
 */
.wpjp-native-recruit-view[data-recruit-view="team"] .wpjp-team-company-picker {
    display: grid;
    grid-template-columns: auto minmax(15rem, 1fr);
    align-items: center;
    margin-block-start: 0;
}

.wpjp-native-recruit-view[data-recruit-view="team"] .wpjp-team-company-picker > :is(button, .button) {
    grid-column: 2;
    justify-self: start;
}

.wpjp-native-recruit-view[data-recruit-view="team"] .wpjp-team-card form {
    display: grid;
    gap: var(--wpjp-ds-space-3);
    margin-block-end: var(--wpjp-ds-space-5);
}

.wpjp-native-recruit-view[data-recruit-view="team"] .wpjp-team-card form p {
    margin: 0;
}

@media (max-width: 782px) {
    .wpjp-native-recruit-view[data-recruit-view="team"] .wpjp-team-company-picker {
        grid-template-columns: 1fr;
    }

    /* The button sits in column 2 beside the fields on wide screens; left
       there, it made a second column on phones too, and the fields beside
       their labels were too narrow to show the company name. */
    .wpjp-native-recruit-view[data-recruit-view="team"] .wpjp-team-company-picker > :is(button, .button) {
        grid-column: auto;
    }

    .wpjp-native-recruit-view[data-recruit-view="pools"] .wjp-duplicate-grid form > *,
    .wpjp-native-recruit-view[data-recruit-view="team"] .wpjp-team-card form p:last-child > * {
        flex: 1 1 100%;
     }
 }

/* Bulk actions on the candidate list. */
/*
 * The box sits inside its card, in its top corner before the photo. Beside
 * the card it read as a separate control, not part of it.
 */
.wpjp-native-candidate-card:has(> .wpjp-native-candidate-select) {
    position: relative;
}

.wpjp-native-candidate-card > .wpjp-native-candidate-select {
    position: absolute;
    z-index: 1;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    display: flex;
    margin: 0;
    padding: 0;
}

.wpjp-native-candidate-card:has(> .wpjp-native-candidate-select) .wjportal-resume-list-top-wrp {
    padding-inline-start: 44px;
}

/* The list's gap spaces the cards; Core's own 2.5rem below each card doubled it. */
.wpjp-native-candidate-list > .wpjp-native-candidate-card > .wjportal-resume-list {
    margin-bottom: 0;
}

/*
 * The browser's own box drew a dark grey frame unlike every other border on
 * the screen; drawn here with the portal's border and primary colours. The
 * selectors outrank Core's .wjportal-main-up-wrapper checkbox rule, whose
 * 1rem padding and 2px border made the box 36px once it was drawn by CSS.
 */
.wpjp-native-bulk-bar input.wpjp-bulk-toggle[type="checkbox"],
.wpjp-native-candidate-select input.wpjp-bulk-row[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    flex: 0 0 auto;
    /* Core's own checkbox size (.wpjobportal-form-radio-field) */
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: 4px;
    background: var(--wpjp-card-background, #fff) center / 14px no-repeat;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.wpjp-native-bulk-bar input.wpjp-bulk-toggle[type="checkbox"]:hover,
.wpjp-native-candidate-select input.wpjp-bulk-row[type="checkbox"]:hover {
    border-color: var(--wpjp-primary-color, #3baeda);
}

.wpjp-native-bulk-bar input.wpjp-bulk-toggle[type="checkbox"]:checked,
.wpjp-native-candidate-select input.wpjp-bulk-row[type="checkbox"]:checked {
    border-color: var(--wpjp-primary-color, #3baeda);
    background-color: var(--wpjp-primary-color, #3baeda);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.wpjp-native-bulk-bar input.wpjp-bulk-toggle[type="checkbox"]:focus-visible,
.wpjp-native-candidate-select input.wpjp-bulk-row[type="checkbox"]:focus-visible {
    outline: 2px solid var(--wpjp-primary-color, #3baeda);
    outline-offset: 2px;
}

.wpjp-native-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--wpjp-ds-space-4);
    padding: var(--wpjp-ds-space-3) var(--wpjp-ds-space-4);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-md);
    background: var(--wpjp-ds-color-canvas);
}

.wpjp-native-bulk-bar .wpjp-bulk-all {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    font-weight: 600;
}

.wpjp-native-bulk-bar select {
    min-width: 180px;
}

/* Themes give every label a bottom margin, which lifted the select off the button's line. */
.wpjp-native-bulk-bar label {
    margin: 0;
}

/* What "Send a message" sends: its own row under the bar's controls. */
.wpjp-native-bulk-bar .wpjp-bulk-message:not([hidden]) {
    display: grid;
    flex: 1 0 100%;
    gap: 12px;
    padding-top: var(--wpjp-ds-space-3);
    border-top: 1px solid var(--wpjp-ds-color-border);
}

.wpjp-native-bulk-bar .wpjp-bulk-message label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wpjp-native-bulk-bar .wpjp-bulk-message input,
.wpjp-native-bulk-bar .wpjp-bulk-message textarea,
.wpjp-native-bulk-bar .wpjp-bulk-message select {
    width: 100%;
    box-sizing: border-box;
}

.wpjp-native-bulk-bar .wpjp-bulk-message-label {
    font-weight: 600;
}

.wpjp-native-bulk-bar .wpjp-bulk-message-hint {
    margin: 0;
    color: var(--wpjp-ds-color-text-muted);
    font-size: 0.875em;
}

.wpjp-recruit-bulk-notice {
    margin: 12px 0;
}

@media (max-width: 640px) {
    .wpjp-native-bulk-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .wpjp-native-bulk-bar .wpjp-bulk-all {
        margin-right: 0;
    }
}


/* Message template management on the Candidates screen. */
.wpjp-recruit-template-company {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--wpjp-ds-color-border);
}

.wpjp-recruit-template-company:first-of-type {
    border-top: 0;
}

.wpjp-recruit-template-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wpjp-recruit-templates details {
    margin-top: 8px;
}

/* Edit sits beside Remove in the row; the margin put it 8px lower. */
.wpjp-recruit-templates .wpjp-recruit-template-actions > details {
    margin-top: 0;
}

/* Edit is a summary wearing the button class; inline-block undid the
   button's flex centring, so its label sat at the top beside Remove's. */
.wpjp-recruit-templates summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wpjp-recruit-templates details[open] > form {
    margin-top: 10px;
    padding: 12px 16px;
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-md);
    background: var(--wpjp-ds-color-canvas);
    max-width: 620px;
}

.wpjp-recruit-templates label {
    display: block;
    margin-bottom: 10px;
}

.wpjp-recruit-templates textarea {
    width: 100%;
}

/* The access message shown when a recruiter screen turns someone away. It is
   the only thing on the page, so it should not read as an unstyled paragraph.
   Everything else these surfaces need is expressed in the rules above, which
   draw their colours and radii from the portal's tokens directly. */
.wpjobportal-recruit-access-message {
    max-width: 640px;
    margin: 32px auto;
    padding: 20px 24px;
    border: 1px solid var(--wpjp-ds-color-border, #e9ecef);
    border-inline-start: 4px solid var(--wpjp-ds-color-primary, var(--wpjp-primary-color, #3baeda));
    border-radius: var(--wpjp-ds-radius-md, 10px);
    background: var(--wpjp-ds-color-surface);
    color: var(--wpjp-ds-color-text, #172033);
    font-family: var(--wpjp-ds-font-family, inherit);
}

/*
 * Paging, searching and progress.
 *
 * Every screen in the suite now shows a page of its data rather than all of
 * it, which only helps if the reader can see that is what is happening: what
 * they are looking at, how much there is, and how to reach the rest.
 */
.wjp-table-search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 12px;
}

.wjp-table-search input[type="search"] {
    flex: 1 1 200px;
    min-width: 0;
}

.wjp-table-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--wpjp-ds-color-border, #e2e8f0);
    font-size: 13px;
    color: var(--wpjp-ds-color-text-muted);
}

.wjp-table-pager-links {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wjp-table-pager .disabled {
    opacity: .5;
    cursor: default;
}

/* The button at the foot of a Kanban column that fetches the next page. */
.wjp-stage-more {
    display: block;
    width: 100%;
    margin-top: 8px;
}

.wjp-picker-note,
.wjp-pipeline-toolbar .description {
    flex-basis: 100%;
    margin: 4px 0 0;
    font-size: 13px;
}

/*
 * A column is a queue, so it scrolls like one.
 *
 * Twenty-five cards stacked came to four and a half thousand pixels: the board
 * became one very long column, the stage headers scrolled away, and the button
 * to load more sat at the bottom of a page nobody would reach. Each column
 * scrolls inside itself instead, so the whole board stays on one screen and its
 * headers stay put.
 */
.wpjobportal-recruit-pipeline .wjp-kanban-column {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 240px);
    min-height: 260px;
}

.wpjobportal-recruit-pipeline .wjp-kanban-column > header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: inherit;
    border-radius: 12px 12px 0 0;
}

.wpjobportal-recruit-pipeline .wjp-kanban-cards {
    flex: 1 1 auto;
    overflow-y: auto;
    /*
     * And never sideways. Where overflow-y is not visible the other axis
     * computes to auto rather than staying visible, so bounding the column's
     * height quietly gave it a horizontal scrollbar as well - which is the
     * bar a tester found under the first card. Stated outright instead.
     */
    overflow-x: clip;
    overscroll-behavior: contain;
}

/* The load-more button and the delete-stage form stay at the foot of the
   column rather than at the end of its cards. */
.wpjobportal-recruit-pipeline .wjp-stage-more,
.wpjobportal-recruit-pipeline .wjp-stage-delete {
    flex: 0 0 auto;
    /* A gap from the scrolling cards above, which end mid-card. */
    margin: 8px 0 0;
    padding: 8px 10px;
}

/* The toolbar's labels should not wrap to three lines each. */
.wpjobportal-recruit-pipeline .wjp-pipeline-toolbar label {
    white-space: nowrap;
}

.wpjobportal-recruit-pipeline .wjp-pipeline-toolbar form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 1 1 auto;
}

.wpjobportal-recruit-pipeline .wjp-pipeline-toolbar select {
    flex: 1 1 220px;
    min-width: 0;
    max-width: 420px;
}

/*
 * The toolbar's own fields, at the page's size.
 *
 * The select was sized; the search box beside it never was, so it kept the
 * browser's 13.33px default next to a 17px toolbar - the one visible control
 * on the recruiting screens still doing that. :where() keeps this at zero
 * specificity, so any field wanting a size of its own still gets it.
 */
.wpjobportal-recruit-pipeline .wjp-pipeline-toolbar :where(input, select, button) {
    font-size: var(--wpjp-body-font-size, 17px);
}

/*
 * Recruit Team.
 *
 * The markup has always described a grid of two cards; nothing ever styled it,
 * so on a wide screen the page was two narrow boxes down the left-hand side
 * with the rest of the monitor empty. The tables inside them now have room for
 * the columns they carry.
 */
.wpjobportal-recruit-team .wpjp-team-company-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 16px 0 20px;
    padding: 16px;
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-border, #dcdcde);
    border-radius: var(--wpjp-ed-radius, 12px);
}

.wpjobportal-recruit-team .wpjp-team-company-picker label {
    white-space: nowrap;
}

.wpjobportal-recruit-team .wpjp-team-company-picker select {
    flex: 1 1 240px;
    min-width: 0;
    max-width: 420px;
}

.wpjobportal-recruit-team .wpjp-team-company-picker .description {
    flex-basis: 100%;
    margin: 4px 0 0;
    font-size: 13px;
}

.wpjobportal-recruit-team .wpjp-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 20px;
    align-items: start;
}

.wpjobportal-recruit-team .wpjp-team-card {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 16px;
}

.wpjobportal-recruit-team .wpjp-team-card > h2 {
    margin-top: 0;
}

.wpjobportal-recruit-team table.widefat {
    width: 100%;
}

/* The per-row remove button is a form; it should not add a line of its own. */
.wpjobportal-recruit-team table.widefat form {
    margin: 0;
}

/*
 * The operator's team screens.
 *
 * These now render inside WP Job Portal's own admin chrome, so almost
 * everything is styled by the product's admin stylesheet already. What is left
 * is the two things this screen adds: the tab strip and the small form above
 * each table.
 */
/*
 * The tab strip, drawn like the Candidate Workspace tabs rather than as
 * WordPress's grey folder tabs. Ids in the selectors outrank core's
 * div#wpjobportaladmin-wrapper rules; logical properties keep RTL free.
 */
#wpjobportaladmin-wrapper .wjp-team-tabs.nav-tab-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 8px;
    overflow-x: auto;
    background: var(--wjp-bg-card, #fff);
    border: 1px solid var(--wjp-border-color, #e2e8f0);
    border-radius: 14px;
    box-shadow: none;
    scrollbar-width: thin;
}

#wpjobportaladmin-wrapper .wjp-team-tabs .nav-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    float: none;
    min-block-size: 2.6rem;
    margin: 0;
    padding: 8px 14px;
    color: var(--wjp-text-dark, #1e293b);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

#wpjobportaladmin-wrapper .wjp-team-tabs .nav-tab:hover,
#wpjobportaladmin-wrapper .wjp-team-tabs .nav-tab:focus-visible {
    color: var(--wjp-color-primary, #4f46e5);
    background: var(--wjp-bg-light, #f1f5f9);
}

#wpjobportaladmin-wrapper .wjp-team-tabs .nav-tab:focus-visible {
    outline: 2px solid var(--wjp-color-primary, #4f46e5);
    outline-offset: 2px;
    box-shadow: none;
}

#wpjobportaladmin-wrapper .wjp-team-tabs .nav-tab.nav-tab-active,
#wpjobportaladmin-wrapper .wjp-team-tabs .nav-tab.nav-tab-active:hover {
    color: #fff;
    background: var(--wjp-color-primary, #4f46e5);
    border-color: var(--wjp-color-primary, #4f46e5);
}

/*
 * The person screen's username / email / profile line. As bare text it sat
 * under the header's -10px overlap and lost its top half; as a card it takes
 * the overlap the way the tab strip and filter cards do.
 */
#wpjobportaladmin-wrapper .wjp-person-identity {
    margin: 0 0 16px;
    padding: 18px 16px 12px;
    color: var(--wjp-text-medium, #475569);
    background: var(--wjp-bg-card, #fff);
    border: 1px solid var(--wjp-border-color, #e2e8f0);
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#wpjobportaladmin-wrapper .wjp-person-identity a {
    color: var(--wjp-color-primary, #4f46e5);
}

/*
 * Pipeline card: the stage select and Move share one row at a card's scale.
 * Core's 55px .button height was built for page toolbars, and the select
 * took the whole card, pushing Move onto a line of its own.
 */
#wpjobportaladmin-wrapper .wjp-candidate-card .wjp-card-move {
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

#wpjobportaladmin-wrapper .wjp-candidate-card .wjp-card-move select {
    flex: 1 1 auto;
    min-inline-size: 0;
    /* Core sets every admin control to height: 55px !important. */
    height: 38px !important;
    min-block-size: 0;
    padding-block: 0;
    font-size: 13px;
}

#wpjobportaladmin-wrapper .wjp-candidate-card .wjp-card-move .button {
    flex: 0 0 auto;
    block-size: 38px;
    min-block-size: 0;
    padding: 0 14px;
    color: var(--wjp-text-medium, #475569);
    background: var(--wjp-bg-light, #f1f5f9);
    border: 1px solid var(--wjp-border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    box-shadow: none;
}

#wpjobportaladmin-wrapper .wjp-candidate-card .wjp-card-move .button:hover,
#wpjobportaladmin-wrapper .wjp-candidate-card .wjp-card-move .button:focus-visible {
    color: var(--wjp-color-primary, #4f46e5);
    border-color: var(--wjp-color-primary, #4f46e5);
}

/*
 * Structured rejection: the form stacks every label above its field, which
 * put a checkbox on a line of its own above its sentence. A checkbox label
 * reads as one line, box first.
 */
#wpjobportaladmin-wrapper .wjp-rejection-form label:has(> input[type="checkbox"]) {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

#wpjobportaladmin-wrapper .wjp-rejection-form label:has(> input[type="checkbox"]) > input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 3px 0 0;
}

/* Role and status share a row, as the two search boxes above them do. */
#wpjobportaladmin-wrapper .wjp-team-tabs ~ .wpjobportal-filter-form select.inputbox {
    flex: 1 1 200px;
    inline-size: auto;
    min-inline-size: 0;
}

/* Row actions, matching the Edit / Copy Job buttons on the Jobs list. */
#wpjobportaladmin-wrapper .wjp-team-tabs ~ .wpjobportal-table .button:not(.button-primary),
#wpjobportaladmin-wrapper .wjp-team-tabs ~ * .wpjobportal-table .button:not(.button-primary) {
    block-size: auto;
    min-block-size: 40px;
    padding: 10px 15px;
    color: var(--wjp-text-medium, #475569);
    background: var(--wjp-bg-light, #f1f5f9);
    border: 1px solid var(--wjp-border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: none;
}

#wpjobportaladmin-wrapper .wjp-team-tabs ~ .wpjobportal-table .button:not(.button-primary):hover,
#wpjobportaladmin-wrapper .wjp-team-tabs ~ * .wpjobportal-table .button:not(.button-primary):hover {
    color: var(--wjp-color-primary, #4f46e5);
    border-color: var(--wjp-color-primary, #4f46e5);
}

/* A primary action is drawn as one, not as core's plain white .button. */
#wpjobportaladmin-wrapper .wjp-team-tabs ~ * .button.button-primary {
    color: #fff;
    background: var(--wjp-color-primary, #4f46e5);
    border-color: var(--wjp-color-primary, #4f46e5);
}

#wpjobportaladmin-wrapper .wjp-team-tabs ~ * .button.button-primary:hover,
#wpjobportaladmin-wrapper .wjp-team-tabs ~ * .button.button-primary:focus-visible {
    color: #fff;
    background: var(--wjp-color-primary-dark, #4338ca);
    border-color: var(--wjp-color-primary-dark, #4338ca);
}

.wjp-team-add {
    margin: 16px 0;
    padding: 16px;
    background: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-border, #dcdcde);
    border-radius: var(--wpjp-ed-radius, 12px);
    max-width: none;
}

.wjp-team-add > h3 {
    margin: 0 0 12px;
}

.wjp-team-add-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.wjp-team-add-form label {
    white-space: nowrap;
}

/* Adding a member: labels above their fields, names side by side. */
.wjp-team-member-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    max-width: 760px;
}

.wjp-team-member-form .wjp-team-field {
    min-width: 0;
}

.wjp-team-member-form .wjp-team-field--wide {
    grid-column: 1 / -1;
}

.wjp-team-member-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.wjp-team-member-form .wjp-team-optional {
    font-weight: 400;
    color: var(--wpjp-ds-color-text-muted);
}

.wjp-team-member-form input[type="text"] {
    width: 100%;
    max-width: none;
}

.wjp-team-member-form select {
    width: 100%;
    max-width: 360px;
}

.wjp-team-member-form .description {
    margin: 6px 0 0;
    font-size: 13px;
}

/* Role: three choice cards, each saying what it allows. */
.wjp-team-member-form .wjp-team-roles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.wjp-team-member-form .wjp-team-roles legend {
    float: inline-start;
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 6px;
    padding: 0;
    font-weight: 600;
}

.wjp-team-member-form .wjp-team-role {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--wpjp-ds-color-border, #dcdcde);
    border-radius: 8px;
    background: var(--wpjp-ds-color-surface, #fff);
    font-weight: 400;
    cursor: pointer;
}

.wjp-team-member-form .wjp-team-role:hover {
    border-color: var(--wpjp-ds-color-primary, #4f46e5);
}

.wjp-team-member-form .wjp-team-role:has(input:checked) {
    border-color: var(--wpjp-ds-color-primary, #4f46e5);
    box-shadow: 0 0 0 1px var(--wpjp-ds-color-primary, #4f46e5);
}

.wjp-team-member-form .wjp-team-role:has(input:focus-visible) {
    outline: 2px solid var(--wpjp-ds-color-primary, #4f46e5);
    outline-offset: 2px;
}

.wjp-team-member-form .wjp-team-role input[type="radio"] {
    flex: none;
    margin: 3px 0 0;
}

.wjp-team-member-form .wjp-team-role-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.wjp-team-member-form .wjp-team-role-name {
    font-weight: 600;
}

.wjp-team-member-form .wjp-team-role-desc {
    color: var(--wpjp-ds-color-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .wjp-team-member-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

.wjp-team-add-form input[type="text"],
.wjp-team-add-form select {
    flex: 0 1 220px;
    min-width: 0;
}

.wjp-team-add .description {
    flex-basis: 100%;
    margin: 8px 0 0;
    font-size: 13px;
}

/* What a role lets somebody do, under the chooser and beside each member. */
.wjp-team-add-form .wjp-team-role-help {
    flex-basis: 100%;
    margin: 4px 0 0;
    font-size: 13px;
}

.wjp-team-role-note {
    display: block;
    max-width: 38em;
    margin-top: 4px;
    color: var(--wpjp-ds-color-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* Revoking somebody: what they hold, and where it should go. */
.wjp-revoke-panel .wjp-revoke-jobs {
    margin: 8px 0 16px 20px;
    list-style: disc;
}

.wjp-revoke-panel .wjp-revoke-jobs em {
    color: var(--wpjp-ds-color-text-muted);
}

.wjp-revoke-panel .wjp-table-search {
    margin: 8px 0 16px;
}

/* The per-row control that opens it. */
.wjp-revoke-link {
    text-decoration: none;
}

/* ==========================================================================
   Work on the left, history on the right
   ==========================================================================

   The portal was one column, and the column opened with history. Measured on a
   page carrying just two updates: 2889px tall against a 720px viewport - four
   screens - and the first 429px of it was the updates feed. Each update row
   cost 128px to say one sentence, so the nine rows a real candidate carries
   pushed every actionable thing below the fold. Two empty sections cost 193px
   each to say "No action requests." And the content box is 1080px wide, used
   as a single column throughout.

   So the two kinds of content are separated by where they are, not behind a
   tab: what the candidate has to do stays in the reading column, and what has
   already happened moves to a rail beside it. Nothing is hidden and nothing
   needs a click to find. Below 900px the rail drops underneath, with the work
   still first - which is also the DOM order, so it reads the same way aloud.
*/

.wpjobportal-candidate-portal .wjp-candidate-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wpjp-ds-space-4);
    align-items: start;
}

/* No history to show: the side column would be an empty third of the page. */
.wpjobportal-candidate-portal .wjp-candidate-columns:not(:has(> .wjp-candidate-history > *)) {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
    .wpjobportal-candidate-portal .wjp-candidate-columns {
        grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    }

    /* The rail follows the page rather than running away down it. */
    .wpjobportal-candidate-portal .wjp-candidate-history {
        position: sticky;
        top: var(--wpjp-ds-space-4);
    }
}

.wpjobportal-candidate-portal .wjp-candidate-history .wjp-candidate-portal-card {
    margin-block-end: 0;
}

/* --- An update is one line, not a card ---------------------------------- */

/*
   128px each, stacked, above everything worth doing. They are a log: a title,
   where it came from and when. Laid out as rows they read faster and cost a
   third of the height, and the feed is capped so a long history scrolls inside
   the rail instead of stretching the page.
*/

.wpjobportal-candidate-portal .wjp-candidate-history .wjp-candidate-notification-list {
    max-height: 26rem;
    overflow-y: auto;
    padding-inline-end: var(--wpjp-ds-space-1);
}

.wpjobportal-candidate-portal .wjp-candidate-history .wjp-candidate-notification {
    display: block;
    margin-block-start: 0;
    padding: var(--wpjp-ds-space-2) var(--wpjp-ds-space-3);
    border: 0;
    border-block-end: 1px solid var(--wpjp-ds-color-border);
    border-radius: 0;
    background: transparent;
}

.wpjobportal-candidate-portal .wjp-candidate-history .wjp-candidate-notification:last-child {
    border-block-end: 0;
}

.wpjobportal-candidate-portal .wjp-candidate-history .wjp-candidate-notification.is-unread {
    border-inline-start: 3px solid var(--wpjp-ds-color-primary);
    background: var(--wpjp-ds-color-canvas);
}

.wpjobportal-candidate-portal .wjp-candidate-history .wjp-candidate-notification strong {
    font-size: var(--wpjp-ds-font-size-sm);
}

.wpjobportal-candidate-portal .wjp-candidate-history .wjp-candidate-notification p {
    margin-block: 2px 0;
    font-size: var(--wpjp-ds-font-size-sm);
    color: var(--wpjp-ds-color-text-muted);
}

.wpjobportal-candidate-portal .wjp-candidate-history .wjp-candidate-update-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--wpjp-ds-space-2);
    font-size: var(--wpjp-ds-font-size-xs);
}

/*
   In a 367px rail the message ran to two or three lines on its own, which put
   the row back where it started. One line of it is enough to know what
   happened; the rest is on the application it points at.
*/
.wpjobportal-candidate-portal .wjp-candidate-history .wjp-candidate-notification p {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Title and message on one line each, meta and Mark read sharing the third. */
.wpjobportal-candidate-portal .wjp-candidate-history .wjp-candidate-notification > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* The per-row Mark read button is what forced the row into two columns. In the
   rail it is a quiet link at the end of the meta line. */
.wpjobportal-candidate-portal .wjp-candidate-history .wjp-candidate-notification {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wpjp-ds-space-2);
}

.wpjobportal-candidate-portal .wjp-candidate-history .wjp-candidate-notification > div {
    flex: 1 1 auto;
    min-width: 0;
}

.wpjobportal-candidate-portal .wjp-candidate-history .wjp-candidate-notification form {
    flex: 0 0 auto;
    margin-block-start: 0;
}

/*
   Measured: the row was 156px, and 44px of that was this one button, which
   takes the 44px minimum every control on the portal is given so it can be
   tapped. That minimum is right for a button somebody has to hit and wrong for
   a quiet "I have seen this" beside a log line, so here it reads as the link
   it behaves like.
*/
.wpjobportal-candidate-portal .wjp-candidate-history .wjp-candidate-notification form button {
    min-height: 0;
    line-height: 1.4;
    text-decoration: underline;
}

/* The other 42px was the meta line wrapping in a 367px rail. The job it came
   from is truncated rather than folded onto a second line. */
.wpjobportal-candidate-portal .wjp-candidate-history .wjp-candidate-update-job {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

/*
 * A small button, not a link. The compatibility sheet fills every portal
 * button with the primary colour and cannot be talked out of it, so the
 * "link" above came out as a blue box with no padding round an underlined
 * white word - neither a link nor a button. Given the room a button needs,
 * it is the small button it already looked like.
 */
.wpjobportal-candidate-portal .wjp-candidate-history .wjp-candidate-notification form button {
    padding: 4px 12px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--wpjp-ds-color-primary);
    font-size: var(--wpjp-ds-font-size-xs);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

/* --- Nothing to report takes one line ----------------------------------- */

/*
   "No action requests." in a 193px card reads as a section that failed to
   load. Said quietly on one line, it reads as the answer it is.
*/

.wpjobportal-candidate-portal .wjp-candidate-empty {
    padding: var(--wpjp-ds-space-2) var(--wpjp-ds-space-3);
    font-size: var(--wpjp-ds-font-size-sm);
    color: var(--wpjp-ds-color-text-muted);
}

/* Action requests and Upcoming interviews stay side by side: measured, the
   work column is 697px wide and stacking them cost 337px against 193px. */

/* --- The two blocks that were left ------------------------------------- */

/*
   Measured at 1280px, with the work column 697px wide: the offer card was
   466px and 159px of that was the four facts about the offer - compensation,
   employment, start date, expiry - laid out two to a row, each in its own
   padded, tinted box. Four short facts do not need two rows and eight sides of
   padding. Across one row they are read in a glance and cost a third of the
   height.
*/
@media (min-width: 900px) {
    .wpjobportal-candidate-portal .wjp-candidate-work .wjp-candidate-offers dl {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--wpjp-ds-space-2);
    }
}

.wpjobportal-candidate-portal .wjp-candidate-offers dl div {
    padding: var(--wpjp-ds-space-2);
}

.wpjobportal-candidate-portal .wjp-candidate-offers dl dd {
    font-size: var(--wpjp-ds-font-size-sm);
}

/*
   And Messages was 428px, 234px of it the reply box. Four rows of textarea is
   a size for composing a letter; this is a reply to a hiring team, and it
   grows if there is more to say. The rows attribute stays as it is, so a page
   with no CSS still gets a usable box - this only sets the height where the
   stylesheet is doing the sizing anyway.
*/
.wpjobportal-candidate-portal .wjp-candidate-reply textarea {
    min-height: 5.5rem;
}

.wpjobportal-candidate-portal .wjp-candidate-reply {
    display: grid;
    gap: var(--wpjp-ds-space-2);
}

.wpjobportal-candidate-portal .wjp-candidate-reply button {
    justify-self: start;
}

/* ==========================================================================
   One family: the suite's surfaces wear Core's card
   ==========================================================================

   The report was that the recruiting blocks do not look like the rest of WP
   Job Portal, and that it might be font or colour. Measured on the employer
   dashboard, it is neither - both already render Manrope 17px in #575757. It
   is the surface:

                        Core .wjportal-resume-list   suite .wpjp-recruit-stat
     background         #ffffff                      #f6f6f6
     radius             12px                         10px
     shadow             0 4px 15px rgba(0,0,0,.08)   none

   Two token systems sitting side by side, disagreeing. Core's cards are built
   from --wpjp-card-background, --wpjp-border-color, --wpjp-card-shadow and a
   12px radius; the suite reached for --wpjp-ds-color-canvas and
   --wpjp-ds-radius-md, which are a grey fill and a tighter corner. Nothing was
   wrong with either on its own, and together on one page they read as two
   products.

   So the suite's card surfaces are defined here once, in Core's own variables,
   with the same fallbacks Core uses. A resume card and a recruiting stat now
   sit on the same white, with the same corner and the same shadow.
*/

.wpjp-recruit-stat,
.wpjp-native-recruit-view .wpjp-ds-card,
.wpjobportal-candidate-portal .wjp-candidate-portal-card,
.wpjobportal-recruit-workspace .wjp-workspace-card,
.wpjobportal-recruit-insights .wjp-insight-card,
.wpjobportal-recruit-automation .wjp-auto-panel {
    background: var(--wpjp-card-background, #fff);
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: var(--wpjp-ed-radius, 12px);
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.08));
}

/*
 * A surface inside a surface keeps the fill and drops the lift. Two shadows
 * stacked read as a card that has come loose from the one behind it.
 */
.wpjp-recruit-stat .wpjp-recruit-stat,
.wpjobportal-candidate-portal .wjp-candidate-portal-card .wjp-candidate-item,
.wpjobportal-recruit-workspace .wjp-workspace-card .wjp-note,
.wpjobportal-recruit-workspace .wjp-workspace-card .wjp-task {
    box-shadow: none;
}

/*
 * A figure is a heading, and Core writes headings dark.
 *
 * The insight and stat figures were set in --wpjp-primary-color at weight 400.
 * Primary is an accent and link colour, not a heading colour, so a headline
 * number set in it sat pale and thin beside a left menu whose headings take
 * --wpjp-secondary-color and are bold - the weaker of the two carried the
 * number. Core's own rule is plain enough: a section title is bold and dark, and
 * a menu heading takes --wpjp-secondary-color. These follow it now, which also
 * takes them from roughly 3.4:1 against white to about 11:1.
 */

/* ==========================================================================
   Headings with no class of their own
   ==========================================================================

   Audited every recruiting screen for text off Core's scale, and this was what
   was left. The templates write plain <h1>, <h2> and <h3>, nothing in the
   plugin sizes them, so they took whatever the theme gives: on Twenty
   Twenty-Five an h1 came out at 48px against Core's --wpjp-main-heading of
   32px, and an h3 at 20px, which is on nobody's scale.

   Sized from Core's own variables, so they answer to the same settings as
   everything else. All three move down, not up: 48 to 32 for the page title,
   and 20 to 17 for the smallest, which is the size Core gives a section title.
*/

.wpjp-native-recruit-view h1,
.wpjobportal-recruit-workspace h1,
.wpjobportal-recruit-insights h1,
.wpjobportal-recruit-automation h1,
.wpjobportal-candidate-portal h1,
.wpjobportal-recruit-team h1 {
    font-size: var(--wpjp-main-heading, 32px);
    line-height: 1.2;
}

/*
 * A notification is a Core row, so the feed's own grid stands down.
 *
 * .wjp-auto-list > article is a three-column grid - 38px icon, copy, actions -
 * and wrapping the icon and copy in Core's .wjportal-resume-list-top-wrp made
 * that pair a single grid item, which landed in the 38px column. The message
 * wrapped one or two words per line down a ribbon while the buttons sat over
 * the text beside it.
 *
 * The row is a block on the portal; the icon and the copy share a grid of
 * their own inside the top block, and the action bar is Core's, underneath.
 */
.wpjp-native-recruit-view .wjp-auto-list > article.wjportal-resume-list {
    display: block;
    padding: 0;
}

.wpjp-native-recruit-view .wjp-auto-list > article > .wjportal-resume-list-top-wrp {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: var(--wpjp-ds-space-3);
    align-items: start;
    padding: var(--wpjp-ds-space-4);
}

/*
 * A one-button form is a button, not a row.
 *
 * Each action in a Core action bar is its own <form>, and .wpjp-ds-form is
 * width:100% - so Open, Mark read and Dismiss each claimed a full line of the
 * bar instead of sitting along it.
 */
.wpjp-native-recruit-view .wjportal-resume-action-wrp form,
.wpjp-native-recruit-view .wjportal-resume-list-btm-wrp form {
    display: inline-block;
    width: auto;
    margin: 0;
}

/*
 * Two bulk actions, one line.
 *
 * Each is its own <form>, and a form is a block, so "Mark N read" and
 * "Clear N read" stacked as two full rows of blue above the list rather than
 * sitting together the way a pair of buttons should.
 */
.wpjp-native-recruit-view .wjp-auto-clear {
    display: inline-block;
    /* .wpjp-ds-form is width:100%, so inline-block alone still took the row. */
    width: auto;
    margin-inline-end: var(--wpjp-ds-space-2);
    margin-block-end: var(--wpjp-ds-space-2);
}

/*
 * Talent Pools reads down the page, one panel at a time.
 *
 * The screen was a grid of forms - create a pool beside the pool list beside
 * duplicate review beside templates - which is a dashboard's shape, not a
 * portal page's. Core puts one thing in one panel and stacks them, and the
 * panels are .wjportal-cp-sect-wrp now, so they only need the column.
 */
.wpjp-native-recruit-view .wjp-candidate-management-grid,
.wpjp-native-recruit-view .wjp-reason-grid,
.wpjp-native-recruit-view .wjp-duplicate-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wpjp-ds-space-5);
}

/*
 * Core's table, without the two things wrong with it.
 *
 * .wjportal-table-wrp is defined in jobseekercp.css and used by no Core
 * template - these conversions are its only consumers - and it carries two
 * values that do not survive contact with a panel:
 *
 *   min-width: 600px, which is wider than the 572px a team panel gives it, so
 *   every table drew a horizontal scrollbar on a 1400px screen; and
 *
 *   thead tr background #f0e6ff, a lavender under a comment calling it "based
 *   on primary color" - primary is #3baeda, and lavender is the exact shade
 *   this suite was just cleared of.
 *
 * The header takes Core's canvas tint, and the table fits the room it is in.
 */
.wpjp-native-recruit-view .wjportal-table-wrp,
.wpjobportal-recruit-team .wjportal-table-wrp,
.wpjobportal-recruit-insights .wjportal-table-wrp {
    min-width: 0;
}

.wpjp-native-recruit-view .wjportal-table-wrp thead tr,
.wpjobportal-recruit-team .wjportal-table-wrp thead tr,
.wpjobportal-recruit-insights .wjportal-table-wrp thead tr {
    background-color: var(--wpjp-ds-color-canvas);
}

/*
 * Core's section title, where Core's own rule cannot reach.
 *
 * .wjportal-cp-sec-title is styled only under #wjportal-emp-cp-wrp and
 * #wjportal-job-cp-wrp - the two control panels. The recruitment workflow
 * renders on the resume page, which carries neither, so the class arrived with
 * no rules at all: the section label sat at 17px weight 300 while the headings
 * inside it took the theme's 32px. The tester saw a caption over a headline.
 *
 * These are the measurements Core gives that class on the dashboard - 22px,
 * bold, its own colour and a rule beneath - restated where the id selector
 * cannot follow.
 */
.wpjp-native-application-workflow .wjportal-cp-sec-title,
.wpjp-native-recruit-view .wjportal-cp-sec-title,
.wpjobportal-candidate-portal .wjportal-cp-sec-title,
.wpjobportal-recruit-team .wjportal-cp-sec-title,
.wpjobportal-recruit-insights .wjportal-cp-sec-title,
.wpjobportal-recruit-automation .wjportal-cp-sec-title,
.wpjobportal-recruit-candidates .wjportal-cp-sec-title,
.wpjobportal-recruit-workspace .wjportal-cp-sec-title,
.wpjobportal-recruit-pipeline .wjportal-cp-sec-title {
    /*
     * Core's measurements, unless a look has stated its own.
     *
     * Elegant Design's sheet is imported into a layer and this one is not, so
     * its rules lose here however they are written - which is how a site that
     * bought a different look ended up with Core's 22px heading and a rule
     * beneath it that the look does not draw. Custom properties settle it:
     * their values cascade on their own, so where a look defines these the
     * look wins, and where none is installed the Core defaults apply.
     */
    margin: 0 0 var(--wpjp-ed-gap-3, var(--wpjp-ds-space-4));
    padding: var(--wpjp-ed-sec-title-pad, 0 0 10px);
    color: var(--wpjp-ed-ink, var(--wpjp-secondary-color, #333333));
    font-size: var(--wpjp-ed-fs-h3, var(--wpjp-sub-heading, 22px));
    font-weight: 700;
    line-height: 1.3;
    border-bottom: var(--wpjp-ed-sec-title-border, 1px solid var(--wpjp-border-color, #e9ecef));
}

/*
 * Unclassed headings only - a heading that carries Core's own class keeps it.
 *
 * The workspace sections took .wjportal-cp-sec-title when they became sections
 * of a page, and this rule was still sizing them at 22px inside a wrapper
 * whose own title is 17px: the child heading louder than the section it sits
 * in, which is the hierarchy the tester saw upside down.
 */
.wpjp-native-recruit-view h2:not(.wjportal-cp-sec-title),
.wpjobportal-recruit-workspace h2:not(.wjportal-cp-sec-title),
.wpjobportal-recruit-insights h2:not(.wjportal-cp-sec-title),
.wpjobportal-recruit-automation h2:not(.wjportal-cp-sec-title),
.wpjobportal-candidate-portal h2:not(.wjportal-cp-sec-title),
.wpjobportal-recruit-team h2:not(.wjportal-cp-sec-title) {
    font-size: var(--wpjp-sub-heading, 22px);
    line-height: 1.3;
}

.wpjp-native-recruit-view h3,
.wpjobportal-recruit-workspace h3,
.wpjobportal-recruit-insights h3,
.wpjobportal-recruit-automation h3,
.wpjobportal-candidate-portal h3,
.wpjobportal-recruit-team h3 {
    font-size: var(--wpjp-body-font-size, 17px);
    font-weight: 600;
    line-height: 1.4;
}

/* ==========================================================================
   The recruiter's header band
   ==========================================================================

   Core's .wjportal-cp-top already carries the band, its gradient and its
   padding, so this only says what goes inside it: the company or companies
   this person recruits for, each one a link, each one carrying its logo.
   The four counts underneath are Core's own stat boxes, unchanged.
*/

.wpjp-recruit-cp-companies {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wpjp-ds-space-4);
    width: 100%;
}

.wpjp-recruit-cp-company {
    display: flex;
    align-items: center;
    gap: var(--wpjp-ds-space-3);
    padding: var(--wpjp-ds-space-2) var(--wpjp-ds-space-3);
    border-radius: 8px;
    /* The band behind is the primary gradient, so the label is the white
       Core already uses on it and the plate is a wash of the same. */
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    text-decoration: none;
}

.wpjp-recruit-cp-company:hover,
.wpjp-recruit-cp-company:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.wpjp-recruit-cp-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
    flex: 0 0 auto;
}

.wpjp-recruit-cp-company-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.wpjp-recruit-cp-company-name {
    font-size: var(--wpjp-body-font-size, 17px);
    font-weight: 600;
    line-height: 1.3;
}

/* The role is the smaller fact of the two. */
.wpjp-recruit-cp-company-role {
    font-size: var(--wpjp-ds-font-size-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
}

.wpjp-recruit-cp-company-email {
    font-size: var(--wpjp-ds-font-size-sm);
    opacity: .85;
    word-break: break-word;
}

/*
 * Show the top of Core's band, not a squashed copy of the whole thing.
 *
 * .wjportal-cp-top is painted with linear-gradient(primary, secondary), and
 * secondary is a text colour - near black. On the employer band that is 758px
 * of gradient, so the dark end sits far below the fold and what anybody sees
 * is blue. This band is 130px on every view that is not the overview, which
 * fitted the same gradient into a sixth of the room and turned the header on
 * ten screens into a fade from blue to black.
 *
 * Painting it at the employer band's height and letting it clip shows exactly
 * the part of the gradient Core shows, at the same rate, however tall this
 * band happens to be. The background colour carries the last stop on, so a
 * band taller than that still ends where Core's does.
 *
 * Carries the id because the rule it has to answer does: employercp.css paints
 * this band from #wjportal-emp-cp-wrp .wjportal-cp-top, and with the background
 * shorthand, which resets background-size to auto. A class on its own loses on
 * specificity and the size never lands. Matching the weight and arriving later
 * is enough - no !important needed.
 */
.wpjp-recruit-cp-top,
#wjportal-emp-cp-wrp .wpjp-recruit-cp-top {
    background-color: var(--wpjp-secondary-color, #333333);
    background-size: 100% 758px;
    background-repeat: no-repeat;
}

/*
 * <small> says its own size.
 *
 * Nothing sized the applied date or the assignment line on a pipeline card, so
 * they took the browser's default for <small> - 0.8333 of the body size, which
 * lands on 14.1667px. Near enough to look right and not a size this plugin
 * uses; and it is a ratio, so it moves when the body size does. 14px is one of
 * the small sizes, stated.
 */
.wpjp-native-recruit-view small,
.wpjp-native-application-workflow small,
.wpjobportal-candidate-portal small {
    font-size: var(--wpjp-ds-font-size-sm);
}

/*
 * A resume card is a headline on the resume list and a line item here.
 *
 * The recruiting screens reuse Core's resume card, and Elegant Design sizes
 * .wjportal-resume-name at clamp(24px, 1.35rem + 0.9vw, 34px) - right where
 * the card is the width of the page and the name is the thing you came for.
 * In "Candidates needing attention" the same card sits in a narrow column, so
 * 34px bold wrapped mid-word and clipped, and the job title overflowed its box
 * outright. Same markup, a tenth of the width.
 *
 * Scoped to the recruiting views alone, at the published scale, so the resume
 * list keeps the display size it was designed for. Specificity carries it over
 * the design's own rule rather than !important.
 */
.wpjp-native-recruit-view .wjportal-resume-list .wjportal-resume-name {
    /*
     * Big enough to be the name. Core's own job card carries its hierarchy
     * in size and colour rather than weight - a 34px ink title, a 19px brand
     * company, 17px grey meta, all of them 700 - and this card had lost all
     * three: one size, one colour, everything bold, so nothing led. The
     * earlier 17px here was me matching what rendered rather than what Core
     * intends; style.css is not enqueued on these pages, so its 22px/600
     * never applied.
     */
    font-size: var(--wpjp-sub-heading, 22px);
    color: var(--wpjp-secondary-color, #333333);
    line-height: 1.3;
}

.wpjp-native-recruit-view .wjportal-resume-list .wjportal-resume-title,
.wpjp-native-recruit-view .wjportal-resume-list .wjportal-resume-title a {
    font-size: var(--wpjp-body-font-size, 17px);
}

/*
 * And the card stops trying to be two columns in a 366px slot.
 *
 * Core's resume card puts the details beside the actions. On the resume list
 * that is a full-width row and both fit. Dropped into "Candidates needing
 * attention" the same grid had 205px to divide: the actions column asked for
 * 157px and took it, the text column collapsed to 24px, and the job title
 * spilled out of a box narrower than one word.
 *
 * One column here, so the text gets the width and the actions sit under it.
 */
.wpjp-native-recruit-view .wjportal-resume-list .wjportal-resume-cnt-wrp {
    grid-template-columns: 1fr;
}

/*
 * The candidate card, composed rather than merely tokenised.
 *
 * Core stacks the resume card's tags down a right-hand column - Full-Time,
 * the rating, the cover-letter pill - which reads well in a two-column card
 * the width of the page. On the recruiting screens it left a 754px-wide box
 * holding 407px of content in a vertical stack, right-aligned, so the card
 * ran 245px tall around a column of empty space with the text left-aligned
 * beside it and the tags floating right. Three alignments in one card.
 *
 * They belong on one line, reading left to right with everything else. The
 * row wraps, so the narrow "Candidates needing attention" column stacks them
 * again by itself rather than by a second rule.
 */
.wpjp-native-recruit-view .wjportal-resume-list .wjportal-resume-right-wrp {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--wpjp-ds-space-2, 8px);
    text-align: start;
}

/*
 * The icon stays with the line it labels.
 *
 * Each meta item is a flex row of a 16px ::before icon and its value, set to
 * wrap. In a full-width card the value never fills the row so nothing wraps.
 * In the overview's 366px column "Danville, Virginia, United States" takes the
 * whole width, and the icon - being the first flex item and having nowhere
 * left - was pushed onto a line of its own, leaving a pin floating above its
 * own address.
 *
 * nowrap keeps them together and min-width lets the value wrap inside its own
 * column instead of pushing the icon out. Aligned to the start so the icon
 * sits on the first line, not centred against a two-line block.
 */
.wpjp-native-recruit-view .wjportal-resume-list .wjportal-resume-data-text {
    flex-wrap: nowrap;
    align-items: start;
}

.wpjp-native-recruit-view .wjportal-resume-list .wjportal-resume-data-value {
    min-width: 0;
}

/* On the first line, and in the middle of it. Aligned to the start, the
   16px icon sat at the top of a line of text half as tall again, so every
   icon on the card stood above the words it labels. Half the difference
   brings it down to the line's centre, and it still stays on the first line
   when the value wraps. */
.wpjp-native-recruit-view .wjportal-resume-list .wjportal-resume-data-text::before {
    margin-block-start: calc((1lh - 16px) / 2);
    vertical-align: 0;
}

/*
 * The overview shows who needs attention, not their whole record.
 *
 * "Candidates needing attention" is a 366px sidebar panel, and it was given
 * the full resume card: an empty five-star rating, a "No Cover Letter" pill
 * and an employment type, each on its own line because nothing else fits at
 * that width. One candidate filled 343px of a panel meant to summarise
 * several, and the rating is not even actionable there.
 *
 * Dropped on the overview alone. Assigned Candidates still shows every one of
 * them, at full width, where they fit on a single line and mean something.
 */
.wpjp-native-recruit-view[data-recruit-view="overview"] .wjportal-resume-list .wjportal-resume-right-wrp {
    display: none;
}

/*
 * The board scrolls; it does not need to say so twice.
 *
 * "Previous stages" and "Next stages" sit directly above the board and move it
 * a column at a time, so the grey trough underneath was a second control for
 * the same thing - and the more conspicuous of the two, running the full width
 * of the board with an arrow at each end.
 *
 * Hidden, not disabled: the wheel, a trackpad swipe, a touch drag and the
 * keyboard all still scroll it, and the buttons carry the affordance for
 * anyone looking for one.
 */
.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-kanban {
    scrollbar-width: none;
}

.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-kanban::-webkit-scrollbar {
    height: 0;
    width: 0;
}


/* The role, in the brand colour Core gives a company name - second in the
   order, told apart by hue rather than by yet more weight. */
.wpjp-native-recruit-view .wjportal-resume-list .wjportal-resume-title,
.wpjp-native-recruit-view .wjportal-resume-list .wjportal-resume-title a {
    color: var(--wpjp-primary-color, #3baeda);
}

/* Supporting detail, in the body colour, so it recedes behind both. */
.wpjp-native-recruit-view .wjportal-resume-list .wjportal-resume-data-value {
    color: var(--wpjp-body-font-color, #575757);
}

/*
 * And the meta pairs up instead of running down the card.
 *
 * "Fresh" and "Computer/IT" are 67px and 127px in a 205px column and missed
 * sharing a line by five pixels of gap, so three facts took three rows in a
 * panel with none to spare.
 */
.wpjp-native-recruit-view .wjportal-resume-list .wjportal-resume-middle-wrp .wjportal-resume-data {
    column-gap: var(--wpjp-ds-space-2, 8px);
}

/*
 * The board's hidden labels stay on the board.
 *
 * Each stage column carries a visually hidden <label> for its move control,
 * positioned absolute. The board scrolls with overflow-x: auto, but an
 * absolutely positioned element is only clipped by an ancestor that is also
 * its containing block - and nothing between the label and the page was
 * positioned, so the labels resolved against the page instead. On a 375px
 * phone the furthest one sat at x=1020 and dragged the whole document out
 * with it: every page on the pipeline scrolled sideways, header and all,
 * while the board itself was behaving perfectly at 315px.
 *
 * Making the column the containing block puts them back inside the scroller.
 */
.wpjp-native-recruit-view .wpjobportal-recruit-pipeline .wjp-kanban-column {
    position: relative;
}

/*
 * Two metrics across on a phone.
 *
 * The overview's grid asks for as many columns as fit at 9.5rem each, which
 * is the right instinct everywhere except the one place it matters: at 375px
 * the container is 284px and two columns need 320px, so it fell back to one.
 * Four cards of roughly 230px then filled the entire first screen and the
 * recruiter scrolled past a wall of numbers to reach anything actionable.
 *
 * Below the tablet breakpoint they are simply two across - the counts are
 * short, and seeing all four at once is the whole point of an overview.
 */
@media (max-width: 782px) {
    /* Targeted on the control-panel top band, which is where these cards
       actually live - outside .wpjp-native-recruit-view, so the overview
       rules further up this sheet never reached them. */
    .wpjp-recruit-cp-top .wpjp-native-recruit-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /*
     * And the card has to fit the half-width it now gets.
     *
     * Two columns alone made things worse: 24px of card padding plus 25px
     * more on the inner block left the label 34px to live in, so "Candidates
     * Assigned To Me" came out one word per line over four rows and the
     * "View Detail" link, 104px wide in an 86px box, was cut off. The cards
     * grew from 225px tall to 315px - taller stacked two-up than one-up.
     *
     * Padding scaled to the width it is actually being given.
     */
    .wpjp-recruit-cp-top .wpjp-native-recruit-metrics .wjportal-cp-box {
        padding: var(--wpjp-ds-space-3, 12px);
    }

    .wpjp-recruit-cp-top .wpjp-native-recruit-metrics .wjportal-cp-box-top {
        padding-inline: 0;
    }

    .wpjp-recruit-cp-top .wpjp-native-recruit-metrics .wjportal-cp-box-btm a {
        padding-inline: var(--wpjp-ds-space-2, 8px);
    }
}

/*
 * The stages wrap instead of running off the side.
 *
 * Seven stages at 240px need 1776px; the board has 916px. So four of them sat
 * behind a scroll the reader had to discover - which is how a scrollbar, then
 * a pair of stage buttons, then a hidden scrollbar all came to be argued about
 * in turn. None of that is needed if the stages simply take a second row.
 *
 * auto-fit gives four to a row here and fewer on a narrower window, so the
 * board fits whatever it is given without a horizontal scroll at all. The
 * stage buttons go with it: they move a board that no longer moves.
 *
 * The phone keeps the scrolling board. Seven full-width stages stacked would
 * be a very long page, and the buttons work well at that size.
 */
@media (min-width: 783px) {
    /* Specific enough to beat Core's compat sheet, which sets
       grid-auto-flow: column and grid-template-columns: none at the same
       weight and is loaded after this file. */
    .wpjp-native-recruit-view[data-recruit-view="pipeline"] .wpjobportal-recruit-pipeline .wjp-kanban {
        grid-auto-flow: row;
        /*
         * Two here, three from 1100px - a fixed count, not auto-fit.
         *
         * auto-fit asks how many 200px columns fit, so the wider the screen
         * the more it packed in and the narrower each card stayed: four to a
         * row at 1680px, with the candidate's name wrapping inside 200-odd
         * pixels. A fixed count spends the extra width on the cards instead,
         * which is the whole of what was asked for.
         */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wpjp-native-recruit-view[data-recruit-view="pipeline"] .wpjobportal-recruit-pipeline .wjp-kanban-navigation {
        display: none;
    }
}

@media (min-width: 1100px) {
    .wpjp-native-recruit-view[data-recruit-view="pipeline"] .wpjobportal-recruit-pipeline .wjp-kanban {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/*
 * The candidate's message thread.
 *
 * The markup has always marked each message is-from-team or is-from-you,
 * and nothing anywhere styled either - so the thread fell back to a bare
 * ordered list and the two sides of the conversation were told apart only
 * by reading the word "You" at the start of the line.
 *
 * The hiring team sits left on a plain surface, the candidate sits right in
 * the brand tint, which is the arrangement people already read as a
 * conversation. The list numbering goes: a message is not a step.
 */
.wpjobportal-candidate-portal .wjp-candidate-thread {
    display: flex;
    flex-direction: column;
    gap: var(--wpjp-ds-space-3);
    max-block-size: 24rem;
    overflow-y: auto;
    margin: 0 0 var(--wpjp-ds-space-3);
    padding: 0;
    list-style: none;
    overscroll-behavior-block: contain;
}

.wpjobportal-candidate-portal .wjp-candidate-message {
    max-inline-size: 80%;
    padding: var(--wpjp-ds-space-3);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-lg);
}

.wpjobportal-candidate-portal .wjp-candidate-message.is-from-team {
    align-self: flex-start;
    background: var(--wpjp-ds-color-surface);
}

/* The candidate's own words, in the portal's colour and on the side people
   expect their own messages to be. */
.wpjobportal-candidate-portal .wjp-candidate-message.is-from-you {
    align-self: flex-end;
    background: var(--wpjp-ds-color-canvas);
    border-color: var(--wpjp-primary-color, #3baeda);
}

.wpjobportal-candidate-portal .wjp-candidate-message-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--wpjp-ds-space-2);
    margin-block-end: var(--wpjp-ds-space-1);
}

.wpjobportal-candidate-portal .wjp-candidate-message-head small {
    color: var(--wpjp-body-font-color, #575757);
}

.wpjobportal-candidate-portal .wjp-candidate-message-subject {
    font-weight: 600;
    margin-block-end: var(--wpjp-ds-space-1);
}

/*
 * --- Recruiting fields are the add-job form's fields ---
 *
 * The recruiting screens had five kinds of field: search boxes with 2px of
 * padding, selects whose text touched the border, a 14px pipeline select, 44px
 * inputs beside 55px ones, and buttons at 46px beside 55px fields. One rule
 * now, at the values the employer's add-job form uses - 55px tall, 10px by
 * 12px inside, a 1px border, 8px corners, the body size - and Core's caret on
 * every dropdown.
 *
 * The roots are listed in :is(), which weighs as its heaviest entry, so each
 * is as strong as `.wpjobportal-recruit-team.is-frontend`; the rule is last in
 * the file, so it settles ties with the per-screen rules above it.
 */
:is(.wpjp-native-recruit-view, .wpjp-native-application-workflow, .wpjp-recruit-center, .wpjobportal-recruit-team.is-frontend) :is(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], input[type="tel"], input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea) {
    box-sizing: border-box;
    max-inline-size: 100%;
    min-block-size: var(--wpjp-field-height, 55px);
    padding: 10px 12px;
    color: var(--wpjp-body-font-color, #575757);
    background-color: var(--wpjp-card-background, #fff);
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: 8px;
    font-family: inherit;
    /* A look sets its field size here; Core's body size otherwise. */
    font-size: var(--wpjp-field-font-size, var(--wpjp-body-font-size, 17px));
    line-height: 1.4;
}

:is(.wpjp-native-recruit-view, .wpjp-native-application-workflow, .wpjp-recruit-center, .wpjobportal-recruit-team.is-frontend) select:not([multiple]) {
    appearance: none;
    padding-inline-end: 40px;
    /* Core's caret; stated here too for a page whose wrapper Core does not name. */
    background-image: var(--wpjp-select-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23656575'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"));
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 1.5em;
}

:is(.wpjp-native-recruit-view, .wpjp-native-application-workflow, .wpjp-recruit-center, .wpjobportal-recruit-team.is-frontend) textarea {
    min-block-size: 7rem;
}

/*
 * A button in a form that has fields stands as tall as they do, with its
 * label in the middle. The filter buttons were block boxes whose label sat at
 * the top of the extra height; the form buttons were 46px beside 55px fields.
 */
:is(.wpjp-native-recruit-view, .wpjp-native-application-workflow, .wpjp-recruit-center, .wpjobportal-recruit-team.is-frontend) form:has(:is(input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="date"], input[type="datetime-local"], select, textarea)) :is(button, input[type="submit"], .button, .wjportal-form-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-block-size: var(--wpjp-field-height, 55px);
    padding-block: 0;
    text-align: center;
    /* A <button> keeps the browser's own face unless it is told otherwise. */
    font-family: inherit;
}

/* Firefox before 121 has no :has() and drops the rule above whole, which left the
   label at the top of the 55px buttons. This keeps the centring without it. */
:is(.wpjp-native-recruit-view, .wpjp-native-application-workflow, .wpjp-recruit-center, .wpjobportal-recruit-team.is-frontend) form :is(button, input[type="submit"], .button, .wjportal-form-btn) {
    align-items: center;
    justify-content: center;
}

/*
 * --- The pipeline toolbar: choose the job, then add a stage ---
 *
 * The two forms stood side by side, so "Find a job" and "Job" stacked on the
 * left while the stage name and its button floated at mid-height on the
 * right, and the Add stage button lined up with nothing. One row each now,
 * the job first because it is what the stages below belong to, with the
 * dashed rule the add-job form draws between its rows.
 */
.wpjobportal-recruit-pipeline .wjp-pipeline-toolbar.wjp-pipeline-toolbar {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--wpjp-ds-space-4);
    padding: var(--wpjp-ds-space-4);
}

/*
 * :is() carries the ID's weight: `#wjportal-emp-cp-wrp ... .wjp-pipeline-toolbar
 * form` makes every toolbar form a wrapping flex row, which put the name on a
 * line of its own and the swatch and button under it.
 */
:is(#wjportal-emp-cp-wrp, .wpjobportal-recruit-pipeline) .wjp-pipeline-toolbar form.wjp-stage-create.wjp-stage-create {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--wpjp-field-height, 55px) auto;
    align-items: center;
    padding-block-start: var(--wpjp-ds-space-4);
    border-block-start: 1px dashed var(--wpjp-border-color, #e9ecef);
}

/* The swatch is a field in the row, so it is the row's height and border. */
.wpjobportal-recruit-pipeline .wjp-stage-create input[type="color"].wjp-stage-create-color,
.wpjobportal-recruit-pipeline .wjp-stage-create input[type="color"] {
    box-sizing: border-box;
    inline-size: var(--wpjp-field-height, 55px);
    min-inline-size: var(--wpjp-field-height, 55px);
    block-size: var(--wpjp-field-height, 55px);
    padding: 6px;
    background: var(--wpjp-card-background, #fff);
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: 8px;
}

.wpjobportal-recruit-pipeline .wjp-stage-create input[type="text"] {
    min-inline-size: 0;
}

/*
 * On a phone the job form is a column, and two of its row rules turn on
 * their side there: `flex: 1 1 16rem` became a 256px height under "Find a
 * job", and `align-items: flex-end` pushed each field against the right
 * edge, half out of the panel. In a column each field is its own height and
 * the panel's full width.
 */
@media (max-width: 782px) {
    :is(#wjportal-emp-cp-wrp, .wpjobportal-recruit-pipeline) .wjp-pipeline-toolbar form:not(.wjp-stage-create) {
        align-items: stretch;
    }

    /* The stage name takes the row; the swatch and the button share the next. */
    :is(#wjportal-emp-cp-wrp, .wpjobportal-recruit-pipeline) .wjp-pipeline-toolbar form.wjp-stage-create.wjp-stage-create {
        grid-template-columns: var(--wpjp-field-height, 55px) minmax(0, 1fr);
    }

    :is(#wjportal-emp-cp-wrp, .wpjobportal-recruit-pipeline) .wjp-pipeline-toolbar form.wjp-stage-create input[type="text"] {
        grid-column: 1 / -1;
    }

    /* :is() lends a class's weight, to match `... .wjp-pipeline-field--search`. */
    :is(#wjportal-emp-cp-wrp, .wpjobportal-recruit-pipeline) .wjp-pipeline-toolbar form:not(.wjp-stage-create) > :is(.wjp-pipeline-field, *) {
        flex: 0 0 auto;
        inline-size: 100%;
    }
}

/*
 * --- Stages three across ---
 *
 * Stacked one under another, seven stages made the page seven panels deep
 * with most of each panel empty. A stage is narrow content - a name and a
 * short list - so they now share rows: as many 16rem columns as the space
 * takes, three at a desktop width, two on a laptop, one on a phone.
 */
.wpjp-native-recruit-view .wjp-stage-stack,
.wjp-stage-stack.wjp-stage-stack {
    display: grid;
    /*
     * At most three to a row, however wide the page: a third of the row is
     * the narrowest a stage may be, and 16rem lets a narrower screen drop to
     * two and then one. A theme's wider column had fitted four.
     */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(16rem, calc((100% - 2 * var(--wpjp-ds-space-4)) / 3))), 1fr));
    gap: var(--wpjp-ds-space-4);
    /* Stages in a row stand as tall as the fullest of them. */
    align-items: stretch;
}

.wjp-stage-stack.wjp-stage-stack .wjp-kanban-column {
    min-inline-size: 0;
    margin-block-end: 0;
    padding: var(--wpjp-ds-space-4);
}

/*
 * --- Recruiting Team: one card to a row, each form one row ---
 *
 * Side by side, the two cards were each half the panel: the members table
 * squeezed to three narrow columns, the ownership table to four, and every
 * field of both forms stacked under its label down a long column. Each card
 * now has the row to itself, and a form reads across it - the fields share
 * the row and the button closes it - as the add-job form's multi-field rows
 * do. Below 782px they stack again.
 */
.wpjobportal-recruit-team.is-frontend .wpjp-team-grid.wpjp-team-grid {
    grid-template-columns: minmax(0, 1fr);
}

.wpjobportal-recruit-team.is-frontend .wpjp-team-card > form[method="post"],
.wpjobportal-recruit-team.is-frontend .wpjp-team-card > form.wjp-table-search {
    display: grid;
    gap: var(--wpjp-ds-space-3);
    align-items: end;
    margin-block-end: var(--wpjp-ds-space-4);
}

/* Add a member: who, which role, and the button. */
.wpjobportal-recruit-team.is-frontend .wpjp-team-card > form[method="post"]:has(select[name="role"]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 16rem) auto;
}

/* Assign an owner: job, member, ownership, and the button. */
.wpjobportal-recruit-team.is-frontend .wpjp-team-card > form[method="post"]:has(select[name="owner_type"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

/* A search: the box takes the row, the button what it needs. */
.wpjobportal-recruit-team.is-frontend .wpjp-team-card > form.wjp-table-search {
    grid-template-columns: minmax(0, 1fr) auto;
}

.wpjobportal-recruit-team.is-frontend .wpjp-team-card > form > p {
    display: flex;
    flex-direction: column;
    gap: var(--wpjp-ds-space-1);
    margin: 0;
    min-inline-size: 0;
}

.wpjobportal-recruit-team.is-frontend .wpjp-team-card > form > p > label {
    display: flex;
    flex-direction: column;
    gap: var(--wpjp-ds-space-1);
}

/* The label's <br> is spacing the column already gives. */
.wpjobportal-recruit-team.is-frontend .wpjp-team-card > form > p br {
    display: none;
}

/* A note about the list spans the row rather than taking a field's place. */
.wpjobportal-recruit-team.is-frontend .wpjp-team-card > form > p.description {
    grid-column: 1 / -1;
}

.wpjobportal-recruit-team.is-frontend .wpjp-team-card > form :is(button, .wjportal-form-btn) {
    inline-size: auto;
    white-space: nowrap;
}

@media (max-width: 782px) {
    .wpjobportal-recruit-team.is-frontend .wpjp-team-card > form[method="post"]:is(:has(select[name="role"]), :has(select[name="owner_type"])) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * --- Talent Pools: panels share rows ---
 *
 * Five panels one under another made this the longest page in the
 * dashboard, most of it the empty right-hand half of each panel. Creating a
 * pool now sits beside the pools there are, and message templates beside
 * rejection reasons - in that order, because the company chosen at the top
 * of templates is the one the reasons belong to. Duplicate review keeps the
 * row between them. Below 782px everything stacks as before.
 */
@media (min-width: 783px) {
    .wpjp-native-recruit-view[data-recruit-view="pools"] .wpjobportal-recruit-candidates {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--wpjp-ds-space-4);
        align-items: start;
    }

    .wpjp-native-recruit-view[data-recruit-view="pools"] .wpjobportal-recruit-candidates > * {
        min-inline-size: 0;
        margin: 0;
    }

    /* Message templates and rejection reasons took full rows too: at half
       width the templates table (36rem) scrolled, its first column was cut
       off and the Edit / Remove buttons wrapped out of line. */
    .wpjp-native-recruit-view[data-recruit-view="pools"] .wpjobportal-recruit-candidates > * {
        grid-column: 1 / -1;
    }

    /* Create Talent Pool above the pools rather than beside them: the pools
       table needs the full width, and at half of it the Candidates column
       was cut off behind a scrollbar. */
    .wpjp-native-recruit-view[data-recruit-view="pools"] .wpjobportal-recruit-candidates > .wjp-candidate-management-grid.wjp-candidate-management-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
}

/*
 * These three had the card's corners and shadow and none of its border or
 * padding, so their text ran to the shadow's edge beside two framed panels.
 * The values are the framed panels' own.
 */
.wpjp-native-recruit-view[data-recruit-view="pools"] .wpjobportal-recruit-candidates > .wjportal-cp-sect-wrp {
    padding: var(--wpjp-ds-space-4);
    border: 1px solid var(--wpjp-border-color, #e9ecef);
}


/*
 * --- Candidate management forms keep one rhythm ---
 *
 * Two markups side by side: Application assignment puts each label before
 * its select, Candidate source wraps the field inside its label. So the
 * first had 16px from label to field and nothing from field to the next
 * label or to its button, and the second 2px and then 16px. Both now read
 * 6px from a label to its field and 16px between one field and the next,
 * and before the button.
 */
.wjp-candidate-management-grid > form.wjp-ds-form.wjp-ds-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.wjp-candidate-management-grid > form.wjp-ds-form > :is(h2, h3) {
    margin-block: 0 10px;
}

/* The cards that are not forms start their heading at the same height. */
.wjp-candidate-management-grid > :not(form) > :is(h2, h3):first-child {
    margin-block-start: 0;
}

.wjp-candidate-management-grid > form.wjp-ds-form > label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.wjp-candidate-management-grid > form.wjp-ds-form > label ~ label,
.wjp-candidate-management-grid > form.wjp-ds-form > :is(button, .button, input[type="submit"], p.description) {
    margin-block-start: 10px;
}

.wjp-candidate-management-grid > form.wjp-ds-form > :is(button, .button, input[type="submit"]) {
    align-self: flex-start;
}

/*
 * Where a company admin has the Add stage row, a recruiter has the sentence
 * saying who adds stages - under the same dashed rule, in the muted text the
 * dashboard uses for guidance.
 */
.wpjobportal-recruit-pipeline .wjp-pipeline-toolbar .wjp-stage-create-note {
    margin: 0;
    padding-block-start: var(--wpjp-ds-space-4);
    color: var(--wpjp-ds-color-text-muted, #575757);
    border-block-start: 1px dashed var(--wpjp-border-color, #e9ecef);
}

/*
 * --- The application detail as a workspace ---
 *
 * A header saying where the candidate stands and who carries them; a menu of
 * the recruiting sections with their counts; the chosen section beside it.
 * The template marks the chosen one with data-ws-current and these rules show
 * only that one, so the page is the same with or without script.
 */
.wpjobportal-recruit-workspace.has-ws-nav {
    --wjp-ws-radius: 12px;
    --wjp-ws-border: var(--wpjp-border-color, #e9ecef);
    --wjp-ws-surface: var(--wpjp-card-background, #fff);
    --wjp-ws-canvas: var(--wpjp-background-color, #f6f6f6);
    --wjp-ws-primary: var(--wpjp-primary-color, #3baeda);
    --wjp-ws-ink: var(--wpjp-secondary-color, #333333);
    --wjp-ws-text: var(--wpjp-body-font-color, #575757);
}

/* The header: the role and stage on one line, the facts under them. */
.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-header {
    padding: 20px 24px;
    background: var(--wjp-ws-surface);
    border: 1px solid var(--wjp-ws-border);
    border-radius: var(--wjp-ws-radius);
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-role {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-kicker {
    color: var(--wjp-ws-text);
    font-size: 14px;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-job {
    color: var(--wjp-ws-ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-stage-box {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* The stage in its own colour, as the pipeline board shows it. */
.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-stage {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: var(--wjp-ws-ink);
    background: color-mix(in srgb, var(--wjp-stage-color, #64748b) 12%, var(--wjp-ws-surface));
    border: 1px solid color-mix(in srgb, var(--wjp-stage-color, #64748b) 35%, var(--wjp-ws-surface));
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-stage-dot {
    display: inline-block;
    inline-size: 10px;
    block-size: 10px;
    background: var(--wjp-stage-color, #64748b);
    border-radius: 50%;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-move {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-move select {
    inline-size: auto;
    min-inline-size: 12rem;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 16px 24px;
    margin: 20px 0 0;
    padding: 20px 0 0;
    border-block-start: 1px solid var(--wjp-ws-border);
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-facts > div {
    min-inline-size: 0;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-facts dt {
    margin: 0 0 4px;
    color: var(--wjp-ws-text);
    font-size: 13px;
    font-weight: 400;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-facts dd {
    margin: 0;
    color: var(--wjp-ws-ink);
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* The menu beside the section. */
.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    margin-block-start: 24px;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-nav {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--wjp-ws-surface);
    border: 1px solid var(--wjp-ws-border);
    border-radius: var(--wjp-ws-radius);
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--wjp-ws-text);
    border-radius: 8px;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.3;
    box-shadow: none;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-nav-link .fa {
    flex: none;
    inline-size: 18px;
    text-align: center;
    color: var(--wjp-ws-text);
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-nav-link:hover,
.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-nav-link:focus-visible {
    color: var(--wjp-ws-ink);
    background: var(--wjp-ws-canvas);
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-nav-link:focus-visible {
    outline: 2px solid var(--wjp-ws-primary);
    outline-offset: 1px;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-nav-link.is-active {
    color: var(--wjp-ws-primary);
    background: color-mix(in srgb, var(--wjp-ws-primary) 10%, var(--wjp-ws-surface));
    font-weight: 600;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-nav-link.is-active .fa {
    color: var(--wjp-ws-primary);
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-nav-label {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-nav-count {
    flex: none;
    min-inline-size: 26px;
    padding: 2px 8px;
    color: var(--wjp-ws-ink);
    background: var(--wjp-ws-canvas);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-nav-count.is-zero {
    color: var(--wjp-ws-text);
    font-weight: 400;
    opacity: 0.7;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-nav-link.is-active .wjp-ws-nav-count {
    color: #fff;
    background: var(--wjp-ws-primary);
    opacity: 1;
}

/* One section at a time, the one the template or the menu chose. */
.wpjobportal-recruit-workspace.has-ws-nav .wjp-workspace-grid {
    display: block;
}

.has-ws-nav[data-ws-current="candidate"] [data-wpjp-workspace-panel]:not([data-wpjp-workspace-panel="candidate"]),
.has-ws-nav[data-ws-current="notes"] [data-wpjp-workspace-panel]:not([data-wpjp-workspace-panel="notes"]),
.has-ws-nav[data-ws-current="messages"] [data-wpjp-workspace-panel]:not([data-wpjp-workspace-panel="messages"]),
.has-ws-nav[data-ws-current="tasks"] [data-wpjp-workspace-panel]:not([data-wpjp-workspace-panel="tasks"]),
.has-ws-nav[data-ws-current="requests"] [data-wpjp-workspace-panel]:not([data-wpjp-workspace-panel="requests"]),
.has-ws-nav[data-ws-current="interviews"] [data-wpjp-workspace-panel]:not([data-wpjp-workspace-panel="interviews"]),
.has-ws-nav[data-ws-current="scorecards"] [data-wpjp-workspace-panel]:not([data-wpjp-workspace-panel="scorecards"]),
.has-ws-nav[data-ws-current="offers"] [data-wpjp-workspace-panel]:not([data-wpjp-workspace-panel="offers"]),
.has-ws-nav[data-ws-current="activity"] [data-wpjp-workspace-panel]:not([data-wpjp-workspace-panel="activity"]) {
    display: none;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-workspace-section {
    margin: 0;
    padding: 24px;
    background: var(--wjp-ws-surface);
    border: 1px solid var(--wjp-ws-border);
    border-radius: var(--wjp-ws-radius);
    box-shadow: none;
}

/* A section's heading, with its "new" button beside it. */
.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 16px;
    padding-block-end: 16px;
    border-block-end: 1px solid var(--wjp-ws-border);
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-section-head > h2 {
    margin: 0;
    padding: 0;
    border: 0;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-composer-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-block-size: 44px;
    padding: 0 18px;
    color: var(--wjp-ws-primary);
    background: var(--wjp-ws-surface);
    border: 1px solid var(--wjp-ws-primary);
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-composer-toggle.is-primary:not(.is-open) {
    color: #fff;
    background: var(--wjp-ws-primary);
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-composer-toggle.is-primary:not(.is-open)::before {
    content: "+";
    font-size: 20px;
    line-height: 1;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-composer-toggle.is-danger {
    color: var(--wpjp-ds-color-danger, #c0392b);
    border-color: currentColor;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-composer-toggle:focus-visible {
    outline: 2px solid var(--wjp-ws-primary);
    outline-offset: 2px;
}

/* An open form stands apart from the records under it. */
.wpjobportal-recruit-workspace.has-ws-nav .wjp-workspace-section > form.wjp-ws-composer {
    margin: 0 0 20px;
    padding: 20px;
    background: var(--wjp-ws-canvas);
    border: 1px solid var(--wjp-ws-border);
    border-radius: var(--wjp-ws-radius);
}

.wpjobportal-recruit-workspace.has-ws-nav form.wjp-ws-composer[hidden] {
    display: none;
}

/* A phone: the menu becomes a row of chips above the section. */
@media (max-width: 782px) {
    .wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-header {
        padding: 16px;
    }

    .wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-stage-box,
    .wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-move {
        inline-size: 100%;
    }

    .wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-move select {
        flex: 1 1 auto;
        min-inline-size: 0;
    }

    .wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding: 6px;
        scrollbar-width: thin;
    }

    .wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-nav-link {
        flex: none;
        white-space: nowrap;
    }

    .wpjobportal-recruit-workspace.has-ws-nav .wjp-workspace-section {
        padding: 16px;
    }
}

/* The stage and the move control stay on one line beside the role. */
@media (min-width: 783px) {
    .wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-stage-box {
        flex-wrap: nowrap;
    }
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-stage-box > .wjp-ws-move {
    flex: none;
    inline-size: auto;
}

/*
 * A record's actions: one row under it, compact, the main one filled, the
 * rest outlined, and removing it set apart at the far end in the danger
 * colour. They were full-size form buttons of three kinds, and on an
 * interview "Add to calendar (.ics)" folded onto three lines.
 */
.wpjobportal-recruit-workspace.has-ws-nav :is(.wjp-task-actions, .wjp-interview-actions, .wjp-offer-actions, .wjp-approval-actions) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-block-start: 12px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--wjp-ws-border);
}

.wpjobportal-recruit-workspace.has-ws-nav :is(.wjp-task-actions, .wjp-interview-actions, .wjp-offer-actions, .wjp-approval-actions) > form {
    display: inline-flex;
    inline-size: auto;
    max-inline-size: none;
    margin: 0;
}

.wpjobportal-recruit-workspace.has-ws-nav :is(.wjp-task-actions, .wjp-interview-actions, .wjp-offer-actions, .wjp-approval-actions) :is(button, a, input[type="submit"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: auto;
    min-block-size: 40px;
    margin: 0;
    padding: 0 14px;
    color: var(--wjp-ws-primary);
    background: var(--wjp-ws-surface);
    border: 1px solid var(--wjp-ws-primary);
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: none;
}

/* The step that moves the record on. */
.wpjobportal-recruit-workspace.has-ws-nav :is(.wjp-task-actions, .wjp-interview-actions) > form:has(input[name="status"][value="completed"]) :is(button, input[type="submit"]) {
    color: #fff;
    background: var(--wjp-ws-primary);
}

/* Removing it, last and apart. */
.wpjobportal-recruit-workspace.has-ws-nav :is(.wjp-task-actions, .wjp-interview-actions, .wjp-offer-actions) > form:has(input[name="action"][value*="delete"]) {
    margin-inline-start: auto;
}

.wpjobportal-recruit-workspace.has-ws-nav :is(.wjp-task-actions, .wjp-interview-actions, .wjp-offer-actions) > form:has(input[name="action"][value*="delete"]) :is(button, input[type="submit"]) {
    color: var(--wpjp-ds-color-danger, #c0392b);
    background: transparent;
    border-color: transparent;
}

.wpjobportal-recruit-workspace.has-ws-nav :is(.wjp-task-actions, .wjp-interview-actions, .wjp-offer-actions, .wjp-approval-actions) :is(button, a, input[type="submit"]):focus-visible {
    outline: 2px solid var(--wjp-ws-primary);
    outline-offset: 2px;
}

/*
 * Rejecting: a card of its own on the overview, saying what it does, with
 * the form opening inside it. recruitsuite.js builds the card around the
 * existing form and moves the form's heading into it.
 */
.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-reject > h3 {
    margin: 0 0 6px;
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-reject > p {
    margin: 0 0 14px;
    color: var(--wjp-ws-text);
}

.wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-reject > form {
    margin: 16px 0 0;
    padding: 16px 0 0;
    background: none;
    border: 0;
    border-block-start: 1px solid var(--wjp-ws-border);
    border-radius: 0;
    box-shadow: none;
}

/*
 * Switching sections moves focus to the new section's heading, so a keyboard
 * or screen-reader user lands where the content changed. That is not a
 * control, so it takes no focus ring.
 */
.wpjobportal-recruit-workspace.has-ws-nav [data-wpjp-workspace-panel] h2[tabindex="-1"]:focus {
    outline: none;
}

@media (max-width: 782px) {
    /* On a phone the move control takes the row under the stage. */
    .wpjobportal-recruit-workspace.has-ws-nav .wjp-ws-stage-box > .wjp-ws-move {
        flex: 1 1 auto;
        inline-size: 100%;
    }
}

/* Core's form title is right-aligned for its two-column forms; these are one column. */
.wjp-candidate-management-grid > form.wjp-ds-form > label {
    text-align: start;
}

/* One label style in both overview forms: Core's form title in one, a plain label in the other. */
.wjp-candidate-management-grid > form.wjp-ds-form > label,
.wjp-candidate-management-grid > form.wjp-ds-form > label > strong {
    color: var(--wpjp-secondary-color, #333333);
    font-size: 15px;
    font-weight: 600;
}

/*
 * In the recruiter's header, the counts sit under the profile the way the
 * employer's do: 30px down to the dotted rule, and nothing extra below. The
 * recruiting overview's own spacing (a bottom margin, no top) had put the
 * rule against the photo and left the band 20px taller at the foot.
 */
.wjportal-cp-top .wjportal-cp-boxes.wpjp-native-recruit-metrics {
    margin: 30px 0 0;
}

/*
 * Talent pool list: a long description made its row thousands of pixels tall
 * in a one-third column. The pool gets the wide column and its description
 * three lines; the whole text stays in the title tooltip.
 */
.wpjobportal-recruit-candidates .wjp-workload-table table:has(td > strong + small) :is(th, td):nth-child(1) {
    inline-size: 28%;
}

.wpjobportal-recruit-candidates .wjp-workload-table table:has(td > strong + small) :is(th, td):nth-child(2) {
    inline-size: 52%;
}

.wpjobportal-recruit-candidates .wjp-workload-table table:has(td > strong + small) :is(th, td):nth-child(3) {
    inline-size: 20%;
}

.wpjobportal-recruit-candidates .wjp-workload-table td > strong + small {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin-block-start: 4px;
    color: var(--wpjp-ds-color-text-muted);
    overflow-wrap: anywhere;
}

/*
 * Notification Center (employer dashboard).
 * The panel has no padding of its own - the title and the filter pad
 * themselves - so the Mark all read / Clear read buttons and the list sat
 * on the card's edge, and every notification was a resume card with its
 * buttons in a second full-width row. Inset the bulk buttons and the list,
 * one row per notification with the buttons beside the text, a tint for
 * unread, and Dismiss as an outline button so it does not look like the
 * main action.
 */
/* The filter is part of the panel, not a second boxed card glued inside it. */
.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-panel > .wpjp-native-candidate-filter {
    margin: 0;
    padding: 16px 20px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-panel > .wjp-auto-clear {
    display: inline-flex;
    margin: 0 8px 16px 0;
    vertical-align: top;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-panel > .wpjp-native-candidate-filter + .wjp-auto-clear {
    margin-inline-start: 20px;
}

/* !important: the compatibility rules paint every button in these views solid primary with !important. */
.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-panel > .wjp-auto-clear .wjportal-form-btn {
    min-block-size: 40px;
    padding: 8px 16px;
    color: var(--wpjp-primary-color, #3baeda) !important;
    background: transparent !important;
    border: 1px solid var(--wpjp-primary-color, #3baeda) !important;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-panel > .wjp-auto-clear .wjportal-form-btn:hover {
    color: #fff !important;
    background: var(--wpjp-primary-color, #3baeda) !important;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-panel > .wjp-auto-list {
    display: grid;
    gap: 12px;
    padding: 0 20px 20px;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-panel > :is(.wjp-auto-empty, .wpjp-native-pagination) {
    margin: 0 20px 20px;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-list > article.wjportal-resume-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin: 0;
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-list > article.wjportal-resume-list.is-unread {
    border-inline-start: 4px solid var(--wpjp-primary-color, #3baeda);
    background: color-mix(in srgb, var(--wpjp-primary-color, #3baeda) 5%, var(--wpjp-card-background, #fff));
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-list > article.is-unread .wjp-auto-copy h3 {
    font-weight: 700;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-list > article > .wjportal-resume-list-top-wrp {
    padding: 16px 20px;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-list > article > .wjp-auto-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px 16px 0;
    border: 0;
    background: transparent;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-actions :is(.wjportal-form-btn, a) {
    min-block-size: 40px;
    padding: 8px 14px;
    white-space: nowrap;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-actions .wjp-auto-dismiss {
    color: var(--wpjp-body-font-color, #575757) !important;
    background: var(--wpjp-card-background, #fff) !important;
    border: 1px solid var(--wpjp-border-color, #e9ecef) !important;
}

.wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-actions .wjp-auto-dismiss:hover {
    color: #b42318 !important;
    border-color: currentColor !important;
}

@media (max-width: 782px) {
    .wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-list > article.wjportal-resume-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .wpjp-native-recruit-view[data-recruit-view="notifications"] .wjp-auto-list > article > .wjp-auto-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 0 20px 16px;
    }
}