/* ==========================================================================
   Browse Postings (/browse) — mobile-first layout.

   PALETTE: the page's original colours, with one deliberate exception —
   the primary blue is #017bfe (hover #0169d8), requested so browse, job
   detail and the post flow share one blue. #017bfe already exists in the
   codebase (post_common.css .greenbg-btn / .switch).

   Everything else is untouched from the pre-existing file: #212529 ink,
   #495057 / #6c757d greys, #d8dee4 / #e3e7eb / #f1f3f5 lines, #f7f9fb
   canvas, #0d6efd hybrid badge, #c2daf4 card hover. No gradients on
   controls.
   ========================================================================== */

.aj-page {
    --aj-primary: #017bfe;
    --aj-primary-dark: #0169d8;
    --aj-primary-ring: rgba(1, 123, 254, 0.14);

    --aj-ink: #212529;
    --aj-body: #495057;
    --aj-muted: #6c757d;
    --aj-line: #e3e7eb;
    --aj-line-strong: #d8dee4;
    --aj-line-soft: #f1f3f5;
    --aj-surface: #ffffff;

    --aj-radius: 12px;
    --aj-radius-sm: 8px;
    --aj-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    /* Comfortable thumb-sized tap target on touch screens */
    --aj-control-h: 48px;

    background: #f7f9fb;
    min-height: 70vh;
    padding-bottom: 3rem;
    color: var(--aj-body);
}

/* --------------------------------------------------------------- Header -- */
.aj-title {
    font-size: 1.55rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--aj-ink);
}
.aj-sub {
    color: var(--aj-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}
.aj-sub strong {
    color: var(--aj-ink);
}

/* ------------------------------------------------------- Category tabs -- */
/* On phones the 11 categories used to wrap onto 4 rows and pushed the
   results below the fold — they now live in one swipeable strip. */
.aj-tabs-scroller {
    position: relative;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    /* Gutter for the scroll chevron below. The arrow gets its own space
       rather than floating over the last pill — overlapping it would mean a
       tap aimed at the arrow navigates to that category instead. */
    padding-right: 2.25rem;
}
/* Scroll affordance: the strip reads as a finished row otherwise, so nobody
   knows the remaining categories are one swipe away. */
.aj-tabs-scroller::after {
    content: "\203A";
    position: absolute;
    right: 0.5rem;
    top: 0;
    /* matches .aj-tabs padding-bottom, so the chevron centres on the pills
       rather than on the whole padded box */
    bottom: 0.9rem;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding-bottom: 2px;
    border-radius: 50%;
    background: var(--aj-surface);
    border: 1px solid var(--aj-line-strong);
    color: var(--aj-primary);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    animation: aj-nudge 1.6s ease-in-out infinite;
}
@keyframes aj-nudge {
    0%, 60%, 100% { transform: translateX(0); }
    30%           { transform: translateX(3px); }
}
.aj-tabs {
    /* Soft right edge hints that the strip keeps going. Masking (rather than
       a gradient overlay) keeps it correct over any background.
       The #000 stops below are mask alpha values, not paint — a mask reads
       the alpha channel, so #000 means "fully opaque here". Nothing is
       tinted black. */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.25rem), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.25rem), transparent 100%);
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.15rem 0.75rem 0.9rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.aj-tabs::-webkit-scrollbar {
    display: none;
}
.aj-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 40px;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--aj-line-strong);
    background: var(--aj-surface);
    color: var(--aj-body);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease,
        background 0.15s ease;
}
.aj-tab:hover,
.aj-tab:focus-visible {
    border-color: var(--aj-primary);
    color: var(--aj-primary);
    text-decoration: none;
}
.aj-tab:active {
    transform: scale(0.97);
}
.aj-tab-active,
.aj-tab-active:hover,
.aj-tab-active:focus-visible {
    background: var(--aj-primary);
    border-color: var(--aj-primary);
    color: #ffffff;
}
.aj-tab-active:hover {
    background: var(--aj-primary-dark);
    border-color: var(--aj-primary-dark);
}
.aj-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.aj-tab-active .aj-tab-count {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

/* --------------------------------------------------------- Filter card -- */
.aj-filterbar {
    background: var(--aj-surface);
    border: 1px solid var(--aj-line);
    border-radius: var(--aj-radius);
    padding: 0.85rem;
    box-shadow: var(--aj-shadow);
}
.aj-filterbar-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
/* ---- Filter chips (replaced the two <select>s) ----
   A native select's dropdown list is rendered by the OS, so no CSS could
   reach it. Radio inputs styled as chips are fully controllable and submit
   the identical name/value pairs. */
.aj-filter-selects {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.aj-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.aj-filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--aj-muted);
}
.aj-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.aj-chip {
    display: inline-block;
    margin: 0;
    cursor: pointer;
}
/* Visually hidden but still focusable and still submitted */
.aj-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.aj-chip span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--aj-line-strong);
    background: var(--aj-surface);
    color: var(--aj-body);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.aj-chip:hover span {
    border-color: var(--aj-primary);
    color: var(--aj-primary);
}
/* Adjacent-sibling selector rather than :has(), so this works everywhere */
.aj-chip input:checked + span {
    background: var(--aj-primary);
    border-color: var(--aj-primary);
    color: #ffffff;
}
.aj-chip input:focus-visible + span {
    outline: none;
    box-shadow: 0 0 0 3px var(--aj-primary-ring);
}
.aj-filter-actions {
    display: flex;
    gap: 0.6rem;
}
.aj-filter-actions .aj-btn {
    flex: 1 1 0;
}

/* Search + filter toggle share one row */
.aj-search-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.aj-filter-toggle {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--aj-control-h);
    height: var(--aj-control-h);
    padding: 0;
    border-radius: var(--aj-radius-sm);
    border: 1px solid var(--aj-line-strong);
    background: var(--aj-surface);
    color: var(--aj-body);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.aj-filter-toggle:hover,
.aj-filter-toggle[aria-expanded="true"] {
    border-color: var(--aj-primary);
    color: var(--aj-primary);
}
.aj-filter-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--aj-primary-ring);
}
/* Marks that a filter is applied while the panel is shut */
.aj-filter-dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--aj-primary);
}
/* ---- Filter sheet ----
   A plain collapse panel, not a Bootstrap .modal — header.css redefines the
   modal rules and loads after this file, so a .modal here could only be held
   in place with !important on every property. Inline by default (desktop),
   promoted to a centred overlay on phones below. */
.aj-filter-sheet {
    min-width: 0;
}
.aj-sheet-panel {
    min-width: 0;
}
.aj-sheet-head {
    display: none;
}
.aj-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.aj-filter-actions {
    display: flex;
    gap: 0.6rem;
}
.aj-filter-actions .aj-btn {
    flex: 1 1 0;
}

/* Search + filter toggle share one row */
.aj-search-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.aj-filter-toggle {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--aj-control-h);
    height: var(--aj-control-h);
    padding: 0;
    border-radius: var(--aj-radius-sm);
    border: 1px solid var(--aj-line-strong);
    background: var(--aj-surface);
    color: var(--aj-body);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.aj-filter-toggle:hover,
.aj-filter-toggle[aria-expanded="true"] {
    border-color: var(--aj-primary);
    color: var(--aj-primary);
}
.aj-filter-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--aj-primary-ring);
}
/* Marks that a filter is applied while the panel is shut */
.aj-filter-dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--aj-primary);
}
.aj-search-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.aj-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--aj-muted);
    pointer-events: none;
}
.aj-search,
.aj-select {
    width: 100%;
    height: var(--aj-control-h);
    border-radius: var(--aj-radius-sm);
    border: 1px solid var(--aj-line-strong);
    background: var(--aj-surface);
    color: var(--aj-ink);
    /* 16px keeps iOS Safari from zooming the page on focus */
    font-size: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.aj-search {
    padding: 0 0.9rem 0 2.7rem;
}
.aj-search:focus,
.aj-select:focus {
    outline: none;
    border-color: var(--aj-primary);
    box-shadow: 0 0 0 3px var(--aj-primary-ring);
}
.aj-search-wrap:focus-within .aj-search-icon {
    color: var(--aj-primary);
}
.aj-select {
    padding: 0 2.1rem 0 0.9rem;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #6c757d 50%),
        linear-gradient(135deg, #6c757d 50%, transparent 50%);
    background-position:
        calc(100% - 17px) calc(50% + 1px),
        calc(100% - 12px) calc(50% + 1px);
    background-size: 5px 5px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* -------------------------------------------------------------- Buttons -- */
.aj-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--aj-control-h);
    padding: 0 1.2rem;
    border-radius: var(--aj-radius-sm);
    border: 1px solid transparent;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease,
        border-color 0.15s ease, box-shadow 0.15s ease;
}
.aj-btn:active {
    transform: scale(0.98);
}
.aj-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--aj-primary-ring);
}
.aj-btn-primary {
    background: var(--aj-primary);
    color: #ffffff;
}
.aj-btn-primary:hover {
    background: var(--aj-primary-dark);
    color: #ffffff;
    text-decoration: none;
}
.aj-btn-ghost {
    background: var(--aj-surface);
    color: var(--aj-body);
    border-color: var(--aj-line-strong);
}
.aj-btn-ghost:hover {
    border-color: var(--aj-primary);
    color: var(--aj-primary);
    text-decoration: none;
}

/* ---------------------------------------------------------- Result meta -- */
.aj-result-meta {
    color: var(--aj-muted);
    font-size: 0.9rem;
}
.aj-result-meta strong {
    color: var(--aj-ink);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Card grid -- */
.aj-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
.aj-card {
    position: relative;
    display: flex;
    /* Phones: compact list row (thumb left, detail right) so ~4 postings
       are visible per screen instead of one tall image card. */
    flex-direction: row;
    align-items: stretch;
    gap: 0.85rem;
    background: var(--aj-surface);
    border: 1px solid var(--aj-line);
    border-radius: var(--aj-radius);
    padding: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.aj-card:hover,
.aj-card:focus-visible {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: #c2daf4;
    text-decoration: none;
    color: inherit;
}
.aj-card:active {
    transform: scale(0.99);
}

.aj-card-media {
    position: relative;
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    border-radius: var(--aj-radius-sm);
    background: linear-gradient(135deg, #f2f7fd 0%, #f8fafc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.aj-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.aj-card-initials {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--aj-primary);
    letter-spacing: -0.02em;
}
.aj-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.aj-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
}
.aj-badge-remote { background: #017bfe; }
.aj-badge-hybrid { background: #0d6efd; }
.aj-badge-on-site { background: #495057; }

.aj-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
/* Category reads as a chip beside the placement badge, not an eyebrow */
.aj-card-cat {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #f2f7fd;
    color: var(--aj-primary);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.aj-card-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.15rem;
    color: var(--aj-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.aj-card-business {
    color: var(--aj-body);
    font-size: 0.86rem;
    margin-bottom: 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aj-card-loc {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #f1f3f5;
    color: var(--aj-muted);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aj-card-loc svg {
    flex-shrink: 0;
    color: var(--aj-primary);
}
/* Pay chip. On tablet/desktop this keeps the same chip treatment the other
   facts use; the phone breakpoint re-lays it out as the right-hand anchor. */
.aj-card-pay {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.3rem;
    max-width: 100%;
    margin-bottom: 0.4rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #f1f3f5;
    color: var(--aj-body);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}
.aj-card-pay svg {
    flex-shrink: 0;
    color: var(--aj-primary);
}
.aj-card-foot {
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--aj-line-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.76rem;
    color: var(--aj-muted);
}
.aj-card-date {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aj-card-view {
    flex: 0 0 auto;
    color: var(--aj-primary);
    font-weight: 700;
}

/* ---- Job card (all widths): round avatar left, detail beside it, pay top-right,
   chips on a full-width row underneath.

   `display: contents` on .aj-card-body dissolves that wrapper so the
   title, company, location etc. become grid items of the card itself.
   Without it the avatar (a sibling of .aj-card-body) could not share a
   grid with them, and the chip row could not span back under the avatar.
   Scoped to :not(.aj-card-user) — people cards keep their own layout. */
.aj-card:not(.aj-card-user) {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas:
        "media title pay"
        "media biz   pay"
        "media loc   pay"
        "chips chips chips"
        "foot  foot  foot";
    column-gap: 0.75rem;
    align-items: start;
}
.aj-card:not(.aj-card-user) .aj-card-body {
    display: contents;
}
/* Circular avatar, back on mobile — it was hidden before this layout */
.aj-card:not(.aj-card-user) .aj-card-media {
    display: flex;
    grid-area: media;
    align-self: start;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background: var(--aj-primary);
}
.aj-card:not(.aj-card-user) .aj-card-initials {
    font-size: 1.05rem;
    font-weight: 700;
}
/* White initials on every coloured avatar, people cards included —
   the base rule paints them blue, which would vanish on a blue circle. */
.aj-card .aj-card-initials {
    color: #ffffff;
}

/* ---- Avatar colour cycle ----
   Six colours rotate down the list so the column reads with some life
   instead of a stack of identical blue discs. Every value below already
   exists elsewhere in this codebase (#017bfe site blue, #6f42c1 purple,
   #198754 green, #d63384 pink, #344767 navy, #596CFF indigo), all with
   readable contrast against white initials.

   NOTE: the colour comes from the card's POSITION in the list, not from
   the company — so the same employer can appear blue on page 1 and green
   on page 2. Tying it to the employer instead needs a stable index from
   the serializer; say the word and I'll add it. A logo image, where one
   exists, covers the circle entirely and hides the colour either way. */
.aj-grid > .aj-card:nth-child(6n + 1) .aj-card-media { background: #017bfe; }
.aj-grid > .aj-card:nth-child(6n + 2) .aj-card-media { background: #6f42c1; }
.aj-grid > .aj-card:nth-child(6n + 3) .aj-card-media { background: #198754; }
.aj-grid > .aj-card:nth-child(6n + 4) .aj-card-media { background: #d63384; }
.aj-grid > .aj-card:nth-child(6n + 5) .aj-card-media { background: #344767; }
.aj-grid > .aj-card:nth-child(6n + 6) .aj-card-media { background: #596cff; }
.aj-card-title { grid-area: title; }
.aj-card-business { grid-area: biz; }
.aj-card-loc { grid-area: loc; }
.aj-card-badges { grid-area: chips; }
.aj-card-foot { grid-area: foot; }

.aj-card-loc {
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.78rem;
    max-width: 100%;
}
.aj-card-badges {
    margin-top: 0.55rem;
    margin-bottom: 0;
}
/* Pay anchors the right-hand column beside the title. Grid areas rather
   than absolute positioning, so a long range like
   "$183,200 – $366,000 / years" wraps inside its column instead of
   colliding with the title. */
.aj-card-pay {
    grid-area: pay;
    justify-self: end;
    max-width: 7rem;
    margin-bottom: 0;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    background: #f1f3f5;
    text-align: right;
    color: var(--aj-ink);
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.aj-card-pay svg { display: none; }

.aj-card-foot {
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--aj-line-soft);
    font-size: 0.73rem;
}

/* ---------------------------------------------------------- Pagination -- */
.aj-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
}
.aj-pagination .aj-page {
    min-width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--aj-radius-sm);
    border: 1px solid var(--aj-line-strong);
    color: var(--aj-body);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    background: var(--aj-surface);
    transition: all 0.15s ease;
}
.aj-pagination .aj-page:hover {
    border-color: var(--aj-primary);
    color: var(--aj-primary);
    text-decoration: none;
}
.aj-pagination .aj-page-current {
    background: var(--aj-primary);
    border-color: var(--aj-primary);
    color: #ffffff;
}
.aj-pagination .aj-page-current:hover {
    background: var(--aj-primary-dark);
    border-color: var(--aj-primary-dark);
    color: #ffffff;
}
.aj-pagination .aj-page-disabled {
    color: #adb5bd;
    background: #f8f9fa;
    cursor: not-allowed;
}
.aj-pagination .aj-page-ellipsis {
    border: none;
    background: transparent;
    min-width: 24px;
}

/* --------------------------------------------------------- Empty state -- */
.aj-empty {
    text-align: center;
    padding: 2.5rem 1.25rem;
    background: var(--aj-surface);
    border: 1px dashed var(--aj-line-strong);
    border-radius: var(--aj-radius);
}
.aj-empty-icon {
    color: #adb5bd;
    margin-bottom: 0.75rem;
}
.aj-empty-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--aj-ink);
    margin-bottom: 0.5rem;
}
.aj-empty-sub {
    color: var(--aj-muted);
    font-size: 0.92rem;
    max-width: 28rem;
    margin: 0 auto 0.75rem;
}

/* ------------------------------------------------- People card variant -- */
.aj-card-user .aj-user-media {
    border-radius: 50%;
}
.aj-card-user .aj-card-initials {
    font-size: 1.5rem;
}
.aj-user-about {
    color: var(--aj-body);
    font-size: 0.82rem;
    line-height: 1.45;
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ====================================================== ≥768px (tablet
   and up): cards become picture cards again ============================= */
@media (min-width: 768px) {
    .aj-title { font-size: 1.85rem; }
    .aj-sub { font-size: 1rem; }

    /* Tabs wrap onto multiple rows from here up, so there is nothing to
       scroll and no chevron to show. */
    .aj-tabs-scroller {
        margin-left: 0;
        margin-right: 0;
        padding-right: 0;
        border-bottom: 1px solid var(--aj-line);
    }
    .aj-tabs-scroller::after {
        display: none;
    }
    .aj-tabs {
        -webkit-mask-image: none;
        mask-image: none;
        flex-wrap: wrap;
        overflow: visible;
        padding: 0 0 0.9rem;
    }

    /* Desktop keeps the single horizontal filter row it always had. The popup
       is flattened back into the flow — same markup, same form controls, no
       duplication — and the button that opens it is hidden. */
    /* The sheet is a normal block here — nothing to flatten, nothing to
       override. Only the button that opens it is hidden. */
    .aj-filter-toggle { display: none; }
    .aj-filter-sheet {
        display: block !important;
        flex: 1 1 420px;
    }
    .aj-sheet-body {
        flex-direction: row;
        align-items: flex-end;
        gap: 0.6rem 1.25rem;
    }
    .aj-filter-selects {
        flex: 1 1 340px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.6rem 1.25rem;
    }
    .aj-filter-group { flex: 0 1 auto; }
    .aj-filter-label { font-size: 0.66rem; }
    .aj-chip span { min-height: 34px; padding: 0.28rem 0.7rem; font-size: 0.8rem; }
    .aj-filter-actions { flex: 0 0 auto; }
    .aj-filter-actions .aj-btn { flex: 0 0 auto; }
    .aj-filterbar-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem 1rem;
    }
    /* Search takes a sensible share instead of stretching across the row and
       leaving the filters stranded at the far edge. */
    .aj-search-row { flex: 1 1 300px; max-width: 420px; }
    .aj-search-wrap { flex: 1 1 auto; }
    .aj-filter-actions { flex: 0 0 auto; }
    .aj-filter-actions .aj-btn { flex: 0 0 auto; }

    /* Same card as mobile, just laid out in columns and scaled up — one
       design that flexes with the viewport rather than two to maintain. */
    .aj-grid {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 1rem;
    }
    .aj-card:hover { transform: translateY(-3px); }
    .aj-card:not(.aj-card-user) {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        column-gap: 0.9rem;
        padding: 1.1rem;
    }
    .aj-card:not(.aj-card-user) .aj-card-media {
        width: 56px;
        height: 56px;
        flex: 0 0 56px;
    }
    .aj-card:not(.aj-card-user) .aj-card-initials { font-size: 1.15rem; }
    .aj-badge { font-size: 0.7rem; padding: 0.18rem 0.55rem; }
    .aj-card-cat { font-size: 0.68rem; padding: 0.18rem 0.55rem; }
    .aj-card-title { font-size: 1.08rem; }
    .aj-card-business { font-size: 0.9rem; }
    .aj-card-loc { font-size: 0.82rem; }
    .aj-card-pay { font-size: 0.82rem; max-width: 8rem; }
    .aj-card-foot { font-size: 0.8rem; }

    /* People cards keep their own shape; circular avatar to match */
    .aj-card-user .aj-card-media {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin-bottom: 0.6rem;
    }
    .aj-card-user .aj-card-initials { font-size: 1.35rem; }
    .aj-user-about { -webkit-line-clamp: 3; line-clamp: 3; font-size: 0.85rem; }

    .aj-empty { padding: 4rem 1rem; }
    .aj-empty-title { font-size: 1.25rem; }
}

/* ==========================================================================
   PHONES ONLY (≤767.98px) — text-forward card treatment.

   Everything in this block is scoped to the phone breakpoint, so the tablet
   and desktop rules above are untouched. Light mode, and the same palette as
   the rest of the page: #017bfe primary, #212529 ink, #6c757d muted,
   #e3e7eb / #f1f3f5 lines. No new colours.
   ========================================================================== */
@media (max-width: 767.98px) {

    /* ---- Header: big title, count underneath, like the reference ---- */
    .aj-header { margin-bottom: 0.85rem !important; }
    .aj-title {
        font-size: 1.75rem;
        font-weight: 800;
        letter-spacing: -0.02em;
    }
    .aj-sub { font-size: 0.88rem; }

    /* ---- Filter sheet becomes a centred overlay ----
       Bootstrap's collapse toggles .show; these rules turn the shown panel
       into a dialog. No .modal class involved, so header.css has nothing to
       override. */
    .aj-filter-sheet.show,
    .aj-filter-sheet.collapsing {
        position: fixed;
        inset: 0;
        z-index: 1055;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        height: auto !important;
        background: rgba(20, 39, 78, 0.45);
    }
    /* The height animation makes no sense for a fixed overlay */
    .aj-filter-sheet.collapsing {
        transition: none !important;
    }
    .aj-filter-sheet.show .aj-sheet-panel {
        width: 100%;
        max-width: 420px;
        max-height: 85vh;
        overflow-y: auto;
        background: var(--aj-surface);
        border-radius: 16px;
    }
    .aj-filter-sheet.show .aj-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 1rem;
        border-bottom: 1px solid var(--aj-line);
    }
    .aj-sheet-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--aj-ink);
    }
    .aj-sheet-close {
        border: 0;
        background: none;
        font-size: 1.5rem;
        line-height: 1;
        color: var(--aj-muted);
        cursor: pointer;
        padding: 0 0.25rem;
    }
    .aj-filter-sheet.show .aj-sheet-body {
        padding: 1rem 1rem 1.15rem;
    }

    /* ---- Filter panel: flat, no card chrome, pill controls ---- */
    .aj-filterbar {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin-bottom: 1rem !important;
    }
    /* White field with a hairline border, paired with the filter button */
    .aj-search {
        height: 46px;
        border-radius: 12px;
        background: var(--aj-surface);
        border-color: var(--aj-line);
    }
    .aj-filter-toggle {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        border-color: var(--aj-line);
    }
    .aj-select {
        height: 40px;
        border-radius: 999px;
        font-size: 0.85rem;
        padding: 0 1.9rem 0 0.85rem;
        background-position:
            calc(100% - 15px) calc(50% + 1px),
            calc(100% - 10px) calc(50% + 1px);
    }
    .aj-filter-actions .aj-btn {
        height: 40px;
        border-radius: 999px;
        font-size: 0.88rem;
    }

    .aj-result-meta { margin-bottom: 0.6rem !important; font-size: 0.82rem; }

    /* ---- Cards: no thumbnail, text-forward, generous rounding ---- */
    .aj-grid { gap: 0.65rem; }
    .aj-card {
        flex-direction: column;
        gap: 0;
        padding: 0.95rem 1rem;
        border-radius: 16px;
    }
    .aj-card-user .aj-card-media {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
        margin-bottom: 0.6rem;
    }
    .aj-card-user .aj-card-initials { font-size: 1.25rem; }

    /* (1) Tighter vertical rhythm — the eyebrow, title, company and facts
       sit closer together so the card reads as one block. */
    .aj-card-cat {
        font-size: 0.62rem;
        letter-spacing: 0.06em;
    }
    .aj-card-title {
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.26;
        margin-bottom: 0.08rem;
    }
    .aj-card-business {
        font-size: 0.86rem;
        margin-bottom: 0.5rem;
    }

    /* (3) Softer chips. Solid #495057 read as a heavy black slug next to the
       text. These are tints built from colours already in this file
       (#f1f3f5 / #f2f7fd grounds, #495057 / #017bfe / #0d6efd text) — no
       new colour is introduced. */
    .aj-badge {
        font-size: 0.65rem;
        padding: 0.18rem 0.5rem;
        letter-spacing: 0.02em;
        font-weight: 700;
        background: #f1f3f5;
        color: var(--aj-body);
    }
    .aj-badge-on-site { background: #f1f3f5; color: #495057; }
    .aj-badge-remote  { background: #f2f7fd; color: #017bfe; }
    .aj-badge-hybrid  { background: #f2f7fd; color: #0d6efd; }

    /* ---- Pagination reads as a single quiet strip ---- */
    .aj-pagination { gap: 0.3rem; }
    .aj-pagination .aj-page {
        min-width: 40px;
        height: 40px;
        font-size: 0.86rem;
    }

    .aj-empty { border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .aj-card,
    .aj-btn,
    .aj-tab,
    .aj-pagination .aj-page {
        transition: none;
    }
    .aj-card:hover { transform: none; }
    .aj-tabs { scroll-behavior: auto; }
    .aj-tabs-scroller::after { animation: none; }
}