/******************************************/
/** STAFF PORTAL (/staff/…) **/

.staff-main {
    background: var(--neutral-100);
    min-height: 70vh;
}

/* "main > .staff-wrap" beats the theme's "main > :not(.block)" gutter rule */
main.staff-main > .staff-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--step-10) var(--gutter) var(--space-md);
}

.staff-main .preheading {
    margin-bottom: var(--step-2);
}

.staff-title {
    margin: 0 0 var(--step-6);
    font-size: 40px;
    line-height: 1.15;
}

.staff-card {
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: 10px;
    padding: var(--step-7);
    margin-bottom: var(--step-6);
}

.staff-card-narrow {
    max-width: 460px;
    margin: var(--step-6) auto;
}

.staff-section-title {
    margin: 0 0 var(--step-5);
    font-family: var(--font-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--black);
}

.staff-small {
    margin-top: var(--step-5);
    font-size: 14px;
    color: var(--neutral-700);
}

.staff-main a:not(.btn) {
    color: var(--sp-accent, var(--color-action));
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Forms */
.staff-form {
    display: flex;
    flex-direction: column;
    gap: var(--step-5);
}

.staff-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--neutral-800);
}

.staff-field small {
    font-weight: 400;
    font-size: 13px;
    color: var(--neutral-700);
}

.staff-main :is(input[type="text"], input[type="email"], input[type="password"]),
.staff-acf-form :is(input[type="text"], input[type="email"], input[type="number"], select, textarea) {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--neutral-300);
    border-radius: 8px;
    background: var(--white);
    color: var(--black);
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    caret-color: auto;
    -webkit-text-fill-color: currentColor;
    box-shadow: none;
}

.staff-main :is(input, button, select, textarea):focus-visible {
    outline: 2px solid var(--sp-accent, var(--color-action));
    outline-offset: 2px;
}

.staff-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.staff-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--sp-accent, var(--color-action));
}

.staff-form .btn,
.staff-card-narrow .btn,
.staff-card-narrow .btn {
    align-self: flex-start;
}

.staff-inline-form {
    display: flex;
    gap: var(--step-4);
    align-items: flex-end;
}

.staff-inline-form .staff-field {
    flex: 1;
}

.staff-link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--error);
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* Notices */
.staff-notice {
    margin-bottom: var(--step-6);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 15px;
}

.staff-notice-success {
    background: var(--success-bg);
    color: #01644A;
}

.staff-notice-error {
    background: var(--error-bg);
    color: #B42318;
}

/* Header + tabs */
.staff-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--step-6);
    flex-wrap: wrap;
}

.staff-user {
    margin-bottom: var(--step-6);
    font-size: 14px;
}

.staff-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--step-7);
    border-bottom: 1px solid var(--neutral-200);
    overflow-x: auto;
    scrollbar-width: none;
}

.staff-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--neutral-700);
    font-size: 15px;
    text-decoration: none !important;
    white-space: nowrap;
}

.staff-tabs a:hover {
    color: var(--black);
}

.staff-tabs a.is-active {
    color: var(--black);
    border-bottom-color: var(--sp-accent, var(--color-action));
    font-weight: 500;
}

.staff-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--sp-fill, var(--primary-700));
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* Tables */
.staff-table-wrap {
    overflow-x: auto;
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: 10px;
}

.staff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.staff-table :is(th, td) {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--neutral-200);
}

.staff-table th {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-700);
    background: var(--neutral-50);
}

.staff-table tr:last-child td {
    border-bottom: 0;
}

.staff-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
}

.staff-badge-awaiting { background: #FFF4D6; color: #7A5300; }
.staff-badge-attention { background: #E6F0FF; color: #1D4ED8; }
.staff-badge-queued { background: var(--neutral-200); color: var(--neutral-800); }
.staff-badge-deleted { background: #F3E1E1; color: #8A2C2C; }

.staff-dates summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--sp-accent, var(--color-action));
}

.staff-dates ul {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 13px;
}

/* Approved clinics list */
.staff-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: 10px;
}

.staff-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--step-5);
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-200);
}

.staff-list li:last-child {
    border-bottom: 0;
}

/* Referral detail */
.staff-back {
    margin-bottom: var(--step-5);
}

.staff-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--step-6);
    align-items: start;
}

.staff-detail-side {
    position: sticky;
    top: calc(var(--header-height) + 16px);
}

.staff-detail-side form + form {
    margin-top: var(--step-4);
}

.staff-dl {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 10px var(--step-5);
    margin: 0;
    font-size: 15px;
}

.staff-dl dt {
    color: var(--neutral-700);
}

.staff-dl dd {
    margin: 0;
    color: var(--black);
    overflow-wrap: anywhere;
}

.staff-files {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.staff-files li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--neutral-200);
}

.staff-files li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.staff-file-name {
    min-width: 0;
    color: var(--sp-text);
    overflow-wrap: anywhere;
}

.staff-file-name span,
.staff-file-note {
    color: var(--sp-muted);
    font-size: 13px;
}

.staff-file-actions {
    display: flex;
    gap: 16px;
    font-size: 14px;
    font-weight: 500;
}

.staff-file-note {
    flex-basis: 100%;
}

/* A photo attachment's pop-up */
.sp-image-viewer {
    width: min(1100px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #1E1F20;
    color: #FFFFFF;
    overflow: hidden;
}

.sp-image-viewer::backdrop {
    background: rgba(0, 0, 0, .75);
}

.sp-image-viewer-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 12px 10px 20px;
}

.sp-image-viewer-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-app .sp-image-viewer-download {
    color: #FFFFFF !important;
    font-size: 14px;
}

.sp-image-viewer img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 100px);
    margin: 0 auto;
    object-fit: contain;
}

.staff-intro,
.staff-preview {
    font-size: 15px;
}

/* ACF front-end form (hours) */
.staff-acf-form .acf-fields > .acf-field {
    padding: 0;
    border: 0;
}

.staff-acf-form .acf-field .acf-label label {
    font-weight: 600;
}

.staff-acf-form .acf-form-submit {
    margin-top: var(--step-6);
}

@media (max-width: 860px) {
    .staff-detail {
        grid-template-columns: 1fr;
    }

    .staff-detail-side {
        position: static;
        order: -1;
    }
}

@media (max-width: 600px) {
    .staff-title {
        font-size: 30px;
    }

    .staff-card {
        padding: var(--step-6) var(--step-5);
    }

    .staff-inline-form {
        flex-direction: column;
        align-items: stretch;
    }

    .staff-dl {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .staff-dl dd {
        margin-bottom: 10px;
    }

    /* Tables become stacked cards */
    .staff-table thead {
        display: none;
    }

    .staff-table tr {
        display: block;
        padding: 12px 16px;
        border-bottom: 1px solid var(--neutral-200);
    }

    .staff-table td {
        display: flex;
        gap: 12px;
        padding: 4px 0;
        border: 0;
    }

    .staff-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 110px;
        color: var(--neutral-700);
        font-size: 13px;
    }
}

/* Site settings: inner tabs */
.staff-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: calc(var(--step-4) * -1) 0 var(--step-6);
}

.staff-subtabs a {
    padding: 8px 14px;
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    color: var(--neutral-700);
    font-size: 14px;
    text-decoration: none !important;
    white-space: nowrap;
}

.staff-subtabs a:hover {
    border-color: var(--neutral-400);
    color: var(--black);
}

.staff-subtabs a.is-active {
    border-color: var(--sp-fill, var(--primary-700));
    background: var(--sp-fill, var(--primary-700));
    color: var(--white);
}

/* Site settings forms: clearer spacing, labels and help text */
.staff-acf-form .acf-fields > .acf-field {
    padding: 0;
    margin: 0 0 var(--step-7);
    border: 0;
}

.staff-acf-form .acf-field .acf-label {
    margin-bottom: 8px;
}

.staff-acf-form .acf-field .acf-label label {
    display: block;
    margin: 0;
    color: var(--black);
    font-size: 15px;
    font-weight: 600;
}

.staff-acf-form .acf-field .acf-label p.description {
    margin: 4px 0 0;
    color: var(--neutral-700);
    font-size: 13px;
    line-height: 1.5;
}

.staff-acf-form .acf-field-message .acf-input {
    color: var(--neutral-700);
    font-size: 14px;
}

/* Fields side by side in wp-admin (e.g. the social links) stay side by side, with a gap */
.staff-acf-form .acf-fields > .acf-field[data-width] {
    display: inline-block;
    vertical-align: top;
    padding-right: 16px;
}

/* Repeater rows: inner fields spaced like the rest */
.staff-acf-form .acf-repeater .acf-row .acf-fields > .acf-field {
    margin-bottom: var(--step-5);
    padding: 12px;
}

.staff-acf-form .acf-repeater .acf-row-handle.order {
    cursor: grab;
}

/* Team / FAQs / Jobs: the intro above the form already explains the list, so hide the list's own label */
.staff-acf-form:is(.staff-acf-form-team, .staff-acf-form-faqs, .staff-acf-form-jobs, .staff-acf-form-announcements) > .acf-fields > .acf-field-repeater > .acf-label {
    display: none;
}

/* Tabs inside a form (Announcements: bar / referral message) */
.staff-acf-form .acf-tab-wrap {
    margin-bottom: var(--step-6);
}

.staff-acf-form .acf-tab-group {
    padding: 0;
    border-bottom: 1px solid var(--neutral-200);
}

.staff-acf-form .acf-tab-group li a {
    padding: 10px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--neutral-700);
    font-size: 15px;
}

.staff-acf-form .acf-tab-group li.active a {
    border-bottom-color: var(--sp-accent, var(--color-action));
    background: none;
    color: var(--black);
}

/* Side-by-side fields (e.g. phone and fax) go full width on phones */
@media (max-width: 600px) {
    .staff-acf-form .acf-fields > .acf-field[data-width] {
        display: block;
        width: 100% !important;
        padding-right: 0;
    }
}

/* Resources tab */
.staff-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 20px;
}

.staff-card-head p {
    margin: 6px 0 0;
}

.staff-empty {
    margin: 0;
    color: var(--neutral-700);
}

.staff-resource-title {
    font-weight: 600;
    color: var(--black);
}

.staff-resources small {
    color: var(--neutral-700);
}

.staff-resource-actions {
    white-space: nowrap;
    text-align: right;
}

.staff-resource-actions form {
    display: inline;
    margin-left: 14px;
}

.staff-link-danger {
    color: #8A2C2C;
}

.staff-badge-res-live { background: #E3F4EC; color: #0B6B47; }
.staff-badge-res-scheduled { background: #E6F0FF; color: #1D4ED8; }
.staff-badge-res-ended,
.staff-badge-res-hidden { background: var(--neutral-200); color: var(--neutral-800); }

/* ACF buttons in staff forms (e.g. "Add Image"): readable on the brand fill */
.staff-acf-form .acf-button.button,
.staff-acf-form .resource-add-tag {
    color: var(--white);
}

.staff-acf-form .resource-add-tag {
    margin-top: 10px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--sp-fill);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

/* Blog tab */
.staff-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 16px;
    font-size: 14px;
}

.staff-filter a {
    color: var(--neutral-700);
    text-decoration: none;
}

.staff-filter a span {
    color: var(--neutral-700);
}

.staff-filter a.is-active {
    color: var(--black);
    font-weight: 600;
}

.staff-articles .staff-resource-actions a + a,
.staff-articles .staff-resource-actions a + form {
    margin-left: 14px;
}

.staff-link-button.staff-link-go {
    color: #0B6B47;
}

.staff-link-button.staff-star {
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
    color: var(--neutral-500);
}

.staff-link-button.staff-star.is-on {
    color: #C08A1E;
}

.staff-categories .staff-resource-actions form,
.staff-articles .staff-resource-actions form {
    display: inline;
}

.staff-card .staff-inline-form {
    margin-bottom: 20px;
}

/* Article content editor: room to write (at least 560px; it grows with the article,
   assets/js/acf-editor-size.js) */
.staff-acf-form-article [data-key="_post_content"] iframe,
.staff-acf-form-article [data-key="_post_content"] .wp-editor-area {
    min-height: 560px !important;
}

.staff-blog-state {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--neutral-100); /* light enough for the brand link colour to keep 4.5:1 contrast */
    border: 1px solid var(--neutral-200);
    font-size: 15px;
    color: var(--neutral-800);
}

.staff-blog-state.is-on {
    background: var(--tertiary-50);
    color: #0B6B47;
}

/* Article editor layout: title and summary on the left, the featured image on the
   right, then the content; categories / Featured and publishing below in pairs.
   Phones: one column: title, summary, image, content, then the rest. */
.staff-acf-form-article > .acf-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
}

.staff-acf-form-article > .acf-fields > .acf-field {
    grid-column: 1 / -1;
    width: auto !important;
    float: none !important;
    clear: none !important;
    min-height: 0 !important;
    border-left: 0 !important;
}

.staff-acf-form-article > .acf-fields > [data-key="_post_title"] { grid-column: 1; grid-row: 1; }
.staff-acf-form-article > .acf-fields > [data-key="field_ba_summary"] { grid-column: 1; grid-row: 2; }
.staff-acf-form-article > .acf-fields > [data-key="field_ba_image"] { grid-column: 2; grid-row: 1 / span 2; }
.staff-acf-form-article > .acf-fields > [data-key="_post_content"] { grid-row: 3; }
.staff-acf-form-article > .acf-fields > [data-key="field_ba_categories"],
.staff-acf-form-article > .acf-fields > [data-key="field_ba_status"] { grid-column: 1; }
.staff-acf-form-article > .acf-fields > [data-key="field_ba_featured"],
.staff-acf-form-article > .acf-fields > [data-key="field_ba_date"] { grid-column: 2; }
.staff-acf-form-article > .acf-fields > [data-key="field_ba_author"] { grid-column: 1; }
.staff-acf-form-article > .acf-fields > [data-key="field_ba_related"] { grid-column: 1 / -1; }
.staff-acf-form-article > .acf-fields > [data-key="field_ba_reviewed"] { grid-column: 1; }
.staff-acf-form-article > .acf-fields > [data-key="field_ba_reviewer"] { grid-column: 2; }
.staff-acf-form-article > .acf-fields > [data-key="field_ba_reviewed_on"] { grid-column: 2; }
.staff-acf-form-article > .acf-fields > [data-key="field_ba_guest"] { grid-column: 2; }

.staff-acf-form-article [data-key="field_ba_image"] .image-wrap img {
    width: 100%;
    max-height: none;
    border-radius: 8px;
}

@media (max-width: 700px) {
    .staff-acf-form-article > .acf-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-acf-form-article > .acf-fields > .acf-field,
    .staff-acf-form-article > .acf-fields > [data-key] {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    /* The form's own order puts the content right after the title: put it after the image */
    .staff-acf-form-article > .acf-fields > .acf-field { order: 5; }
    .staff-acf-form-article > .acf-fields > [data-key="_post_title"] { order: 1; }
    .staff-acf-form-article > .acf-fields > [data-key="field_ba_summary"] { order: 2; }
    .staff-acf-form-article > .acf-fields > [data-key="field_ba_image"] { order: 3; }
    .staff-acf-form-article > .acf-fields > [data-key="_post_content"] { order: 4; }
}

/* Summary: tall enough to sit beside the image */
.staff-acf-form-article [data-key="field_ba_summary"] textarea {
    min-height: 132px;
}

/* Button choices (e.g. Draft / Published / Scheduled) wrap on narrow screens */
@media (max-width: 600px) {
    .staff-acf-form .acf-button-group {
        flex-wrap: wrap;
    }

    .staff-acf-form .acf-button-group label {
        flex: 1 1 auto;
    }
}

/* Image previews fill their column (ACF caps them with an inline max-width) */
.staff-acf-form :is([data-key="field_ba_image"], [data-key="field_res_thumbnail"]) .image-wrap {
    display: block;
    width: 100%;
    max-width: none !important;
}

.staff-acf-form :is([data-key="field_ba_image"], [data-key="field_res_thumbnail"]) .image-wrap img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    border-radius: 8px;
}

.staff-rename {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
}

.staff-rename .staff-field {
    flex: 1 1 220px;
}

/* "Social media" heading, like a section title */
.staff-acf-form [data-key="field_social_message"] .acf-label label {
    font-size: 20px;
    font-weight: 500;
    color: var(--black);
}

.staff-acf-form [data-key="field_social_message"] {
    margin-top: 16px;
}


.staff-card-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

/* Resource form: title and description on the left, the thumbnail on the right;
   then "Show on site" with its dates; type and how it's added; the file or link;
   tags. Phones: one column in that order. */
.staff-acf-form-resource > .acf-fields {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
}

.staff-acf-form-resource > .acf-fields > .acf-field {
    grid-column: 1 / -1;
    width: auto !important;
    float: none !important;
    clear: none !important;
    min-height: 0 !important;
    border-left: 0 !important;
}

.staff-acf-form-resource > .acf-fields > [data-key="_post_title"]           { grid-column: 1 / 4; grid-row: 1; }
.staff-acf-form-resource > .acf-fields > [data-key="field_res_description"] { grid-column: 1 / 4; grid-row: 2; }
.staff-acf-form-resource > .acf-fields > [data-key="field_res_thumbnail"]   { grid-column: 4 / 7; grid-row: 1 / span 2; }
.staff-acf-form-resource > .acf-fields > [data-key="field_res_visible"]     { grid-column: 1 / 3; grid-row: 3; }
.staff-acf-form-resource > .acf-fields > [data-key="field_res_show_from"]   { grid-column: 3 / 5; grid-row: 3; }
.staff-acf-form-resource > .acf-fields > [data-key="field_res_show_until"]  { grid-column: 5 / 7; grid-row: 3; }
.staff-acf-form-resource > .acf-fields > [data-key="field_res_type"]        { grid-column: 1 / 4; grid-row: 4; }
.staff-acf-form-resource > .acf-fields > [data-key="field_res_source"]      { grid-column: 4 / 7; grid-row: 4; }
.staff-acf-form-resource > .acf-fields > :is([data-key="field_res_file"], [data-key="field_res_video"], [data-key="field_res_url_file"], [data-key="field_res_url_video"]) { grid-row: 5; }
.staff-acf-form-resource > .acf-fields > [data-key="field_res_tags"]        { grid-row: 6; }

.staff-acf-form-resource [data-key="field_res_description"] textarea {
    min-height: 132px;
}

/* Beside the thumbnail, the description box fills the height down to the thumbnail's end */
@media (min-width: 701px) {
    .staff-acf-form-resource > .acf-fields {
        grid-template-rows: auto 1fr; /* the extra height goes to the description's row */
    }

    .staff-acf-form-resource > .acf-fields > [data-key="field_res_description"] {
        align-self: stretch;
        display: flex;
        flex-direction: column;
    }

    .staff-acf-form-resource [data-key="field_res_description"] > .acf-input {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .staff-acf-form-resource [data-key="field_res_description"] textarea {
        flex: 1;
    }
}

@media (max-width: 700px) {
    .staff-acf-form-resource > .acf-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-acf-form-resource > .acf-fields > .acf-field {
        grid-column: 1 !important;
        grid-row: auto !important;
        order: 9;
    }

    .staff-acf-form-resource > .acf-fields > [data-key="_post_title"]           { order: 1; }
    .staff-acf-form-resource > .acf-fields > [data-key="field_res_description"] { order: 2; }
    .staff-acf-form-resource > .acf-fields > [data-key="field_res_thumbnail"]   { order: 3; }
    .staff-acf-form-resource > .acf-fields > [data-key="field_res_visible"]     { order: 4; }
    .staff-acf-form-resource > .acf-fields > [data-key="field_res_show_from"]   { order: 5; }
    .staff-acf-form-resource > .acf-fields > [data-key="field_res_show_until"]  { order: 6; }
    .staff-acf-form-resource > .acf-fields > [data-key="field_res_type"]        { order: 7; }
    .staff-acf-form-resource > .acf-fields > [data-key="field_res_source"]      { order: 8; }
}

/* Profile settings */
.staff-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
    margin-top: 20px;
}

.staff-profile-subtitle {
    margin: 36px 0 4px;
    padding-top: 28px;
    border-top: 1px solid var(--neutral-200);
    font-size: 18px;
    font-weight: 500;
    color: var(--black);
}

.staff-profile-hint {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-700);
}

.staff-profile-current {
    max-width: calc(50% - 16px);
    margin-top: 20px;
}

.staff-profile-user {
    margin: 28px 0 20px;
    font-size: 14px;
    color: var(--neutral-700);
}

@media (max-width: 700px) {
    .staff-profile-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-profile-current {
        max-width: none;
    }
}

/* Room around the intro, the "Top bar currently shows" line and the form */
.staff-card > .staff-section-title + p {
    margin-top: 8px;
}

.staff-card .staff-preview {
    margin: 20px 0 8px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--neutral-100);
    font-size: 15px;
}

.staff-card > .staff-acf-form {
    margin-top: 24px;
}

/* Business details: an explicit layout. Name and email; the two logos; phone and fax;
   the address lines stacked on the left with the formatted address beside them;
   opening hours; Social media, with its links two per row. Phones: one column. */
.staff-acf-form-business > .acf-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "name email"
        "logo1 logo2"
        "phone fax"
        "street address"
        "city address"
        "hours hours"
        "social social";
    column-gap: 32px;
    align-items: start;
}

.staff-acf-form-business > .acf-fields > .acf-field {
    width: auto !important;
    float: none !important;
    clear: none !important;
    min-height: 0 !important;
    border-left: 0 !important;
}

.staff-acf-form-business [data-key="field_business_name"]        { grid-area: name; }
.staff-acf-form-business [data-key="field_67ae4a7215024"]        { grid-area: email; }
.staff-acf-form-business [data-key="field_business_logo_light"]  { grid-area: logo1; }
.staff-acf-form-business [data-key="field_business_logo_dark"]   { grid-area: logo2; }
.staff-acf-form-business [data-key="field_67ae4a7f15025"]        { grid-area: phone; }
.staff-acf-form-business [data-key="field_footer_fax_number"]    { grid-area: fax; }
.staff-acf-form-business [data-key="field_address_street"]       { grid-area: street; }
.staff-acf-form-business [data-key="field_address_city"]         { grid-area: city; }
.staff-acf-form-business [data-key="field_address_preview"]      { grid-area: address; }
.staff-acf-form-business [data-key="field_footer_opening_hours"] { grid-area: hours; }
.staff-acf-form-business [data-key="field_social_message"]       { grid-area: social; }
/* (the social links fill the rows after these, two per row) */

@media (max-width: 700px) {
    .staff-acf-form-business > .acf-fields {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "name" "email" "logo1" "logo2" "phone" "fax"
            "street" "city" "address" "hours" "social";
    }
}

/* Announcement / referral message rows: the status chip beside the label, even when collapsed */
.staff-acf-form :is([data-key="field_ann_name"], [data-key="field_refm_name"]) > .acf-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.staff-acf-form :is([data-key="field_ann_name"], [data-key="field_refm_name"]) > .acf-input > .acf-input-wrap {
    flex: 1 1 220px;
}

.staff-acf-form .helios-row-status {
    margin-top: 0 !important;
}

/* ACF's on/off switches: the buttons' colour instead of ACF's light blue, which fails text contrast */
.staff-main .acf-switch.-on {
    background: var(--sp-fill, var(--primary-700));
    border-color: var(--primary-800);
}
.staff-main .acf-switch.-on .acf-switch-slider {
    border-color: var(--primary-800);
}

/* Repeater row numbers: ACF's light grey (#aaa, 2:1) darkened to readable */
.staff-app .acf-repeater :is(.acf-row-handle, .acf-row-handle.order) {
    color: var(--sp-muted);
}

/******************************************/
/** STAFF PORTAL 2.0: app layout (views/app.php) **/

body.staff-app {
    --sp-bg: var(--neutral-100);
    --sp-surface: #FFFFFF;
    --sp-border: var(--tertiary-100);
    --sp-text: var(--neutral-900);
    --sp-muted: var(--neutral-700);
    --sp-accent: var(--color-action); /* links and controls: the action colour, as buttons */
    --link: var(--sp-accent);
    --link-hover: var(--color-action-hover);
    --sp-accent-ink: var(--primary-700);
    --sp-accent-soft: var(--primary-100);
    --sp-fill: var(--primary-700);  /* filled chips, counts and selected options (white text), as the buttons */
    --sp-sidebar: 268px;
    --sp-topbar: 64px;
    --header-height: var(--sp-topbar); /* sticky offsets in the portal (e.g. the referral side panel) */
    padding-top: 0;
    background: var(--sp-bg);
    color: var(--sp-muted);
    font-size: 16px;
}

.sp-app {
    display: grid;
    grid-template-columns: var(--sp-sidebar) minmax(0, 1fr);
    min-height: 100vh;
}

/* Sidebar */
.sp-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    background: var(--sp-surface);
    border-right: 1px solid var(--sp-border);
    scrollbar-width: thin;
}

.sp-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--sp-topbar);
    padding: 14px 20px;
    border-bottom: 1px solid var(--sp-border);
}

.staff-app .sp-brand-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--sp-text) !important;
    text-decoration: none !important;
}

.sp-brand-link img {
    width: 104px;
    height: auto;
}

.sp-brand-label {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tertiary-600);
}

.sp-nav {
    flex: 1;
    padding: 12px 12px 20px;
}

.sp-nav-group + .sp-nav-group {
    margin-top: 18px;
}

.sp-nav-heading {
    margin: 0 0 6px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sp-muted);
}

.sp-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-nav li {
    margin: 0;
}

.staff-app .sp-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--neutral-800) !important;
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}

.sp-nav-link .sp-icon {
    flex: none;
    color: var(--neutral-600);
}

.staff-app .sp-nav-link:hover {
    background: var(--neutral-100);
    color: var(--sp-text) !important;
}

.staff-app .sp-nav-link.is-active {
    background: var(--sp-accent-soft);
    color: var(--sp-accent-ink) !important;
    font-weight: 600;
}

.sp-nav-link.is-active .sp-icon {
    color: var(--sp-accent);
}

.sp-nav-link.is-active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sp-accent);
}

.sp-count {
    margin-left: auto;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--sp-fill);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.sp-sidebar-foot {
    padding: 12px;
    border-top: 1px solid var(--sp-border);
}

/* Top bar */
.sp-body {
    min-width: 0;
}

.sp-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--sp-topbar);
    padding: 0 32px;
    background: color-mix(in srgb, var(--neutral-100) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sp-border);
}

.staff-app .sp-topbar-brand {
    display: none;
    color: var(--sp-text) !important;
    font-weight: 600;
    text-decoration: none !important;
}

.sp-topbar-user {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.staff-app :is(.sp-user, .sp-logout) {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--neutral-800) !important;
    font-size: 15px;
    text-decoration: none !important;
}

.staff-app :is(.sp-user, .sp-logout):hover {
    background: rgba(0, 0, 0, .05);
}

.sp-avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sp-fill);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

.sp-icon-button {
    display: none;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sp-text);
    cursor: pointer;
}

.sp-icon-button:hover {
    background: rgba(0, 0, 0, .05);
}

/* Page */
.sp-main.staff-main {
    min-height: 0;
    background: transparent;
}

main.sp-main > .sp-content {
    max-width: 1160px;
    margin: 0 auto;
    padding: 36px 40px 72px;
}

.sp-page-head {
    margin-bottom: 28px;
}

.sp-eyebrow {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tertiary-600);
}

.staff-app .sp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--sp-muted) !important;
    font-size: 15px;
    text-decoration: none !important;
}

.staff-app .sp-back:hover {
    color: var(--sp-text) !important;
}

.sp-page-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
}

.sp-page-head-text {
    flex: 1 1 420px;
    max-width: 760px;
}

.sp-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 36px;
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 1.12;
    color: var(--sp-text);
}

.sp-lede {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--sp-muted);
}

.sp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sp-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Cards and tables: softer and roomier */
.staff-app .staff-card {
    border-color: var(--sp-border);
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--primary-900) 4%, transparent);
}

.staff-app .staff-table-wrap {
    border-color: var(--sp-border);
    border-radius: 14px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--primary-900) 4%, transparent);
}

.staff-app .staff-card .staff-table-wrap {
    box-shadow: none;
    margin-bottom: 0;
}

.staff-app .staff-card-flush {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.staff-app .staff-table th {
    background: var(--neutral-50);
    color: var(--sp-muted);
    font-size: 13px;
    letter-spacing: .02em;
}

.staff-app .staff-table :is(th, td) {
    padding: 16px 18px;
    border-bottom-color: var(--primary-100);
    vertical-align: middle;
}

.staff-app .staff-table tbody tr:hover {
    background: var(--neutral-50);
}

/* Phones: the stacked rows keep slim cells (the padding above is for columns) */
@media (max-width: 600px) {
    .staff-app .staff-table tr {
        padding: 12px 14px;
    }

    .staff-app .staff-table :is(th, td) {
        padding: 6px 0;
    }
}

.staff-app .staff-section-title {
    font-size: 19px;
    font-weight: 600;
}

.staff-app .staff-notice {
    border-radius: 10px;
    font-size: 15px;
}

/* In-page tabs (Blog, Resources): a segmented control */
.staff-app .staff-subtabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 20px;
    padding: 4px;
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    background: var(--primary-100);
}

.staff-app .staff-subtabs a {
    padding: 8px 16px;
    border: 0;
    border-radius: 9px;
    color: var(--neutral-800) !important;
    font-size: 15px;
}

.staff-app .staff-subtabs a:hover {
    background: rgba(255, 255, 255, .6);
}

.staff-app .staff-subtabs a.is-active {
    background: #fff;
    color: var(--sp-text) !important;
    font-weight: 600;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--primary-900) 12%, transparent);
}

/* Empty states */
.sp-empty {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--sp-muted);
}

.sp-empty .sp-icon {
    flex: none;
    color: var(--sp-accent);
}

.sp-empty p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
}

.sp-empty strong {
    color: var(--sp-text);
}

/* Overview: stats */
.sp-stats {
    display: grid;
    /* Four cards: four in a row while each has about 200px, then two (never three). The
       column width flips from a quarter to a half when the row is narrower than 880px */
    grid-template-columns: repeat(auto-fill, minmax(clamp(calc(25% - 12px), (880px - 100%) * 999, calc(50% - 8px)), 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Three cards: three in a row while each has about 190px, then one column (never 2 + 1) */
.sp-stats:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(auto-fill, minmax(clamp(calc(33.333% - 11px), (600px - 100%) * 999, 100%), 1fr));
}

.staff-app .sp-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon label" "value value" "note note";
    align-items: center;
    gap: 6px 12px;
    padding: 20px 22px;
    border: 1px solid var(--sp-border);
    border-radius: 14px;
    background: var(--sp-surface);
    color: var(--sp-muted) !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--primary-900) 4%, transparent);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.staff-app .sp-stat:hover {
    border-color: var(--primary-200);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-900) 8%, transparent);
    transform: translateY(-1px);
}

.sp-stat-icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--sp-accent-soft);
    color: var(--sp-accent);
}

.sp-stat-label {
    grid-area: label;
    font-size: 15px;
    font-weight: 500;
    color: var(--neutral-800);
}

.sp-stat-value {
    grid-area: value;
    margin-top: 8px;
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
    color: var(--sp-text);
}

.sp-stat-note {
    grid-area: note;
    font-size: 14px;
}

.staff-app .sp-stat.is-alert {
    border-color: #E8C9A6;
    background: #FFF8EF;
}

.sp-stat.is-alert .sp-stat-icon {
    background: #FBE6CC;
    color: #8A4B08;
}

/* Overview: panels */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    align-items: start;
}

.sp-col {
    min-width: 0;
}

.sp-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.sp-panel-head .staff-section-title {
    margin: 0;
}

.sp-panel-head a {
    font-size: 15px;
}

.sp-panel-note {
    margin: -6px 0 14px;
    font-size: 14px;
}

.sp-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid var(--primary-100);
}

.sp-rows li:first-child {
    border-top: 0;
    padding-top: 0;
}

.staff-app .sp-row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    color: var(--sp-muted) !important;
    text-decoration: none !important;
    font-size: 14px;
}

.sp-row-main strong {
    color: var(--sp-text);
    font-size: 15px;
    font-weight: 600;
}

a.sp-row-main:hover strong {
    text-decoration: underline;
}

.sp-rows .staff-badge {
    flex: none;
    max-width: 55%;
    white-space: normal;
    text-align: right;
}

.sp-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.staff-app .sp-quick-link,
.staff-app .sp-help-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--primary-100);
    border-radius: 12px;
    color: var(--sp-text) !important;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease;
}

.staff-app :is(.sp-quick-link, .sp-help-banner):hover {
    border-color: var(--primary-200);
    background: var(--neutral-50);
}

.sp-quick-link strong,
.sp-help-banner strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.sp-quick-link small,
.sp-help-banner small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--sp-muted);
}

.sp-quick-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--sp-accent-soft);
    color: var(--sp-accent);
}

.staff-app .sp-help-banner {
    padding: 18px 22px;
    background: var(--sp-surface);
    border-color: var(--sp-border);
}

.sp-help-banner > .sp-icon:last-child {
    margin-left: auto;
    color: var(--sp-accent);
}

.sp-facts {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 10px 16px;
    margin: 0;
    font-size: 15px;
}

.sp-facts dt {
    color: var(--sp-muted);
}

.sp-facts dd {
    margin: 0;
    color: var(--sp-text);
}

.sp-missing {
    color: #A15C00;
    font-style: italic;
}

/* Tablets and phones: the sidebar slides in from the left */
@media (max-width: 1000px) {
    .sp-app {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        width: min(300px, 86vw);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
        box-shadow: 0 0 40px rgba(0, 0, 0, .18);
    }

    .sp-sidebar.is-open {
        transform: none;
        visibility: visible;
        transition: transform .25s ease;
    }

    .sp-scrim:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 50;
        background: color-mix(in srgb, var(--neutral-900) 35%, transparent);
    }

    .sp-icon-button,
    .staff-app .sp-topbar-brand {
        display: inline-grid;
    }

    .sp-topbar {
        padding: 0 16px 0 8px;
    }

    main.sp-main > .sp-content {
        padding: 28px var(--gutter) 56px;
    }

    .sp-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* One column: the cards back in reading order (attention, website, quick actions, business) */
    .sp-col {
        display: contents;
    }

    .sp-grid [aria-labelledby="sp-attention"] { order: 1; }
    .sp-grid [aria-labelledby="sp-live"] { order: 2; }
    .sp-grid [aria-labelledby="sp-quick"] { order: 3; }
    .sp-grid [aria-labelledby="sp-biz"] { order: 4; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-sidebar,
    .staff-app .sp-stat {
        transition: none;
    }
}

@media (max-width: 600px) {
    .sp-title {
        font-size: 30px;
    }

    .sp-user-name,
    .sp-logout span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .staff-app .staff-card {
        padding: 20px 18px;
    }

    .sp-quick {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .sp-stats:has(> :nth-child(3):last-child) {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-app .sp-stat {
        padding: 16px;
    }

    .sp-stat-value {
        font-size: 30px;
    }

    .sp-rows li {
        flex-direction: column;
        align-items: flex-start;
    }

    .sp-rows .staff-badge {
        max-width: none;
        text-align: left;
    }
}

/* Tables and panel links: plain until hovered (links in sentences stay underlined) */
.staff-app :is(.staff-table, .sp-panel-head, .staff-filter) a:not(.btn) {
    text-decoration: none;
}

.staff-app :is(.staff-table, .sp-panel-head) a:not(.btn):hover {
    text-decoration: underline;
}

.staff-app .staff-table a.staff-resource-title {
    color: var(--sp-text);
    font-weight: 600;
}

.staff-app .staff-table small {
    color: var(--sp-muted);
    font-size: 13px;
}

.staff-app .staff-resource-actions a,
.staff-app .staff-resource-actions .staff-link-button {
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.staff-app .staff-resource-actions .staff-link-button:hover {
    text-decoration: underline;
}

/* Resources list: View (opens the pop-up), Edit, Delete, evenly spaced */
.staff-resource-actions-row {
    white-space: nowrap;
}

.staff-resource-actions-row > :not(:first-child) {
    margin-left: 14px;
}

.staff-app .staff-resource-actions-row .staff-link-button[data-pdf-src],
.staff-app .staff-resource-actions-row .staff-link-button[data-video-title] {
    color: var(--link);
}

/* Article filters: pills */
.staff-app .staff-filter {
    gap: 6px;
    margin-bottom: 18px;
}

.staff-app .staff-filter a {
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--neutral-800);
    font-size: 14px;
}

.staff-app .staff-filter a:hover {
    background: var(--neutral-100);
}

.staff-app .staff-filter a.is-active {
    background: var(--sp-accent-soft);
    color: var(--sp-accent-ink);
}

/* Form inputs: larger, easier to tap and read */
.staff-app .staff-acf-form :is(input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="tel"], input[type="search"], select, textarea),
.staff-app .staff-main :is(input[type="text"], input[type="email"], input[type="password"]) {
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--primary-200);
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.4;
}

.staff-app .staff-acf-form :is(input, select, textarea):focus {
    border-color: var(--sp-accent);
    outline: 2px solid color-mix(in srgb, var(--primary-500) 25%, transparent);
    outline-offset: 0;
}

.staff-app .staff-acf-form .acf-field .acf-label label {
    font-size: 15px;
    color: var(--sp-text);
}

/* ACF tabs inside a form (Announcements): match the portal's tabs */
.staff-app .staff-acf-form .acf-tab-wrap {
    background: none;
}

.staff-app .staff-acf-form .acf-tab-group {
    display: flex;
    gap: 4px;
    background: none;
    border-bottom: 1px solid var(--sp-border);
}

.staff-app .staff-acf-form .acf-tab-group li {
    margin: 0;
}

.staff-app .staff-acf-form .acf-tab-group li a {
    margin: 0 0 -1px;
    padding: 10px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--sp-muted) !important;
    font-size: 15px;
    text-decoration: none !important;
}

.staff-app .staff-acf-form .acf-tab-group li a:hover {
    color: var(--sp-text) !important;
}

.staff-app .staff-acf-form .acf-tab-group li.active a {
    border-bottom-color: var(--sp-accent);
    color: var(--sp-text) !important;
    font-weight: 600;
}

/* ACF button choices (e.g. Upload file / Enter link): the brand colour, readable on its fill */
.staff-app .acf-button-group label.selected {
    background: var(--sp-fill);
    border-color: var(--sp-fill);
    color: #fff;
}

.staff-app .acf-button-group label:focus-within {
    outline: 2px solid var(--sp-accent);
    outline-offset: 2px;
}

/* Help & guide */
.sp-guide {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.sp-guide-toc {
    position: sticky;
    top: calc(var(--sp-topbar) + 24px);
}

.sp-guide-toc .sp-nav-heading {
    padding: 0;
}

.sp-guide-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--sp-border);
}

.sp-guide-toc li {
    margin: 0;
}

.staff-app .sp-guide-toc a {
    display: block;
    margin-left: -2px;
    padding: 6px 0 6px 14px;
    border-left: 2px solid transparent;
    color: var(--sp-muted) !important;
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none !important;
}

.staff-app .sp-guide-toc a:hover {
    border-left-color: var(--sp-accent);
    color: var(--sp-text) !important;
}

.sp-guide-body .staff-card {
    scroll-margin-top: calc(var(--sp-topbar) + 20px);
}

.sp-guide-body h2 {
    margin: 0 0 12px;
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--sp-text);
}

.sp-guide-body h3 {
    margin: 24px 0 8px;
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 600;
    color: var(--sp-text);
}

.sp-guide-body :is(p, li, dd) {
    font-size: 16px;
    line-height: 1.6;
}

.sp-guide-body :is(ul, ol) {
    margin: 0 0 12px;
    padding-left: 22px;
}

.sp-guide-body li + li {
    margin-top: 6px;
}

.sp-guide-body strong {
    color: var(--sp-text);
}

.sp-guide-dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 12px 16px;
    align-items: baseline;
    margin: 0 0 12px;
}

.sp-guide-dl dd {
    margin: 0;
}

.sp-callout {
    margin: 16px 0;
    padding: 14px 16px;
    border-left: 3px solid var(--sp-accent);
    border-radius: 0 10px 10px 0;
    background: var(--sp-accent-soft);
    font-size: 15px;
    line-height: 1.55;
    color: var(--neutral-800);
}

.sp-callout-warn {
    border-left-color: #B54708;
    background: #FFF6EC;
}

.sp-guide-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
}

.staff-app .sp-guide-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--sp-border);
    border-radius: 999px;
    background: var(--neutral-50);
    color: var(--sp-accent-ink) !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
}

.staff-app .sp-guide-go:hover {
    border-color: var(--primary-200);
    background: var(--sp-accent-soft);
}

.sp-guide-table td:first-child {
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .sp-guide {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-guide-toc {
        position: static;
        padding: 18px 20px;
        border: 1px solid var(--sp-border);
        border-radius: 14px;
        background: var(--sp-surface);
    }

    .sp-guide-toc ol {
        columns: 2;
        border-left: 0;
    }

    .staff-app .sp-guide-toc a {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 600px) {
    .sp-guide-toc ol {
        columns: 1;
    }

    .sp-guide-dl {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .sp-guide-dl dd {
        margin-bottom: 10px;
    }

    .sp-guide-table td:first-child {
        white-space: normal;
    }
}

.staff-app .staff-table {
    margin: 0;
}

/* Overview: the Blog panel's counts */
.sp-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.staff-app .sp-mini-stats a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid var(--primary-100);
    border-radius: 12px;
    color: var(--sp-muted) !important;
    font-size: 14px;
    text-decoration: none !important;
}

.staff-app .sp-mini-stats a:hover {
    border-color: var(--primary-200);
    background: var(--neutral-50);
}

.sp-mini-stats strong {
    font-size: 26px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--sp-text);
}

.sp-mini-stats + .sp-rows {
    margin-top: 16px;
}

.staff-card > .staff-acf-form:first-child {
    margin-top: 0;
}

/* Referral history: filter, summary, sortable headings, dates pop-up */
.staff-app .sp-history-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 16px;
    padding: 20px 24px;
    margin-bottom: 16px;
}

.sp-history-filter .staff-field {
    flex: 0 1 220px;
}

.sp-history-filter .staff-field[hidden] {
    display: none;
}

.staff-app .sp-history-filter :is(select, input[type="month"], input[type="date"]) {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--primary-200);
    border-radius: 10px;
    background: #fff;
    color: var(--sp-text);
    font: inherit;
    font-size: 16px;
}

.sp-history-filter .btn {
    min-height: 44px;
}

.sp-history-reset {
    align-self: center;
    font-size: 15px;
}

.sp-history-summary {
    margin: 0 0 14px;
    font-size: 15px;
}

.sp-history-summary strong {
    color: var(--sp-text);
}

.staff-app .sp-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--sp-muted) !important;
    white-space: nowrap;
}

.staff-app .sp-sort.is-on {
    color: var(--sp-text) !important;
}

.sp-sort-arrow {
    font-size: 12px;
    opacity: .55;
}

.sp-sort.is-on .sp-sort-arrow {
    opacity: 1;
    color: var(--sp-accent);
}

.sp-history-clinic {
    color: var(--sp-text);
    font-weight: 600;
}

.sp-history-table td[data-label="Sent by"] {
    overflow-wrap: anywhere;
}

.sp-count-button {
    min-width: 40px;
    padding: 4px 12px;
    border: 1px solid var(--neutral-300);
    border-radius: 999px;
    background: var(--sp-accent-soft);
    color: var(--sp-accent-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.sp-count-button:hover {
    border-color: var(--sp-accent);
}

.sp-dialog {
    width: min(440px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 64px));
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: var(--sp-surface);
    color: var(--sp-muted);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--neutral-900) 25%, transparent);
}

.sp-dialog::backdrop {
    background: color-mix(in srgb, var(--neutral-900) 40%, transparent);
}

.sp-dialog-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 16px;
    background: var(--sp-surface);
    border-bottom: 1px solid var(--primary-100);
}

.sp-dialog-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--sp-text);
}

.sp-dialog-head p {
    margin: 4px 0 0;
    font-size: 14px;
}

.sp-dialog .sp-icon-button {
    display: inline-grid;
    flex: none;
}

.sp-dates {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 16px;
}

.sp-dates th {
    padding: 12px 24px 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    color: var(--sp-muted);
}

.sp-dates td {
    padding: 9px 24px;
    border-top: 1px solid var(--primary-100);
    color: var(--sp-text);
}

/* The counts: right-aligned in a narrow column, so the digits line up */
.sp-dates :is(th, td):first-child {
    width: 1%;
    padding-right: 20px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sp-dates tbody td:first-child {
    font-weight: 600;
}

.sp-dates tfoot td {
    padding-bottom: 20px;
    border-top: 1px solid var(--tertiary-100);
    color: var(--sp-muted);
    font-size: 14px;
}

.sp-dates tfoot td:first-child {
    color: var(--sp-text);
    font-weight: 600;
}

@media (max-width: 600px) {
    .sp-history-filter .staff-field {
        flex: 1 1 100%;
    }
}

.sp-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    height: fit-content;
}

.sp-dates tbody tr:first-child td {
    border-top: 0;
    padding-top: 16px;
}

.sp-dates :is(th, td):first-child {
    min-width: 3ch;
    padding-left: 32px;
}

.sp-history-table td:is([data-label="Last referral"], [data-label="Approved"]) {
    white-space: nowrap;
}

/* Resources: "Generate from the file" under the thumbnail */
.res-thumb-gen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 12px;
}

.res-thumb-gen-status {
    margin: 0;
    font-size: 14px;
    color: var(--sp-muted, var(--neutral-700));
}

.res-thumb-gen-status.is-error {
    color: #B42318;
}

/* ---------- Style guide (views/portal-style-guide.php): the website's guide in a frame ---------- */

.sp-style-guide {
    display: block;
    width: 100%;
    height: 80vh;
    border: 1px solid var(--sp-border, var(--neutral-200));
    border-radius: 12px;
    background: var(--white);
}

/* ---------- Announcements: live previews (assets/js/announcement-preview.js) ---------- */

.helios-preview {
    margin: 4px 12px 16px;
    padding: 14px 16px 16px;
    border: 1px dashed var(--neutral-300);
    border-radius: 10px;
    background: var(--neutral-50);
}

.helios-preview__label {
    margin: 0 0 10px;
    color: var(--neutral-700);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.helios-preview__empty {
    margin: 0;
    color: var(--neutral-600);
    font-size: 14px;
}

.helios-preview .site-header__banner {
    overflow: hidden;
    border-radius: 8px;
}

.helios-preview .site-header__banner-inner {
    padding-inline: 16px;
}

.helios-preview .blk--referral-form {
    max-width: 720px;
    margin: 0;
}

.helios-preview .referral-form__notice {
    margin-bottom: 0;
}

/* Keep the portal's own link colours out of the previews (as on the site) */
.staff-app .helios-preview .site-header__banner-text a {
    color: inherit;
}

.staff-app .helios-preview .referral-form__notice-text a {
    color: var(--tertiary-600);
}

/* A note beside a field's title (staff.js: [data-beside-field]) */
.staff-acf-form .acf-label.sp-label-with-note {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px 24px;
}

.staff-card .acf-label.sp-label-with-note .staff-preview {
    margin: 0 0 8px;
    padding: 8px 14px;
}

/* Analytics tabs: Blog, Resources, Job openings (views/portal-stats.php) */
.staff-app {
    --sp-chart-views: var(--primary-200);
    --sp-chart-views-hover: var(--primary-400);
    --sp-chart-uniques: var(--secondary-600);
}

html[data-sp-theme="dark"] .staff-app {
    --sp-chart-views: #6E5448;
    --sp-chart-views-hover: #996B57;
    --sp-chart-uniques: #C7AEC5;
}

.sp-analytics-intro .staff-filter {
    margin-bottom: 12px;
}

.sp-analytics-note {
    margin: 0;
    font-size: 15px;
}

.sp-analytics-stats .sp-stat {
    box-shadow: none;
}

.sp-stat-change.is-up,
.sp-change.is-up {
    color: #2F6B3A;
}

.sp-stat-change.is-down,
.sp-change.is-down {
    color: #9A3B2E;
}

html[data-sp-theme="dark"] :is(.sp-stat-change, .sp-change).is-up {
    color: #8FCB98;
}

html[data-sp-theme="dark"] :is(.sp-stat-change, .sp-change).is-down {
    color: #EC9C8F;
}

.sp-chart-key {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.sp-chart-key span {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.sp-chart-key-views {
    background: var(--sp-chart-views);
}

.sp-chart-key-uniques {
    margin-left: 10px;
    background: var(--sp-chart-uniques);
}

.sp-chart {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "max bars bars" "from from to";
    gap: 6px 10px;
    font-size: 13px;
}

.sp-chart-max {
    grid-area: max;
    align-self: start;
}

.sp-chart-from {
    grid-area: from;
    padding-left: 0;
}

.sp-chart-to {
    grid-area: to;
}

.sp-chart-bars {
    grid-area: bars;
    display: grid;
    grid-template-columns: repeat(var(--bars), minmax(0, 1fr));
    align-items: end;
    gap: clamp(1px, 0.4vw, 4px);
    height: 220px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--sp-border);
    list-style: none;
}

.sp-chart-bars li {
    position: relative;
    height: 100%;
    outline-offset: 2px;
}

.sp-chart-bars li::before,
.sp-chart-bars li::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    border-radius: 3px 3px 0 0;
}

.sp-chart-bars li::before {
    height: var(--v);
    background: var(--sp-chart-views);
}

.sp-chart-bars li::after {
    height: var(--u);
    background: var(--sp-chart-uniques);
}

.sp-chart-bars li:hover::before,
.sp-chart-bars li:focus-visible::before {
    background: var(--sp-chart-views-hover);
}

/* The top list full width; the breakdown and "not opened" side by side under it */
.sp-analytics-side {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0 24px;
    align-items: start;
}

.sp-article-cell {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 240px;
}

.sp-rank {
    display: inline-grid;
    flex: none;
    place-items: center;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sp-accent-soft);
    color: var(--sp-accent-ink);
    font-size: 13px;
    font-weight: 600;
}

.sp-top-articles td:not(:first-child),
.sp-top-articles th:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.staff-table .sp-more-row[hidden] {
    display: none;
}

.sp-show-all {
    margin-top: 16px;
}

.sp-cat-bars {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-cat-bars li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
}

.sp-cat-name {
    color: var(--sp-text);
}

.sp-cat-bar {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(var(--sp-chart-uniques), var(--sp-chart-uniques)) no-repeat 0 0 / var(--w) 100%, var(--neutral-200);
}

.sp-unread summary {
    cursor: pointer;
    list-style-position: outside;
}

.sp-unread summary .staff-section-title {
    display: inline;
    margin: 0;
}

.sp-unread summary span {
    font-weight: 400;
    color: var(--sp-muted);
}

.sp-unread ul {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.sp-unread small,
:is(.staff-articles, .staff-resources, .staff-jobs) td[data-label="Views"] small {
    display: block;
    color: var(--sp-muted);
}

:is(.staff-articles, .staff-resources, .staff-jobs) td[data-label="Views"] {
    white-space: nowrap;
}

@media (min-width: 1025px) {
    .sp-views-word {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.sp-phone-only {
    display: none;
}

@media (max-width: 1024px) {
    .sp-phone-only {
        display: inline; /* the stacked lists, which have no column names */
    }
}

.staff-app .sp-views {
    font-weight: 600;
}

.sp-stats-reset {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-top: 8px;
}


@media (max-width: 1024px) {
    /* These lists are stacked cards on tablets and phones; columns only on desktop */
    .staff-table:is(.staff-articles, .staff-categories, .staff-resources, .staff-jobs) thead {
        display: none;
    }

    .staff-table:is(.staff-articles, .staff-categories, .staff-resources, .staff-jobs) tr {
        padding: 12px 14px;
        border-bottom: 1px solid var(--neutral-200);
    }

    .staff-table:is(.staff-articles, .staff-categories, .staff-resources, .staff-jobs) td {
        display: flex;
        gap: 12px;
        padding: 6px 0;
        border: 0;
    }

    /* Articles list: no column names, the categories under the title */
    .staff-articles td[data-label]::before {
        content: none;
    }

    .staff-articles td[data-label="Article"] {
        display: block;
    }

    /* Categories list: the same, the description under the name; the counts share a row */
    .staff-categories td[data-label]::before {
        content: none;
    }

    .staff-categories td[data-label="Category"] {
        display: block;
    }

    .staff-categories tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 6px;
    }

    .staff-categories td {
        flex: none;
        width: auto;
        font-size: 14px;
    }

    .staff-categories td[data-label="Featured"] {
        gap: 0;
    }

    .staff-categories td[data-label="Resources"] {
        display: block;
    }

    .staff-categories td:is([data-label="Category"], [data-label="Tag"]),
    .staff-categories .staff-resource-actions {
        flex: 1 0 100%;
        font-size: inherit;
    }

    .staff-categories td[data-label="Featured"]::before {
        content: "· Featured: ";
        flex: none;
        color: inherit;
        font-size: inherit;
        white-space: pre;
    }

    /* Resources list: the same, the description under the title; type, tags, status and
       the featured star flow along below it */
    .staff-resources td[data-label]::before {
        content: none;
    }

    .staff-resources td[data-label="Resource"] {
        display: block;
    }

    .staff-resources tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 6px;
    }

    .staff-resources td {
        flex: none;
        width: auto;
        font-size: 14px;
    }

    .staff-resources td[data-label="Resource"],
    .staff-resources .staff-resource-actions {
        flex: 1 0 100%;
        font-size: inherit;
    }

    .staff-resources td:is([data-label="Type"], [data-label="Tags"]) {
        display: block;
    }

    .staff-resources td[data-label="Tags"]::before {
        content: "· ";
        white-space: pre;
    }

    .staff-resources td[data-label="Featured"] {
        margin-left: auto;
    }

    /* Status, views and the featured star share a row */
    .staff-articles tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 16px;
    }

    .staff-articles td {
        flex: none;
        width: auto;
    }

    .staff-articles td[data-label="Article"],
    .staff-articles .staff-resource-actions {
        flex: 1 0 100%;
    }

    .staff-articles .staff-resource-actions {
        flex-wrap: wrap;
        row-gap: 6px;
        min-width: 0;
        white-space: normal;
    }

    :is(.staff-articles, .staff-resources, .staff-jobs) td[data-label="Views"] {
        align-items: baseline;
        gap: 6px;
    }

    :is(.staff-articles, .staff-resources, .staff-jobs) td[data-label="Views"] small {
        display: inline;
    }

    .staff-app :is(.staff-articles, .staff-resources, .staff-jobs) .sp-views {
        font-size: 13px; /* the same size as "unique" beside it */
    }

    :is(.staff-articles, .staff-resources, .staff-jobs) td[data-label="Views"] small::before {
        content: "· ";
    }

    .staff-articles td[data-label="Featured"] {
        margin-left: auto;
    }
}

@media (max-width: 600px) {
    .sp-chart-bars {
        height: 160px;
    }

    /* Each article as a small card: the title, then its four numbers side by side */
    .sp-top-articles tr:not([hidden]) {
        display: grid;
        grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
        gap: 8px;
    }

    .sp-top-articles td {
        flex-direction: column;
        gap: 0;
        font-weight: 600;
        text-align: left !important;
    }

    .sp-top-articles td.sp-article-cell {
        grid-column: 1 / -1;
        flex-direction: row;
        min-width: 0;
        font-weight: 400;
    }

    .sp-top-articles td.sp-article-cell::before {
        content: none;
    }

    .sp-top-articles td[data-label]::before {
        flex: none;
        font-weight: 400;
        white-space: normal;
    }
}

/* Resources → Settings: cards across on the Resources page */
.staff-res-grid {
    margin: 24px 0 8px;
    padding: 0;
    border: 0;
}

.staff-res-grid legend {
    margin-bottom: 4px;
    color: var(--sp-text);
    font-weight: 600;
}

.staff-res-grid-note {
    margin: 0 0 12px;
    font-size: 14px;
}

.staff-res-grid-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 160px));
    gap: 16px;
}

@media (max-width: 600px) {
    .staff-res-grid-fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
}

/* Lists of rows (FAQs, team, jobs, announcements): Expand all / Collapse all (staff.js) */
.sp-collapse-tools {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-bottom: 10px;
}

.staff-app .sp-collapse-tools .staff-link-button {
    color: var(--link);
    font-weight: 500;
    text-decoration: none;
}

.staff-app .sp-collapse-tools .staff-link-button:hover {
    text-decoration: underline;
}

/* Job openings (views/portal-jobs.php) */
.staff-app .staff-link-button.sp-link-plain {
    color: var(--link);
}

.sp-job-note {
    display: block;
    margin-top: 4px;
    color: var(--sp-muted);
    font-size: 13px;
}

.sp-job-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}

.sp-job-summary .sp-mini-stats {
    flex: 1 1 520px;
}

.sp-mini-stats-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sp-job-summary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    font-size: 14px;
    font-weight: 500;
}

.sp-job-summary-actions .sp-job-note {
    flex-basis: 100%;
    margin: 0;
}

.sp-close-form {
    display: grid;
    gap: 18px;
    max-width: 520px;
    margin-top: 16px;
}

.sp-close-reasons {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.sp-close-reasons legend {
    margin-bottom: 8px;
    color: var(--sp-text);
    font-weight: 600;
}

.sp-close-reasons label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-close-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.sp-chart-switch {
    margin: -4px 0 14px;
}

/* The posting pop-up inside the portal keeps the website's colours */
.staff-app .job-openings__dialog {
    color: var(--neutral-900);
}

@media (max-width: 1024px) {
    /* Postings list: stacked like the other lists */
    .staff-jobs td[data-label]::before {
        content: none;
    }

    .staff-jobs tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 16px;
    }

    .staff-jobs td {
        flex: none;
        width: auto;
    }

    .staff-jobs td[data-label="Posting"] {
        display: block;
        flex: 1 0 100%;
    }

    .staff-jobs td[data-label="Status"] {
        display: block;
    }

    .staff-jobs .staff-resource-actions {
        flex: 1 0 100%;
        flex-wrap: wrap;
        row-gap: 6px;
        white-space: normal;
    }
}

@media (max-width: 600px) {
    .sp-mini-stats-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Analytics: the unique count leads; the total (repeats included) is secondary */
.sp-stat-change {
    display: block;
    margin-top: 2px;
}

.sp-top-articles .sp-total {
    display: block;
    color: var(--sp-muted);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

.sp-mini-stats small {
    color: var(--sp-muted);
    font-size: 12px;
}

.sp-image-viewer-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF;
    cursor: pointer;
}

.sp-image-viewer-close:hover,
.sp-image-viewer-close:focus-visible {
    background: rgba(255, 255, 255, .24);
}

/* Smaller desktops: the row actions stack (2 × 2 for four, one column for two or three),
   and the cells are a little tighter, so the lists fit without being cut off */
@media (min-width: 1025px) and (max-width: 1440px) {
    .staff-app .staff-table:is(.staff-articles, .staff-categories, .staff-resources, .staff-jobs) :is(th, td) {
        padding-right: 12px;
        padding-left: 12px;
    }

    .staff-table:is(.staff-articles, .staff-categories, .staff-resources, .staff-jobs) .staff-resource-actions {
        width: 1%;
        white-space: normal;
        text-align: left;
    }

    .staff-table:is(.staff-articles, .staff-categories, .staff-resources, .staff-jobs) .staff-resource-actions > * {
        display: block;
        margin: 3px 0 !important;
        white-space: nowrap;
    }

    /* Four or more: two side by side */
    .staff-table:is(.staff-articles, .staff-categories, .staff-resources, .staff-jobs) .staff-resource-actions:has(> :nth-child(4)) {
        min-width: 172px;
    }

    .staff-table:is(.staff-articles, .staff-categories, .staff-resources, .staff-jobs) .staff-resource-actions:has(> :nth-child(4)) > * {
        display: inline-block;
        width: calc(50% - 4px);
    }

    .staff-table:is(.staff-articles, .staff-categories, .staff-resources, .staff-jobs) .staff-resource-actions :is(button, a) {
        text-align: left;
        vertical-align: top;
    }
}

/* Tablets and phones: the featured star in the card's top right corner */
@media (max-width: 1024px) {
    .staff-table:is(.staff-articles, .staff-resources) tr {
        position: relative;
    }

    .staff-table:is(.staff-articles, .staff-resources) td[data-label="Featured"] {
        position: absolute;
        top: 18px;
        right: 16px;
        margin: 0;
        padding: 0;
    }

    .staff-table:is(.staff-articles, .staff-resources) td:is([data-label="Article"], [data-label="Resource"]) {
        padding-right: 36px;
    }
}