/* Jobs module styles. Mirrors meets layout (sidebar + main content) and uses
   the same color tokens (rgb(36,54,70) header, #2196F3 accent, #f5f5f5 panels).
   Listing rows on the right (.jl-*) use an editorial sport-journal aesthetic. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ===== Layout (mirrors /meets/) ===== */
.main-layout-container {
    display: flex;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}
.sidebar-filter {
    width: 380px;
    flex-shrink: 0;
}
.main-content {
    flex: 1;
    min-width: 0;
}
/* Sidebar collapses to a single column at the desktop-narrow threshold so
   results never feel cramped beside the filter rail. 1024px is the breakpoint
   the rest of the module standardizes on (1.14). */
@media (max-width: 1024px) {
    .main-layout-container { flex-direction: column; padding: 10px; }
    .sidebar-filter { width: 100%; }
}

/* ============================================
   SIDEBAR — copied from /meets/includes/meets_css.css
   Keep visually identical to meets so the two
   directories feel like sibling tools.
   ============================================ */

/* Sidebar — editorial-publication aesthetic to match the right column.
   Uses the same Fraunces / DM Sans / JetBrains Mono stack and the
   --jl-* color tokens defined further down. */

.sidebar-search {
    background: #f5f5f4;
    border: 1px solid #e6e1d2;
    border-radius: 0;
    overflow: hidden;
    padding: 0 !important;
}

.sidebar-quick-actions {
    margin-top: 18px;
    background: #f5f5f4;
    border: 1px solid #e6e1d2;
    border-radius: 0;
    padding: 0;
}

.quick-actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px;
}

.btn-sidebar-action {
    width: 100%;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e6e1d2;
    color: #1a1f2e;
    cursor: pointer;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: left;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.btn-sidebar-action + .btn-sidebar-action { border-top: 0; }
.btn-sidebar-action:hover {
    background: #f4ede0;
    border-color: #1a1f2e;
    color: #243646;
}

.sidebar-header {
    background: #1a1f2e;
    color: #faf8f3;
    padding: 14px 18px;
    text-align: left;
    border-bottom: 2px solid #1a1f2e;
}
.sidebar-header h3 {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 48;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.01em;
    line-height: 1;
}
.sidebar-quick-actions .sidebar-header h3 {
    font-size: 18px;
}

.sidebar-sections {
    padding: 4px 0 0 0 !important;
    margin-bottom: 0 !important;
}

/* Master category toggle (Jobs / Resumes) — promoted to a strong
   tab-style control directly under the Filter header. */
.sidebar-master-toggle {
    padding: 16px 14px;
    border-bottom: 1px solid #e6e1d2;
    background: #fff;
}
.sidebar-master-toggle .jobs-pill-group {
    width: 100%;
    background: transparent;
    border-radius: 0;
    padding: 0;
    border-bottom: 1px solid #e6e1d2;
    display: flex;
    gap: 0;
}
.sidebar-master-toggle .jobs-pill {
    flex: 1;
    padding: 10px 12px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: #8b93a4;
    cursor: pointer;
    transition: color 0.18s, border-color 0.18s;
    text-align: center;
}
.sidebar-master-toggle .jobs-pill:hover { color: #243646; }
.sidebar-master-toggle .jobs-pill.active {
    background: transparent;
    color: #1a1f2e;
    border-bottom-color: #1a1f2e;
    box-shadow: none;
}

/* Favorites-only toggle — sits below the Sort By section. */
.sidebar-section-favorites {
    padding: 14px 18px;
}
.sidebar-section-favorites .sidebar-favorites-toggle {
    margin-top: 0;
}

.sidebar-favorites-toggle {
    appearance: none;
    width: 100%;
    margin-top: 12px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e6e1d2;
    color: #4a5263;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.sidebar-favorites-toggle:hover {
    border-color: #1a1f2e;
    color: #1a1f2e;
}
.sidebar-favorites-toggle.is-active {
    background: #1a1f2e;
    border-color: #1a1f2e;
    color: #faf8f3;
}
.sidebar-favorites-toggle.is-active .sidebar-fav-glyph { color: #c09028; }
.sidebar-fav-glyph {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    line-height: 1;
}

#jobsSearchForm {
    margin: 0;
    padding: 0;
}

/* Sections — hairline-rule dividers, no rounded panels. */
.sidebar-section {
    background: transparent;
    border-radius: 0;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid #e6e1d2;
}
.sidebar-section:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}
.sidebar-section.collapsed { border: 0; border-bottom: 1px solid #e6e1d2; background: transparent; }
.sidebar-section.collapsed .section-header { border: 0; border-radius: 0; }

.section-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 12px 18px;
    background: transparent;
    cursor: pointer;
    user-select: none;
    transition: background 0.18s;
}
.section-header:hover { background: #f4ede0; }
.section-header h4 {
    margin: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #1a1f2e;
}
.section-toggle {
    font-size: 9px;
    color: #8b93a4;
    transition: transform 0.18s;
    margin-right: 10px;
    flex-shrink: 0;
}
.section-content { padding: 4px 18px 16px 18px; }
.section-content.collapsed { display: none; }

.sidebar-input,
.sidebar-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e6e1d2;
    border-radius: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    background: #fff;
    box-sizing: border-box;
    color: #1a1f2e;
}
.sidebar-input:focus,
.sidebar-select:focus {
    outline: none;
    border-color: #1a1f2e;
    box-shadow: 0 0 0 2px rgba(36, 54, 70, 0.1);
}

.sidebar-field { margin-bottom: 12px; }
.sidebar-field:last-child { margin-bottom: 0; }
.sidebar-label {
    display: block;
    margin-bottom: 6px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4a5263;
}

/* Subscribe / clear action block at the bottom of the filter panel. */
.sidebar-action-block {
    padding: 16px 18px 18px;
    background: #fff;
    border-top: 1px solid #e6e1d2;
}
.sidebar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.sidebar-btn-primary {
    background: #1a1f2e;
    color: #faf8f3;
    border: 1px solid #1a1f2e;
}
.sidebar-btn-primary:hover {
    background: #243646;
    border-color: #243646;
}
.sidebar-btn-glyph {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    margin-top: -2px;
}
.sidebar-btn-ghost {
    background: transparent;
    color: #4a5263;
    border: 1px solid #e6e1d2;
    margin-top: 6px;
}
.sidebar-btn-ghost:hover {
    background: #f4ede0;
    border-color: #1a1f2e;
    color: #1a1f2e;
}
.sidebar-action-status {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: #4a5263;
    text-align: center;
    min-height: 14px;
    margin: 8px 0 6px;
}

/* Quick-actions glyph (the + on Post a Listing). */
.btn-sidebar-glyph {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: 14px;
    color: #243646;
    margin-right: 4px;
}

/* Discipline tree — server-rendered (mirrors meets) */
.sidebar-disciplines-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 360px;
    overflow-y: auto;
}
.discipline-tree-item {
    display: flex;
    flex-direction: column;
    margin-top: 1px;
    margin-bottom: 1px;
}
/* Indentation cascades via the nested `.subdisciplines-container` wrapper —
   each nesting level adds 10px, so it keeps stepping deeper regardless of
   how many levels the tree has. See `.subdisciplines-container` below. */
.discipline-tree-item.level-0 { margin-left: 0; }
.discipline-row {
    display: flex;
    align-items: center;
    margin-bottom: 1px;
}
.sidebar-discipline {
    flex: 1;
    padding: 5px 12px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    border-radius: 0;
    border: 1px solid #e6e1d2;
    background: #fff;
    color: #1a1f2e;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    margin-left: 4px;
    min-width: 0;
}
.sidebar-discipline:hover {
    border-color: #1a1f2e;
    background: #f4ede0;
}
.sidebar-discipline.selected {
    background: #243646;
    color: #faf8f3;
    border-color: #243646;
}
.sidebar-discipline.selected:hover {
    background: #1a1f2e;
    color: #faf8f3;
    border-color: #1a1f2e;
}
.discipline-expand-toggle {
    width: 16px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    font-size: 10px;
    transition: transform 0.3s;
    user-select: none;
    flex-shrink: 0;
}
.discipline-expand-toggle:hover { color: #333; }
.discipline-no-toggle {
    width: 16px;
    height: 20px;
    display: inline-block;
    flex-shrink: 0;
}
.subdisciplines-container {
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    margin-left: 10px;
}

/* Flat (non-tree) multi-select pill list — used for Employment options.
   Visually matches .sidebar-discipline so the sidebar feels uniform. */
.sidebar-flat-pills {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sidebar-flat-pill {
    padding: 6px 12px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 0;
    border: 1px solid #e6e1d2;
    background: #fff;
    color: #1a1f2e;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    user-select: none;
    text-align: center;
}
.sidebar-flat-pill:hover {
    border-color: #1a1f2e;
    background: #f4ede0;
}
.sidebar-flat-pill.selected {
    background: #243646;
    color: #faf8f3;
    border-color: #243646;
}
.sidebar-flat-pill.selected:hover {
    background: #1a1f2e;
    color: #faf8f3;
    border-color: #1a1f2e;
}

/* Single-select variant — when one pill is selected, hide the rest. The
   selected pill stays visible (with a small × hint) and a "change" button
   below the group lets the user clear the selection. */
.sidebar-flat-pills.is-single-select.has-selection .sidebar-flat-pill:not(.selected) {
    display: none;
}
.sidebar-flat-pills.is-single-select.has-selection .sidebar-flat-pill.selected::after {
    content: " ×";
    margin-left: 6px;
    opacity: 0.65;
    font-weight: 400;
}
.sidebar-flat-clear {
    appearance: none;
    width: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    background: transparent;
    border: 1px dashed #cdc4ad;
    color: #4a5263;
    cursor: pointer;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.sidebar-flat-clear:hover {
    border-color: #1a1f2e;
    color: #1a1f2e;
    background: #f4ede0;
}

/* Disciplines flow as a nested continuation of the selected category pill —
   no separator, no label, just an indent + branch line so the tree reads as
   the category's children. The list is only made visible by JS once a
   category is picked, so the indent rules apply unconditionally. */
#sidebar-disciplines-list {
    margin: 6px 0 0 6px;
    padding-left: 14px;
    border-left: 1px solid #e6e1d2;
}

/* Top-level-only constraint — when the search/form is in Broad mode (or no
   category selected), hide expand toggles and any nested discipline children
   so the tree behaves like a flat list of venue types. */
.sidebar-disciplines-list.top-level-only .discipline-expand-toggle,
.sidebar-disciplines-list.top-level-only .discipline-no-toggle,
.sidebar-disciplines-list.top-level-only .subdisciplines-container {
    display: none !important;
}
.sidebar-disciplines-list.top-level-only .discipline-tree-item {
    margin-left: 0 !important;
}
.jobs-discipline-tree.top-level-only .jobs-tree-expander,
.jobs-discipline-tree.top-level-only .jobs-tree-children,
.jobs-discipline-tree.top-level-only .jobs-tree-opts {
    display: none !important;
}
.jobs-discipline-tree.top-level-only .jobs-tree-node {
    padding-left: 0 !important;
}

/* ============================================================
   Form category + discipline picker (postJob.php / myResume.php)
   ============================================================
   The selected category pill is the masthead — heavier weight + size,
   filled navy, with the per-category description rendered as Fraunces
   italic just beneath it. Its discipline rows below are visually quieter:
   the row itself is the bordered container, the discipline label fills it,
   and the Required/Preferred dropdown sits inline at the right edge with
   a hairline divider. After the disciplines, a 2px navy rule plus generous
   margin creates a clean "this category, done — here's the rest" break
   before the next unselected category pill. */

.form-cat-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}
.form-cat-row + .form-cat-row { margin-top: 4px; }

/* Category headers (form picker). A row: [▸ arrow] LABEL. Clicking the line
   selects/deselects the category (no checkbox — the row is the toggle) and
   auto-opens it; the left arrow only shows/hides the children. Hover is a pale
   navy wash; selection fills solid navy. */
#form-job-category-pills .sidebar-flat-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 11px 16px;
    font-size: 12px;
    letter-spacing: 0.16em;
    cursor: pointer;
}
#form-job-category-pills .form-cat-label { flex: 1; }
#form-job-category-pills .form-cat-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    /* Bleed into the header's 11px vertical + 16px left padding so the whole
       left block is one tall, easy arrow target that won't fall through to the
       row (which toggles selection). */
    margin: -11px 2px -11px -16px;
    padding: 11px 0 11px 16px;
    font-size: 16px;
    line-height: 1;
    color: var(--jl-ink-muted);
    cursor: pointer;
}
#form-job-category-pills .form-cat-arrow::before { content: "\25B8"; }              /* ▸ collapsed */
#form-job-category-pills .form-cat-row.is-open .form-cat-arrow::before { content: "\25BE"; }  /* ▾ open */

#form-job-category-pills .sidebar-flat-pill:hover {
    background: rgba(36, 54, 70, 0.08);
    border-color: var(--jl-accent);
    color: var(--jl-ink);
}
#form-job-category-pills .form-cat-row.selected > .sidebar-flat-pill {
    font-weight: 700;
    background: var(--jl-accent);
    border-color: var(--jl-accent);
    color: #faf8f3;
    box-shadow: inset 0 -2px 0 0 var(--jl-emp-seasonal);
}
#form-job-category-pills .form-cat-row.selected > .sidebar-flat-pill:hover {
    background: var(--jl-ink);
    border-color: var(--jl-ink);
    color: #faf8f3;
}
#form-job-category-pills .form-cat-row.selected .form-cat-arrow { color: #faf8f3; }

/* Tree wrap — the disciplines sit inside an indented warm-cream nested area
   that reads as the "body" of the selected category pill above. The pill's
   gold underline becomes the visual hand-off into the gray area beneath.
   The gray fill + left indent does the section-termination work that the
   2px navy rule used to do. */
.form-cat-tree-wrap {
    display: none;   /* revealed only when its category header is open (accordion) */
    margin: 0 0 16px 0;
    padding: 16px 22px 18px 28px;
    background: var(--jl-bg-warm);
    border: 0;
}
.form-cat-row.is-open > .form-cat-tree-wrap { display: block; }
.form-cat-tree-wrap .jobs-discipline-tree {
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    margin: 0;
}

/* Each discipline row — the .jobs-tree-row is now the bordered container,
   so the Required/Preferred select can sit inside the row at the right
   edge instead of floating outside it. */
.form-cat-tree-wrap .jobs-tree-node { padding: 0; }
.form-cat-tree-wrap .jobs-tree-node + .jobs-tree-node { margin-top: 3px; }

.form-cat-tree-wrap .jobs-tree-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    transition: background 0.15s ease;
}
.form-cat-tree-wrap .jobs-tree-row:hover { background: rgba(36, 54, 70, 0.06); }

/* Expand chevron — a small muted glyph inside the row (no divider, no separate
   hover cell). Leaf rows keep the width via the hidden spacer so labels stay
   aligned, with no dead cell since the whole row is one hover surface. */
.form-cat-tree-wrap .jobs-tree-expander {
    width: 24px;
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jl-ink-muted);
    font-size: 8px;
    cursor: pointer;
    user-select: none;
    border: 0;
    background: transparent;
    transition: color 0.15s ease;
}
.form-cat-tree-wrap .jobs-tree-expander:hover { color: var(--jl-ink); background: transparent; }

/* Left arrow (▸/▾): shows/hides a node's children only — never selects. Leaf
   nodes get an invisible spacer so labels stay aligned. */
.form-cat-tree-wrap .jobs-tree-arrow {
    flex-shrink: 0;
    width: 30px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--jl-ink-muted);
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}
.form-cat-tree-wrap .jobs-tree-arrow:hover { color: var(--jl-ink); }
.form-cat-tree-wrap .jobs-tree-arrow::before { content: "\25B8"; }   /* ▸ collapsed */
.form-cat-tree-wrap .jobs-tree-node.is-open > .jobs-tree-row > .jobs-tree-arrow::before { content: "\25BE"; }  /* ▾ open */
.form-cat-tree-wrap .jobs-tree-arrow.is-spacer { cursor: default; }
.form-cat-tree-wrap .jobs-tree-arrow.is-spacer::before { content: ""; }

/* The discipline label — clicking it selects/deselects the node. No checkbox;
   the row's own styling carries the selected state. */
.form-cat-tree-wrap .jobs-tree-pill {
    flex: 1;
    padding: 8px 12px;
    text-align: left;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--jl-ink);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    user-select: none;
}
/* Neutralize the sidebar tree's navy/tan pill fills — in the form the ROW owns
   the background. */
.form-cat-tree-wrap .jobs-tree-pill:hover,
.form-cat-tree-wrap .jobs-tree-node.selected > .jobs-tree-row > .jobs-tree-pill,
.form-cat-tree-wrap .jobs-tree-node.selected > .jobs-tree-row > .jobs-tree-pill:hover {
    background: transparent;
    border: 0;
    color: var(--jl-ink);
}
/* Selected discipline: clear tint + bold + a navy left accent bar (stands in
   for the removed checkbox). */
.form-cat-tree-wrap .jobs-tree-node.selected > .jobs-tree-row {
    background: rgba(36, 54, 70, 0.10);
    box-shadow: inset 3px 0 0 0 var(--jl-accent);
}
.form-cat-tree-wrap .jobs-tree-node.selected > .jobs-tree-row > .jobs-tree-pill { font-weight: 700; }

/* Children revealed when the node is open (arrow ▾), independent of selection. */
.form-cat-tree-wrap .jobs-tree-node > .jobs-tree-children { display: none; }
.form-cat-tree-wrap .jobs-tree-node.is-open > .jobs-tree-children { display: block; margin-top: 3px; }

/* Breadcrumb summary of the terminal picks, below the category trees. */
.jobs-comp-summary {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--jl-bg-warm);
    border: 1px solid var(--jl-hairline);
    border-radius: 10px;
}
.jobs-comp-summary-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
    margin-bottom: 10px;
}
.jobs-comp-crumb {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--jl-ink);
    padding: 4px 0;
}
.jobs-comp-crumb + .jobs-comp-crumb { border-top: 1px solid var(--jl-hairline); }
.jobs-comp-crumb .jobs-comp-sep { color: var(--jl-ink-muted); margin: 0 2px; }
/* The final segment (the leaf picks) reads as the emphasis of each crumb. */
.jobs-comp-crumb { font-weight: 500; }

/* Inline radius/zip group inside sections */
.sidebar-radius-group-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.sidebar-zip-input-small {
    width: 64px;
    padding: 6px 8px;
    border: 1px solid #e6e1d2;
    border-radius: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    text-align: center;
    box-sizing: border-box;
    background: #fff;
    color: #1a1f2e;
}
.sidebar-radius-input-small {
    width: 48px;
    padding: 6px 8px;
    border: 1px solid #e6e1d2;
    border-radius: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    text-align: center;
    box-sizing: border-box;
    background: #fff;
    color: #1a1f2e;
}
.sidebar-zip-input-small:focus,
.sidebar-radius-input-small:focus {
    outline: none;
    border-color: #1a1f2e;
}
.radius-label-small {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4a5263;
    white-space: nowrap;
}

/* ===== Inputs (used in postJob/myResume forms + jobDetails contact form) =====
   Editorial: hairline border, square corners, navy focus ring. */
.jobs-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--jl-hairline);
    border-radius: 0;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
    background: var(--jl-bg-canvas);
    color: var(--jl-ink);
    font-family: 'DM Sans', system-ui, sans-serif;
    transition: border-color var(--jl-motion), box-shadow var(--jl-motion);
}
.jobs-input::placeholder { color: var(--jl-ink-muted); }
.jobs-input:hover { border-color: color-mix(in srgb, var(--jl-ink) 50%, var(--jl-hairline)); }
.jobs-input:focus {
    outline: none;
    border-color: var(--jl-ink);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--jl-accent) 18%, transparent);
}
.jobs-input:disabled {
    background: var(--jl-bg-warm);
    color: var(--jl-ink-muted);
    cursor: not-allowed;
}
textarea.jobs-input { resize: vertical; min-height: 90px; }
.jobs-row { display: flex; gap: 8px; }

/* ===== Buttons =====
   Editorial navy / square / hairline (1.14). Primary is filled navy;
   ghost is hairline; danger is muted brick. No drop shadows, no translate
   bounce — matches the .my-listings-actionbar-primary vocabulary used
   on the dashboard. */
.jobs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--jl-motion), border-color var(--jl-motion), color var(--jl-motion);
    text-align: center;
    white-space: nowrap;
}
.jobs-btn:hover { text-decoration: none; }
.jobs-btn:focus-visible {
    outline: 2px solid var(--jl-accent);
    outline-offset: 2px;
}
.jobs-btn:disabled,
.jobs-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}
.jobs-btn-primary {
    background: var(--jl-ink);
    color: #faf8f3;
    border-color: var(--jl-ink);
}
.jobs-btn-primary:hover {
    background: var(--jl-accent);
    border-color: var(--jl-accent);
    color: #faf8f3;
}
.jobs-btn-ghost {
    background: transparent;
    color: var(--jl-ink);
    border-color: var(--jl-ink);
}
.jobs-btn-ghost:hover {
    background: var(--jl-ink);
    border-color: var(--jl-ink);
    color: #faf8f3;
}
.jobs-btn-danger {
    background: transparent;
    color: #b3261e;
    border-color: color-mix(in srgb, #b3261e 50%, transparent);
}
.jobs-btn-danger:hover {
    background: #b3261e;
    border-color: #b3261e;
    color: #faf8f3;
}
.jobs-btn-small {
    padding: 6px 12px;
    font-size: 10.5px;
    letter-spacing: 0.12em;
}
.jobs-btn-glyph {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
    margin-top: -2px;
}

/* ===== Pill toggles ===== */
.jobs-pill-group {
    display: inline-flex;
    background: #e0e0e0;
    border-radius: 22px;
    padding: 3px;
    flex-wrap: wrap;
    gap: 0;
}
.jobs-pill {
    padding: 6px 16px;
    border: none;
    border-radius: 19px;
    background: transparent;
    color: #555;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    font-family: inherit;
}
.jobs-pill.active {
    background: #243646;
    color: #faf8f3;
    box-shadow: none;
}

/* ===== Discipline tree ===== */
.jobs-discipline-tree {
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px;
    font-size: 13px;
}
.jobs-tree-node { padding: 2px 0; }
.jobs-tree-node > .jobs-tree-children { display: none; }
.jobs-tree-node.expanded > .jobs-tree-children { display: block; }
.jobs-tree-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
}
.jobs-tree-expander {
    cursor: pointer;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b93a4;
    font-size: 10px;
    user-select: none;
    flex-shrink: 0;
}
/* Form's discipline pills — full-row, editorial style mirroring the sidebar's
   .sidebar-discipline (white bg, hairline border, square corners, DM Sans).
   The rounded grey-pill look was carried over from the very first prototype
   and stuck around; this brings it in line with the rest of the module. */
.jobs-tree-pill {
    flex: 1;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 0;
    border: 1px solid #e6e1d2;
    background: #fff;
    color: #1a1f2e;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    user-select: none;
    min-width: 0;
}
.jobs-tree-pill:hover {
    background: #f4ede0;
    border-color: #1a1f2e;
}
.jobs-tree-node.selected > .jobs-tree-row > .jobs-tree-pill {
    background: #243646;
    color: #faf8f3;
    border-color: #243646;
}
.jobs-tree-node.selected > .jobs-tree-row > .jobs-tree-pill:hover {
    background: #1a1f2e;
    border-color: #1a1f2e;
    color: #faf8f3;
}
.jobs-tree-opts { font-size: 12px; }
.jobs-pref-select {
    font-size: 11px;
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid #ccc;
}
/* ===== Listing rows — editorial sport-journal aesthetic =====
   Hairline-divided horizontal rows (not cards). A 4px color rail on the left
   is keyed to employment_type, giving the column a visible rhythm of role
   types as you scroll. Title in Fraunces serif; pay set as a large numeral on
   the right; meta in JetBrains Mono small caps. */

:root {
    --jl-bg-warm:     #faf8f3;
    --jl-bg-canvas:   #ffffff;
    --jl-bg-hover:    #f4ede0;
    --jl-bg-stats:    #fbf8f1;
    --jl-ink:         #1a1f2e;
    --jl-ink-soft:    #4a5263;
    --jl-ink-muted:   #8b93a4;
    --jl-rule:        #1a1f2e;
    --jl-hairline:    #e6e1d2;
    --jl-accent:      #243646;

    --jl-emp-full_time: #243646;
    --jl-emp-part_time: #c7522a;
    --jl-emp-contract:  #6b7c32;
    --jl-emp-seasonal:  #c09028;
    --jl-emp-volunteer: #6b5da8;
    --jl-emp-remote:    #2a6f8e;
    --jl-emp-default:   #8b93a4;

    /* Motion (1.14) — three speeds the whole module uses. */
    --jl-motion-fast: 0.12s;
    --jl-motion:      0.18s;
    --jl-motion-slow: 0.3s;
}

/* ============================================================
   Shared primitives (1.14) — added by the module-wide UI
   consolidation pass. These components replace one-off inline
   styles and ad-hoc card / callout / empty-state markup that
   used to live on each page. Composable with the editorial
   `.jl-*`, `.jd-*`, and `.my-listings-*` vocabularies.

   Breakpoint ladder (settled in 1.14):
     ≤ 480px   mobile
     ≤ 768px   tablet
     ≤ 1024px  desktop-narrow / sidebar-collapse threshold
   ============================================================ */

/* ----- Page header: editorial left-aligned title + optional subtitle on
   a hairline-bottom rule. Used by every page in the module. Default
   max-width matches index's `.main-layout-container` so the masthead
   spans the page chrome cleanly; consumer pages put the header inside
   a narrower wrapper (.jobs-page / .jd-wrap / .jobs-form-container)
   which constrains it visually. */
.jobs-page-header {
    max-width: 1400px;
    margin: 18px auto 22px;
    padding: 0 24px 18px;
    border-bottom: 1px solid var(--jl-hairline);
}
.jobs-page-header-eyebrow {
    margin: 0 0 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
}
.jobs-page-header > h1,
.jobs-page-header .jobs-page-header-title {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 48, 'SOFT' 30;
    font-weight: 500;
    font-size: clamp(26px, 3.4vw, 36px);
    line-height: 1.12;
    letter-spacing: -0.014em;
    color: var(--jl-ink);
}
.jobs-page-header > p,
.jobs-page-header .jobs-page-header-desc {
    margin: 10px 0 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--jl-ink-soft);
    max-width: 64ch;
}
.jobs-page-header > p strong,
.jobs-page-header .jobs-page-header-desc strong {
    color: var(--jl-ink);
    font-weight: 600;
}
.jobs-page-header > p a,
.jobs-page-header .jobs-page-header-desc a {
    color: var(--jl-accent);
    text-underline-offset: 3px;
}
.jobs-page-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.jobs-page-header-aside {
    flex-shrink: 0;
}

/* ----- Back-link (editorial: mono small-caps with hairline-on-hover).
   Promoted from `.my-listings-page .jobs-back-link` so every page
   gets the same treatment without a per-page override. */
.jobs-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
    text-decoration: none;
    padding: 4px 0;
    margin-bottom: 14px;
    border-bottom: 1px solid transparent;
    transition: color var(--jl-motion), border-color var(--jl-motion);
}
.jobs-back-link:hover {
    color: var(--jl-ink);
    text-decoration: none;
    border-bottom-color: var(--jl-ink);
}

/* ----- Empty / not-found state (bracketed by 2px navy rules, mirrors
   `.my-listings-empty` and `#jobs-results .jl-empty`). */
.jobs-empty-state {
    max-width: 720px;
    margin: 36px auto;
    border-top: 2px solid var(--jl-rule);
    border-bottom: 2px solid var(--jl-rule);
    padding: 64px 24px;
    text-align: center;
    background: var(--jl-bg-canvas);
}
.jobs-empty-state-heading {
    margin: 0 0 14px;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    color: var(--jl-ink);
}
.jobs-empty-state-body {
    margin: 0 auto;
    max-width: 48ch;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--jl-ink-soft);
}
.jobs-empty-state-body a { color: var(--jl-accent); text-underline-offset: 3px; }
.jobs-empty-state-sub {
    display: block;
    margin-top: 18px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
}
.jobs-empty-state-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}

/* ----- Inline callout panel (info / warning / danger). Replaces
   the inline-styled `background:#fdf6e3; border-left:3px solid…`
   blocks scattered through the resume privacy picker, status
   banners, and a few page headers. */
.jobs-callout {
    margin: 14px 0;
    padding: 12px 14px 12px 16px;
    border: 1px solid var(--jl-hairline);
    border-left-width: 3px;
    border-radius: 0;
    background: var(--jl-bg-warm);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--jl-ink);
}
.jobs-callout > :first-child { margin-top: 0; }
.jobs-callout > :last-child  { margin-bottom: 0; }
.jobs-callout strong { color: var(--jl-ink); font-weight: 600; }
.jobs-callout a { color: var(--jl-accent); text-underline-offset: 3px; }
.jobs-callout p { margin: 6px 0; }

.jobs-callout.is-info {
    border-left-color: var(--jl-accent);
    background: color-mix(in srgb, var(--jl-accent) 4%, var(--jl-bg-warm));
}
.jobs-callout.is-warning {
    border-left-color: var(--jl-emp-seasonal);
    background: color-mix(in srgb, var(--jl-emp-seasonal) 6%, var(--jl-bg-warm));
}
.jobs-callout.is-danger {
    border-left-color: #b3261e;
    background: color-mix(in srgb, #b3261e 4%, var(--jl-bg-warm));
}
.jobs-callout-eyebrow {
    display: block;
    margin-bottom: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
}
.jobs-callout.is-info    .jobs-callout-eyebrow { color: var(--jl-accent); }
.jobs-callout.is-warning .jobs-callout-eyebrow { color: var(--jl-emp-seasonal); }
.jobs-callout.is-danger  .jobs-callout-eyebrow { color: #b3261e; }

/* Callout-row — button + secondary hint on one line; wraps on mobile. */
.jobs-callout-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.jobs-callout-row > small {
    font-size: 12.5px;
    color: var(--jl-ink-soft);
    line-height: 1.4;
}

/* Status banner — full-width strip at the top of a page (e.g. "this
   listing is in `paused` status"). Variant of .jobs-callout. */
.jobs-status-banner {
    margin: 0;
    padding: 10px 24px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--jl-emp-seasonal) 40%, transparent);
    background: color-mix(in srgb, var(--jl-emp-seasonal) 8%, var(--jl-bg-warm));
    text-align: center;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    color: var(--jl-ink);
}
.jobs-status-banner strong {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jl-emp-seasonal);
}

/* ----- Card primitive (composable). Most existing card classes
   (.jl-row, .my-listings-table tr, .jobs-attach-card, etc.) keep
   their per-feature treatments; this is for the simpler pages that
   were rolling their own shadow+border combo (listingApplications,
   mySubscriptions, postSuccess). */
.jobs-card {
    background: var(--jl-bg-canvas);
    border: 1px solid var(--jl-hairline);
    border-radius: 0;
    padding: 18px 20px;
    transition: border-color var(--jl-motion), background var(--jl-motion);
}
.jobs-card.is-hoverable:hover {
    border-color: var(--jl-ink);
    background: var(--jl-bg-warm);
}
.jobs-card + .jobs-card { margin-top: 12px; }
.jobs-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--jl-hairline);
}
.jobs-card-head:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.jobs-card-title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 24;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.2;
    color: var(--jl-ink);
}
.jobs-card-meta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
}

/* ----- Section header (eyebrow + count + actions). Generic version of
   `.my-listings-actionbar`; use when introducing a list / table on
   any dashboard-style page. */
.jobs-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 4px 0 14px;
}
.jobs-section-header-title {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 36;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--jl-ink);
    line-height: 1.2;
}
.jobs-section-header-count {
    margin-left: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--jl-ink-muted);
}
.jobs-section-header-meta {
    margin: 6px 0 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--jl-ink-soft);
    max-width: 64ch;
}
.jobs-section-header-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* ----- Page body wrapper. Provides consistent max-width + horizontal
   padding for every non-index consumer page. Pages that need a wider
   container (directory.php) override max-width. */
.jobs-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4px 24px 60px;
    color: var(--jl-ink);
}

@media (max-width: 768px) {
    .jobs-page-header { padding: 0 16px 14px; margin: 14px auto 18px; }
    .jobs-page { padding: 4px 16px 50px; }
    .jobs-empty-state { padding: 48px 18px; margin: 24px auto; }
}

/* ----- Status pill (promoted from `.my-listings-table .jobs-status`).
   Same outlined-flat treatment, now usable anywhere. */
.jobs-status {
    display: inline-block;
    padding: 4px 10px 5px;
    border-radius: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    border: 1px solid currentColor;
    background: transparent;
    white-space: nowrap;
    text-align: center;
}
.jobs-status-active         { color: #2e7d32; }
.jobs-status-pending_review { color: #8a6d00; }
.jobs-status-pending        { color: #8a6d00; }
.jobs-status-paused         { color: #5a6470; }
.jobs-status-filled         { color: #6a1b9a; }
.jobs-status-draft          { color: #ad1457; }
.jobs-status-expired        { color: #c62828; }
.jobs-status-sent           { color: #2e7d32; }
.jobs-status-failed         { color: #c62828; }
.jobs-status-granted        { color: #2e7d32; }
.jobs-status-denied         { color: #c62828; }
.jobs-status-revoked        { color: #5a6470; }
.jobs-card-title + .jobs-status,
.jobs-card-title + .jobs-card-title-status {
    margin-left: 10px;
    vertical-align: middle;
}

/* ----- Criteria table (mySubscriptions) — small 2-col label/value list,
   editorial dashed-row vocabulary. */
.jobs-criteria-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'DM Sans', system-ui, sans-serif;
}
.jobs-criteria-table tr {
    border-bottom: 1px dashed var(--jl-hairline);
}
.jobs-criteria-table tr:last-child { border-bottom: 0; }
.jobs-criteria-table td {
    padding: 10px 0;
    vertical-align: top;
    font-size: 13.5px;
    color: var(--jl-ink);
}
.jobs-criteria-label {
    width: 180px;
    padding-right: 16px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
    white-space: nowrap;
}
.jobs-criteria-value {
    color: var(--jl-ink);
    line-height: 1.5;
    word-break: break-word;
}

/* ----- Inquiry message (listingApplications) — pre-wrap content block.
   Editorial paper-warm with a 3px accent left border. */
.jobs-inquiry-message {
    background: var(--jl-bg-warm);
    border-left: 3px solid var(--jl-accent);
    padding: 12px 14px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--jl-ink);
    white-space: pre-wrap;
    word-break: break-word;
}
.jobs-inquiry-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    color: var(--jl-ink-soft);
    margin-bottom: 10px;
}
.jobs-inquiry-meta a {
    color: var(--jl-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--jl-hairline);
    padding-bottom: 1px;
}
.jobs-inquiry-meta a:hover {
    color: var(--jl-ink);
    border-bottom-color: var(--jl-ink);
}

/* ----- Post-success "matches" panel. Same look as a .jobs-card but with
   a serif h2. The CTA underneath is bracketed by a hairline. */
.jobs-post-success-matches {
    background: var(--jl-bg-canvas);
    border: 1px solid var(--jl-hairline);
    border-top: 2px solid var(--jl-rule);
    padding: 22px 24px 24px;
    margin: 22px 0;
}
.jobs-post-success-matches > h2 {
    margin: 0 0 6px;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 36;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    color: var(--jl-ink);
}
.jobs-post-success-matches-lede {
    margin: 0 0 18px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--jl-ink-soft);
}
.jobs-post-success-cta {
    margin-top: 18px;
    text-align: center;
    padding-top: 18px;
    border-top: 1px dashed var(--jl-hairline);
}

#jobs-results {
    background: var(--jl-bg-canvas);
    border-top: 2px solid var(--jl-rule);
    border-bottom: 2px solid var(--jl-rule);
    margin-top: 4px;
}

#jobs-results .jl-empty,
#jobs-results .jl-loading {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    color: var(--jl-ink-soft);
    text-align: center;
    padding: 56px 24px;
    margin: 0;
}
#jobs-results .jl-empty small,
#jobs-results .jl-loading small {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
    margin-top: 10px;
}

.jl-row {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    align-items: stretch;
    padding: 22px 4px 22px 0;
    border-bottom: 1px solid var(--jl-hairline);
    text-decoration: none;
    color: inherit;
    background: transparent;
    transition: background-color 0.18s ease;
    position: relative;
    /* The site-wide <center> tag in includes/header.php would otherwise center
       block-level text inside the card. Force left alignment here. */
    text-align: left;
}
.jl-row:last-child { border-bottom: 0; }
.jl-row:hover {
    background: var(--jl-bg-hover);
    text-decoration: none;
}
.jl-row:hover .jl-rail { width: 6px; }
.jl-row:hover .jl-title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: var(--jl-ink);
}

.jl-rail {
    width: 4px;
    align-self: stretch;
    background: var(--jl-emp-default);
    transition: width 0.18s ease;
}
.jl-row[data-emp="full_time"] .jl-rail { background: var(--jl-emp-full_time); }
.jl-row[data-emp="part_time"] .jl-rail { background: var(--jl-emp-part_time); }
.jl-row[data-emp="contract"]  .jl-rail { background: var(--jl-emp-contract); }
.jl-row[data-emp="seasonal"]  .jl-rail { background: var(--jl-emp-seasonal); }
.jl-row[data-emp="volunteer"] .jl-rail { background: var(--jl-emp-volunteer); }
.jl-row[data-emp="remote"]    .jl-rail { background: var(--jl-emp-remote); }

.jl-content {
    padding: 0 28px 0 18px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Title band — soft neutral header masthead with star + title inline. */
.jl-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--jl-ink) 7%, transparent);
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 8px;
}

/* Favorite star — inline with the title. */
.jl-fav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 22px;
    line-height: 1;
    color: var(--jl-ink-muted);
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s, transform 0.12s, background 0.15s;
    flex-shrink: 0;
}
.jl-fav:hover { color: var(--jl-emp-seasonal); transform: scale(1.12); background: rgba(192, 144, 40, 0.08); }
.jl-fav:focus-visible { outline: 2px solid var(--jl-accent); outline-offset: 2px; }
.jl-fav.is-fav { color: var(--jl-emp-seasonal); }
.jl-fav.is-fav:hover { color: #a87a1c; }

.jl-cat-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jl-ink-soft);
    line-height: 1;
}
/* Category badge — primary classifier for the listing.
   Small DM Sans uppercase pill prefixed with a colored dot keyed off the
   category code. Lives in card cat-row (.jl-cat-row) and detail eyebrow
   (.jd-eyebrow) — same class, same look. */
.jl-cat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jl-ink);
    line-height: 1;
}
.jl-cat::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--jl-emp-default);
    flex-shrink: 0;
}
/* Overflow indicator: shown when a listing has more categories than the
   card displays. No colored dot — this is a counter, not a classifier. */
.jl-cat-more {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
    line-height: 1;
}

.jl-cat.jl-cat-coaching::before         { background: var(--jl-emp-full_time); }
.jl-cat.jl-cat-health_wellness::before  { background: #2a8b6e; }
.jl-cat.jl-cat-front_desk::before       { background: var(--jl-emp-part_time); }
.jl-cat.jl-cat-gym_management::before   { background: var(--jl-emp-seasonal); }
.jl-cat.jl-cat-camps_events::before     { background: var(--jl-emp-volunteer); }
.jl-cat.jl-cat-office_admin::before     { background: var(--jl-emp-remote); }
.jl-cat.jl-cat-marketing::before        { background: #c7407a; }
.jl-cat.jl-cat-facilities::before       { background: var(--jl-emp-contract); }

/* Inline pill that replaces the poster name in the org line for anonymous
   resumes. Sits naturally in the inline flow followed by the location text. */
.jl-anon-pill {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--jl-emp-volunteer) 22%, transparent);
    color: color-mix(in srgb, var(--jl-emp-volunteer) 85%, black);
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: 0.03em;
    line-height: 1.3;
    vertical-align: baseline;
}

.jl-title {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-variation-settings: 'opsz' 36, 'SOFT' 30;
    font-size: 22px;
    line-height: 1.18;
    letter-spacing: -0.012em;
    color: var(--jl-ink);
}

.jl-org {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--jl-ink-soft);
    margin-bottom: 8px;
    word-break: break-word;
}
.jl-org strong {
    color: var(--jl-ink);
    font-weight: 600;
}
.jl-org .jl-loc { color: var(--jl-ink-soft); }
.jl-org .jl-distance {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--jl-ink-muted);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    margin-left: 6px;
    padding: 1px 6px;
    background: rgba(26, 31, 46, 0.04);
    border-radius: 3px;
}

.jl-blurb {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--jl-ink-soft);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 62ch;
}

.jl-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 4px;
    text-align: right;
    min-width: 150px;
    padding: 0 4px 0 24px;
    margin-left: 24px;
}
/* Top cluster of the stats column (pay / hours+emp). Sits at the top of the
   column; .jl-stats-bottom uses `margin-top: auto` to bottom-anchor below. */
.jl-stats-top {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.jl-stats-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-top: auto;
}
.jl-pay {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-variation-settings: 'opsz' 24;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--jl-ink);
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.jl-pay-amt { white-space: nowrap; }
.jl-pay-unit {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
}
.jl-pay-unpaid .jl-pay-amt {
    font-style: italic;
    font-weight: 500;
    color: var(--jl-emp-volunteer);
    font-size: 18px;
}
.jl-pay-locked {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: var(--jl-ink-muted);
    letter-spacing: 0.02em;
}

.jl-hours {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--jl-ink-soft);
    letter-spacing: 0.02em;
}

.jl-time {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--jl-ink-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .jl-row {
        grid-template-columns: 4px minmax(0, 1fr);
        padding: 18px 4px 18px 0;
    }
    .jl-content { padding: 0 16px; }
    .jl-stats {
        grid-column: 2;
        margin-left: 0;
        padding: 12px 16px 0;
        border-top: 1px dashed var(--jl-hairline);
        margin-top: 12px;
        align-items: flex-start;
        text-align: left;
        min-width: 0;
    }
    /* On mobile, both stat clusters become full-width horizontal strips
       stacked vertically. */
    .jl-stats-top {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 14px;
        width: 100%;
    }
    .jl-stats-bottom {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 14px;
        margin-top: 8px;
        width: 100%;
    }
    .jl-cat-row {
        align-items: flex-start;
    }
}

/* ===== Badges + chips ===== */
.jobs-type-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.jobs-type-job { background: #e3f2fd; color: #1565c0; }
.jobs-type-resume { background: #f3e5f5; color: #6a1b9a; }
.jobs-featured-badge {
    background: #fff3cd;
    color: #5a4400;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}
.jobs-distance-badge {
    background: #f0f0f0;
    color: #555;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}
.jobs-meta-chip {
    background: #f0f0f0;
    color: #444;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}
.jobs-meta-chip-strong { background: #e8f5e9; color: #2e7d32; font-weight: 600; }
.jobs-event-chip {
    background: #e3f2fd;
    color: #1565c0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    margin-right: 4px;
    display: inline-block;
}
.jobs-pref-badge {
    background: #fff3cd;
    color: #5a4400;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    margin-left: 6px;
    text-transform: uppercase;
    font-weight: 700;
}

/* Legacy `.jobs-detail-*` / `.jobs-competencies` / `.jobs-login-gate` classes
   and the duplicate `.jobs-back-link` override were removed in 1.14 — the
   detail page uses `.jd-*` (defined later) and back-links use the editorial
   primitive at the top of this file. */

/* ===== Form — FAQ-style collapsible sections (1.14, refined) =====
   Each section is a <details> element. The <summary> shows the section
   title + a one-line summary of contents + a chevron. Clicking expands
   the body. Defaults: new forms render all sections open; edit forms
   render all closed so the user gets a scannable overview.

   Section anchors live on the <details> id so the form-rail nav targets
   the section; JS opens the <details> when a rail link is clicked. */
.jobs-form-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 4px 20px 60px;
}
.jobs-form { display: block; }

.jobs-fieldset {
    border: 0;
    border-top: 1px solid var(--jl-hairline);
    padding: 0;
    margin: 0;
    background: transparent;
}
.jobs-fieldset:first-of-type { border-top: 0; }

/* The <summary> is the clickable header. Native triangle is suppressed in
   favor of our own chevron. */
.jobs-fieldset > summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 4px;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) 24px;
    gap: 20px;
    align-items: baseline;
    transition: background var(--jl-motion), color var(--jl-motion);
    -webkit-tap-highlight-color: transparent;
}
.jobs-fieldset > summary::-webkit-details-marker { display: none; }
.jobs-fieldset > summary::marker { display: none; content: ''; }
.jobs-fieldset > summary:hover { background: var(--jl-bg-warm); }
.jobs-fieldset > summary:focus-visible {
    outline: 2px solid var(--jl-accent);
    outline-offset: -2px;
}

.jobs-fieldset-title {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 36, 'SOFT' 30;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    color: var(--jl-ink);
    letter-spacing: -0.012em;
}
.jobs-fieldset-title .req {
    color: #b3261e;
    font-size: 14px;
    vertical-align: super;
    margin-left: 2px;
}

.jobs-fieldset-summary-text {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13.5px;
    color: var(--jl-ink-soft);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.jobs-fieldset-summary-text strong {
    color: var(--jl-ink);
    font-weight: 600;
}
.jobs-fieldset-summary-empty { color: var(--jl-ink-muted); }

/* Chevron — rotates 90deg from "›" to "⌄" when section is open. */
.jobs-fieldset-chevron {
    display: inline-block;
    width: 16px;
    text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 18px;
    line-height: 1;
    color: var(--jl-ink-muted);
    transition: transform var(--jl-motion), color var(--jl-motion);
    align-self: center;
}
.jobs-fieldset-chevron::before { content: '›'; display: inline-block; }
.jobs-fieldset[open] > summary > .jobs-fieldset-chevron {
    color: var(--jl-ink);
    transform: rotate(90deg);
}
.jobs-fieldset > summary:hover .jobs-fieldset-chevron { color: var(--jl-ink); }

/* When closed, hide the summary's empty-dash if there's no content to summarize.
   Already-rendered ones get muted color via .jobs-fieldset-summary-empty. */

/* Body of the section — only rendered when <details> is open. The 4px
   padding-top sits the first child neatly under the summary's bottom edge. */
.jobs-fieldset-body {
    padding: 6px 4px 30px;
}

/* When opened, briefly fade in the body content so the expand feels deliberate. */
@keyframes jobsFieldsetReveal {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: none; }
}
.jobs-fieldset[open] > .jobs-fieldset-body {
    animation: jobsFieldsetReveal 0.22s ease-out;
}

/* Legacy <legend> styles kept (no-op for our <details>-based forms, but the
   moderation table or any direct <fieldset> uses still benefit). */
.jobs-fieldset legend {
    padding: 0;
    margin: 0 0 18px;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 36, 'SOFT' 30;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    color: var(--jl-ink);
    letter-spacing: -0.012em;
    display: block;
    width: auto;
}

@media (max-width: 768px) {
    .jobs-fieldset > summary {
        grid-template-columns: minmax(0, 1fr) 16px;
        grid-template-rows: auto auto;
        gap: 4px 12px;
        padding: 14px 4px;
    }
    .jobs-fieldset-title { grid-column: 1; grid-row: 1; }
    .jobs-fieldset-summary-text {
        grid-column: 1;
        grid-row: 2;
        text-align: left;
        white-space: normal;
    }
    .jobs-fieldset-chevron { grid-column: 2; grid-row: 1 / span 2; }
}
.jobs-form-group { margin-bottom: 14px; }
.jobs-form-group:last-child { margin-bottom: 0; }
.jobs-form-group > label {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
    margin-bottom: 6px;
}
.jobs-help {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12.5px;
    color: var(--jl-ink-soft);
    line-height: 1.5;
    margin: 4px 0 0;
}
.req { color: #b3261e; }
.jobs-form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--jl-hairline);
}

/* Form layout utilities (1.14) — replace per-row inline styles in
   renderJobForm / renderResumeForm. */
.jobs-row { gap: 8px; }
.jobs-row.is-tight  { gap: 6px; }
.jobs-row.is-spaced { margin-top: 12px; }
.jobs-row-sep {
    align-self: center;
    color: var(--jl-ink-soft);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
}
.jobs-form-group.is-spaced { margin-top: 14px; }
.jobs-form-group.is-flex   { flex: 1; min-width: 0; }
.jobs-form-group.is-160    { flex: 0 0 160px; }
.jobs-form-group.is-130    { flex: 0 0 130px; }
@media (max-width: 480px) {
    .jobs-form-group.is-160, .jobs-form-group.is-130 { flex-basis: auto; min-width: 0; }
}
.jobs-form-status {
    margin-left: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--jl-ink-soft);
    min-height: 14px;
}
.jobs-form-status.is-ok    { color: #2e7d32; }
.jobs-form-status.is-error { color: #b3261e; }
.jobs-form-hint {
    color: var(--jl-ink-muted);
    font-weight: 400;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12px;
}
.jobs-form-group.is-110   { flex: 0 0 110px; }
.jobs-form-group.is-120   { flex: 0 0 120px; }
.jobs-form-group.is-flex-2 { flex: 2 1 0; min-width: 0; }

/* ----- Dense form row (1.14) — used by the Compensation fieldset.
   Replaces the two-column "label + huge stretched input" pattern with
   a single flex-wrap row of naturally-sized controls. */
.jobs-dense-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 24px;
}
.jobs-dense-row .jobs-form-group {
    margin-bottom: 0;
    flex: 0 0 auto;
    min-width: 0;
}
.jobs-dense-row .jobs-form-group .jobs-help {
    margin-top: 6px;
    font-size: 12px;
}

/* Input width variants — every input gets a width that matches its semantic
   content. The default `.jobs-input` stays width: 100% (fills its container);
   these classes opt-out for short-content fields. */
.jobs-input.is-num {
    width: 88px;
    padding: 9px 8px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.jobs-input.is-year {
    width: 96px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.jobs-input.is-zip {
    width: 110px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.jobs-input.is-tel {
    width: 180px;
    font-variant-numeric: tabular-nums;
}
.jobs-input.is-name {
    width: 100%;
    max-width: 320px;
}
.jobs-input.is-email {
    width: 100%;
    max-width: 360px;
}
.jobs-input.is-city {
    width: 100%;
    max-width: 280px;
}

/* Compact select — sizes to its content rather than filling the row. */
.jobs-input.is-select-sm {
    width: auto;
    min-width: 140px;
    padding-right: 28px;
}
.jobs-input.is-select-xs {
    width: auto;
    min-width: 96px;
    padding-right: 26px;
}
/* Medium select — wide enough for one-line option labels, capped to avoid
   filling the whole row. */
.jobs-input.is-contact-mode {
    width: 100%;
    max-width: 380px;
}

/* Inline range — two narrow inputs flanked by an en-dash separator. */
.jobs-range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.jobs-range-sep {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--jl-ink-muted);
    letter-spacing: 0;
}
.jobs-range-prefix {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: var(--jl-ink-soft);
    font-weight: 500;
}

/* Inline variant of `.jobs-field-vis` — used inside .jobs-dense-row so a
   per-field visibility selector reads as just another control on the line
   instead of an isolated row below. */
.jobs-field-vis.is-inline {
    padding: 0;
    border: 0;
    background: transparent;
    margin: 0;
}
.jobs-field-vis.is-inline .jobs-field-vis-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    grid-template-columns: none;
}
.jobs-field-vis.is-inline .jobs-field-vis-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
}
.jobs-field-vis.is-inline .jobs-field-vis-current { display: none; }
.jobs-field-vis.is-inline select { min-width: 130px; padding-right: 26px; }

@media (max-width: 480px) {
    .jobs-dense-row { gap: 12px 14px; }
    .jobs-input.is-num { width: 78px; }
    .jobs-input.is-select-sm { width: 100%; min-width: 0; }
}
@media (max-width: 480px) {
    .jobs-form-group.is-110 { flex-basis: auto; }
}

/* ----- Resume page wrapper (1.14). Same vibe as `.jobs-page` but a touch
   wider so the form-layout's 200px rail + ~960px content fits cleanly. */
.jobs-resume-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4px 24px 0;
    color: var(--jl-ink);
}

/* ----- Resume form layout (1.14) — sticky-rail section nav on the left,
   form content on the right. Used only by renderResumeForm; postJob has
   a simpler single-column layout. */
.jobs-form-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
    margin: 0;
    padding: 8px 0 60px;
}
.jobs-form-rail {
    position: sticky;
    top: 16px;
    align-self: start;
    padding: 0;
}
.jobs-form-rail-eyebrow {
    margin: 0 0 12px 14px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
}
.jobs-form-rail ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--jl-hairline);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}
.jobs-form-rail li { margin: 0; padding: 0; }
.jobs-form-rail li a {
    display: block;
    padding: 7px 14px;
    border-left: 2px solid transparent;
    margin-left: -1px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--jl-ink-soft);
    text-decoration: none;
    line-height: 1.4;
    letter-spacing: 0.02em;
    transition: color var(--jl-motion), border-color var(--jl-motion), background var(--jl-motion);
}
.jobs-form-rail li a:hover { color: var(--jl-ink); background: var(--jl-bg-hover); }
.jobs-form-rail li.is-active a {
    color: var(--jl-ink);
    font-weight: 700;
    border-left-color: var(--jl-ink);
}

/* Sticky submit footer. Pinned to viewport bottom so the user never has to
   scroll to find Save / Submit. */
.jobs-form-actions.is-sticky {
    position: sticky;
    bottom: 0;
    background: color-mix(in srgb, var(--jl-bg-canvas) 95%, transparent);
    backdrop-filter: blur(4px);
    z-index: 5;
    margin: 24px 0 0;
    padding: 14px 0;
    border-top: 1px solid var(--jl-hairline);
}

/* Tablet — rail becomes a horizontal scroller above the form. */
@media (max-width: 1024px) {
    .jobs-form-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 8px 0 60px;
    }
    .jobs-form-rail {
        position: sticky;
        top: 0;
        z-index: 6;
        background: var(--jl-bg-canvas);
        padding: 8px 0 4px;
        border-bottom: 1px solid var(--jl-hairline);
        margin: 0 -8px;
    }
    .jobs-form-rail-eyebrow { display: none; }
    .jobs-form-rail ul {
        display: flex;
        gap: 0;
        overflow-x: auto;
        border-left: 0;
        max-height: none;
        scrollbar-width: thin;
    }
    .jobs-form-rail li a {
        padding: 8px 14px;
        border-left: 0;
        border-bottom: 2px solid transparent;
        margin: 0;
        white-space: nowrap;
    }
    .jobs-form-rail li.is-active a {
        border-bottom-color: var(--jl-ink);
        border-left-color: transparent;
    }
}
@media (max-width: 768px) {
    .jobs-resume-page { padding: 4px 16px 0; }
}

/* Inline validation (1.14). On submit + on-blur after first interaction,
   required fields with empty values pick up `.is-invalid` (set by JS). */
.jobs-input.is-invalid,
.jobs-form-group.is-invalid .jobs-input {
    border-color: #b3261e;
    box-shadow: 0 0 0 2px color-mix(in srgb, #b3261e 14%, transparent);
}
.jobs-field-error {
    display: block;
    margin-top: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: #b3261e;
}

/* ===== Resume privacy picker (1.12, refined minimal in 1.14) =====
   Three single-line strips. Selected strip gets a colored left rail.
   No background panel — sits flat on the section. */
.jobs-privacy-fieldset { background: transparent; }
.jobs-privacy-modes {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 14px;
    border-top: 1px solid var(--jl-hairline);
    border-bottom: 1px solid var(--jl-hairline);
    background: transparent;
}
.jobs-privacy-mode {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 11px 14px;
    background: transparent;
    cursor: pointer;
    transition: background var(--jl-motion);
    border: 0;
    border-bottom: 1px dashed var(--jl-hairline);
    border-left: 3px solid transparent;
}
.jobs-privacy-mode:last-child { border-bottom: 0; }
.jobs-privacy-mode:hover { background: var(--jl-bg-hover); }
.jobs-privacy-mode input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--jl-ink);
    align-self: center;
}
.jobs-privacy-mode-body {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 16px;
    flex: 1;
    line-height: 1.4;
}
.jobs-privacy-mode-body strong {
    color: var(--jl-ink);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;
    flex: 0 0 90px;
}
.jobs-privacy-mode-body .jobs-help {
    margin: 0;
    font-size: 13px;
    color: var(--jl-ink-soft);
    line-height: 1.45;
    flex: 1;
}

/* Selected mode — left rail in the role-color vocabulary. */
.jobs-privacy-fieldset[data-mode="public"]  .jobs-privacy-mode:has(input[value="public"]),
.jobs-privacy-fieldset[data-mode="partial"] .jobs-privacy-mode:has(input[value="partial"]),
.jobs-privacy-fieldset[data-mode="hidden"]  .jobs-privacy-mode:has(input[value="hidden"]) {
    background: var(--jl-bg-hover);
    border-left-color: var(--jl-ink);
}
.jobs-privacy-fieldset[data-mode="public"]  .jobs-privacy-mode:has(input[value="public"])  { border-left-color: var(--jl-emp-full_time); }
.jobs-privacy-fieldset[data-mode="partial"] .jobs-privacy-mode:has(input[value="partial"]) { border-left-color: var(--jl-emp-seasonal); }
.jobs-privacy-fieldset[data-mode="hidden"]  .jobs-privacy-mode:has(input[value="hidden"])  { border-left-color: var(--jl-emp-volunteer); }

/* Sub-panels — toggle via CSS data-mode selector. JS only sets the attr. */
.jobs-privacy-partial-panel,
.jobs-privacy-hidden-panel {
    display: none;
    border-top: 1px dashed var(--jl-hairline);
    padding-top: 14px;
    margin-top: 10px;
}
.jobs-privacy-fieldset[data-mode="partial"] .jobs-privacy-partial-panel { display: block; }
.jobs-privacy-fieldset[data-mode="hidden"]  .jobs-privacy-hidden-panel  { display: block; }
.jobs-privacy-tip a { color: inherit; text-decoration: underline; }

/* Per-field visibility selector (1.6, unified minimal in 1.14). One tight
   pattern everywhere: mono small-caps label + narrow select on the same line.
   The optional explanatory "current state" subtitle was dropped — the select's
   selected option text is the source of truth. */
.jobs-field-vis {
    margin: 0;
    padding: 8px 12px;
    border-top: 1px dashed var(--jl-hairline);
    background: transparent;
}
.jobs-field-vis:first-of-type { border-top: 0; }
.jobs-field-vis-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.jobs-field-vis-label {
    margin: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
    flex: 0 0 auto;
    min-width: 90px;
}
.jobs-field-vis-current { display: none; }
.jobs-field-vis select {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
    padding: 6px 26px 6px 10px;
    border: 1px solid var(--jl-hairline);
    border-radius: 0;
    background: var(--jl-bg-canvas);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    color: var(--jl-ink);
    cursor: pointer;
}
.jobs-field-vis select:focus {
    outline: none;
    border-color: var(--jl-ink);
}
.jobs-field-vis-group {
    margin: 8px 0 14px;
    background: transparent;
    border: 1px solid var(--jl-hairline);
}
/* The compact inline form (used inside .jobs-dense-row on the Compensation
   fieldset) drops the wrapper padding so it reads as a column-flow cell. */
.jobs-field-vis.is-inline {
    padding: 0;
    border-top: 0;
}
.jobs-field-vis.is-inline .jobs-field-vis-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.jobs-field-vis.is-inline .jobs-field-vis-label { min-width: 0; }
.jobs-field-vis.is-inline select { min-width: 130px; }

/* ===== Admin disciplines tree (editorial repaint in 1.14) ===== */
.adm-tree { max-width: 760px; margin: 0; }
.adm-tree ul { list-style: none; padding-left: 22px; margin: 4px 0; }
.adm-tree > ul {
    padding-left: 0;
    border-top: 2px solid var(--jl-rule);
    border-bottom: 2px solid var(--jl-rule);
    margin: 0;
}
.adm-tree li {
    padding: 0;
    border-bottom: 1px solid var(--jl-hairline);
}
.adm-tree li:last-child { border-bottom: 0; }
.adm-tree ul ul li { border-bottom: 0; }
.adm-tree ul ul li + li { border-top: 1px dashed var(--jl-hairline); }
.adm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    transition: background var(--jl-motion);
}
.adm-row:hover { background: var(--jl-bg-hover); }
.adm-name {
    cursor: pointer;
    flex: 1;
    padding: 4px 0;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 24;
    font-weight: 500;
    font-size: 15px;
    color: var(--jl-ink);
    border-bottom: 1px solid transparent;
    transition: border-color var(--jl-motion);
}
.adm-name:hover {
    border-bottom-color: var(--jl-ink);
}
.adm-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ===== Moderation table (editorial repaint in 1.14) ===== */
.jobs-mod-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--jl-bg-canvas);
    border-radius: 0;
    border-top: 2px solid var(--jl-rule);
    border-bottom: 2px solid var(--jl-rule);
    overflow: hidden;
    box-shadow: none;
    font-family: 'DM Sans', system-ui, sans-serif;
}
.jobs-mod-table th {
    background: var(--jl-ink);
    color: #faf8f3;
    padding: 13px 14px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.jobs-mod-table td {
    padding: 14px;
    border-bottom: 1px solid var(--jl-hairline);
    font-size: 14px;
    color: var(--jl-ink);
    vertical-align: top;
}
.jobs-mod-table tr:last-child td { border-bottom: 0; }
.jobs-mod-table tr:hover td { background: var(--jl-bg-hover); }
.jobs-mod-table .jobs-mod-actions-col { width: 240px; }
.jobs-mod-attach-row {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.jobs-mod-attach-thumb {
    display: inline-block;
    width: 48px;
    height: 48px;
    overflow: hidden;
    background: var(--jl-bg-warm);
    border: 1px solid var(--jl-hairline);
}
.jobs-mod-attach-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.jobs-mod-attach-pdf {
    background: var(--jl-emp-part_time);
    color: #faf8f3;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    font-size: 11px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== My Listings — editorial dashboard =====
   Owner-side dashboard. Mirrors the editorial sport-journal vocabulary of the
   public listings (Fraunces titles, DM Sans uppercase labels, JetBrains Mono
   numerals, 4px employment rail, hairline rules bracketed by 2px navy bars). */

.my-listings-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 20px 40px;
    color: var(--jl-ink);
}
.my-listings-page .jobs-back-link {
    display: inline-block;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jl-ink-soft);
    text-decoration: none;
    margin: 4px 0 14px;
}
.my-listings-page .jobs-back-link:hover { color: var(--jl-ink); text-decoration: none; }

/* Stats strip — three columns of mono+serif numbers under the page title. */
.my-listings-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin: 0 0 22px;
    border-top: 1px solid var(--jl-hairline);
    border-bottom: 1px solid var(--jl-hairline);
    background: var(--jl-bg-stats);
}
.my-listings-stat {
    flex: 1 1 0;
    min-width: 180px;
    padding: 18px 22px;
    border-right: 1px solid var(--jl-hairline);
}
.my-listings-stat:last-child { border-right: 0; }
.my-listings-stat-label {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jl-ink-soft);
    margin: 0 0 8px;
    line-height: 1;
}
.my-listings-stat-value {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 60;
    font-weight: 500;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.014em;
    color: var(--jl-ink);
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.my-listings-stat-value .of {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--jl-ink-muted);
    margin-left: 6px;
}
.my-listings-stat-meta {
    margin-top: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    color: var(--jl-ink-muted);
    letter-spacing: 0.06em;
    line-height: 1.4;
    min-height: 14px;
}
.my-listings-stat-meta .up   { color: #2e7d32; margin-left: 4px; font-weight: 600; }
.my-listings-stat-meta .down { color: #c62828; margin-left: 4px; font-weight: 600; }
.my-listings-stat.is-alert  { background: #fbf3df; }
.my-listings-stat.is-alert .my-listings-stat-label,
.my-listings-stat.is-alert .my-listings-stat-value { color: var(--jl-emp-seasonal); }

/* Section wrapper — each table sits in its own section with breathing room. */
.my-listings-section { margin: 0 0 32px; }
.my-listings-section:last-of-type { margin-bottom: 16px; }

/* Action bar — eyebrow on left, primary action on right. */
.my-listings-actionbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 4px 0 14px;
}
.my-listings-actionbar-eyebrow {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 36;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.012em;
    text-transform: none;
    color: var(--jl-ink);
}
.my-listings-actionbar-count {
    margin-left: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--jl-ink-muted);
}
.my-listings-actionbar-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--jl-ink);
    color: #faf8f3;
    border: 1px solid var(--jl-ink);
    border-radius: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.my-listings-actionbar-primary:hover {
    background: var(--jl-accent);
    border-color: var(--jl-accent);
    color: #faf8f3;
    text-decoration: none;
    transform: none;
}
.my-listings-actionbar-primary.is-ghost {
    background: transparent;
    color: var(--jl-ink);
    border-color: var(--jl-ink);
}
.my-listings-actionbar-primary.is-ghost:hover {
    background: var(--jl-ink);
    border-color: var(--jl-ink);
    color: #faf8f3;
}
.my-listings-actionbar-primary .glyph {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    margin-top: -3px;
}

/* Empty state — two CTAs side by side under the prompt. */
.my-listings-empty-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Add-more row — appears under the tables when only one type is posted.
   Compact prompt + ghost CTA(s) so the user can fill the gap. */
.my-listings-addmore {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 22px 18px;
    margin-top: 4px;
    border-top: 1px dashed var(--jl-hairline);
    border-bottom: 1px dashed var(--jl-hairline);
}
.my-listings-addmore-label {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-ink-soft);
}

/* Empty state — bracketed by 2px navy rules to match #jobs-results. */
.my-listings-empty {
    border-top: 2px solid var(--jl-rule);
    border-bottom: 2px solid var(--jl-rule);
    padding: 80px 24px;
    text-align: center;
    background: var(--jl-bg-canvas);
}
.my-listings-empty p {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    color: var(--jl-ink-soft);
    margin: 0 0 12px;
}
.my-listings-empty small {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
    margin: 0 0 26px;
}

/* Editorial table — rows sit on hairlines, bracketed top+bottom by 2px navy. */
.my-listings-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--jl-bg-canvas);
    border-top: 2px solid var(--jl-rule);
    border-bottom: 2px solid var(--jl-rule);
    border-radius: 0;
    box-shadow: none;
    table-layout: fixed;
    font-family: 'DM Sans', system-ui, sans-serif;
}
.my-listings-table col.c-rail      { width: 4px; }
.my-listings-table col.c-title     { width: auto; }
.my-listings-table col.c-status    { width: 130px; }
.my-listings-table col.c-expires   { width: 110px; }
.my-listings-table col.c-views     { width: 100px; }
.my-listings-table col.c-inquiries { width: 120px; }
.my-listings-table col.c-actions   { width: 280px; }
.my-listings-table thead th {
    background: var(--jl-ink);
    color: #faf8f3;
    padding: 13px 14px;
    text-align: left;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 0;
    white-space: nowrap;
}
.my-listings-table thead th.t-num { text-align: center; }
.my-listings-table thead th.t-rail { padding: 0; background: var(--jl-ink); width: 4px; }

.my-listings-table tbody td {
    padding: 18px 14px;
    border-bottom: 1px solid var(--jl-hairline);
    font-size: 13.5px;
    vertical-align: middle;
    color: var(--jl-ink);
    background: var(--jl-bg-canvas);
    transition: background-color 0.18s ease;
}
.my-listings-table tbody tr:last-child td { border-bottom: 0; }
.my-listings-table tbody tr:hover td { background: var(--jl-bg-hover); }

/* 4px rail keyed to listing type — sibling visual to .jl-row. */
.my-listings-table tbody td.t-rail {
    width: 4px;
    padding: 0;
    background: var(--jl-emp-default);
    transition: background 0.18s ease;
}
.my-listings-table tbody tr[data-ltype="job"]    td.t-rail { background: var(--jl-emp-full_time); }
.my-listings-table tbody tr[data-ltype="resume"] td.t-rail { background: var(--jl-emp-volunteer); }
.my-listings-table tbody tr:hover td.t-rail     { background: var(--jl-emp-seasonal); }

/* Title cell — Fraunces serif title, mono date underneath. */
.my-listings-table .t-title { padding-left: 20px; }
.my-listings-table .t-title .title-link {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 30;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: -0.008em;
    color: var(--jl-ink);
    text-decoration: none;
}
.my-listings-table .t-title .title-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.my-listings-table .t-posted {
    margin-top: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
}
.my-listings-table .t-pending {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px 3px;
    background: transparent;
    border: 1px solid var(--jl-emp-seasonal);
    color: var(--jl-emp-seasonal);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    line-height: 1.4;
    vertical-align: middle;
    transition: background 0.18s, color 0.18s;
}
.my-listings-table .t-pending:hover {
    background: var(--jl-emp-seasonal);
    color: #faf8f3;
    text-decoration: none;
}

/* Type column — square swatch + label. */
.my-listings-table .t-type {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jl-ink);
    white-space: nowrap;
}
.my-listings-table tr[data-ltype="job"]    .t-type::before,
.my-listings-table tr[data-ltype="resume"] .t-type::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    vertical-align: 1px;
}
.my-listings-table tr[data-ltype="job"]    .t-type::before { background: var(--jl-emp-full_time); }
.my-listings-table tr[data-ltype="resume"] .t-type::before { background: var(--jl-emp-volunteer); }

/* Status — flat outlined pill (replaces old rounded tinted pill). */
.my-listings-table .jobs-status {
    display: inline-block;
    padding: 4px 10px 5px;
    border-radius: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    border: 1px solid currentColor;
    background: transparent;
    white-space: nowrap;
    text-align: center;
}
.my-listings-table .jobs-status-active         { color: #2e7d32; }
.my-listings-table .jobs-status-pending_review { color: #8a6d00; }
.my-listings-table .jobs-status-paused         { color: #5a6470; }
.my-listings-table .jobs-status-filled         { color: #6a1b9a; }
.my-listings-table .jobs-status-draft          { color: #ad1457; }
.my-listings-table .jobs-status-expired        { color: #c62828; }

/* Expires column — stacked Fraunces numeral over a mono mini-label. */
.my-listings-table .t-expires {
    display: inline-block;
    line-height: 1;
}
.my-listings-table .t-expires-value {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 48;
    font-weight: 500;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--jl-ink);
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.my-listings-table .t-expires-label {
    display: block;
    margin-top: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
}
.my-listings-table .t-expires.is-expired .t-expires-value,
.my-listings-table .t-expires.is-expired .t-expires-label { color: #c62828; }
.my-listings-table .t-expires .t-em {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 18px;
    color: var(--jl-ink-muted);
}

/* Numeric cells — Fraunces serif numerals (tabular) over a mono mini-label. */
.my-listings-table .t-num {
    text-align: center;
    color: var(--jl-ink);
}
.my-listings-table .t-num-value {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 48;
    font-weight: 500;
    font-size: 22px;
    line-height: 1;
    color: inherit;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.my-listings-table .t-num-label {
    display: block;
    margin-top: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
}
.my-listings-table .t-num.is-zero { color: var(--jl-ink-muted); }
.my-listings-table .t-num.is-zero .t-num-value { font-weight: 400; }
.my-listings-table .t-num a {
    color: var(--jl-emp-remote);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
.my-listings-table .t-num a:hover { color: var(--jl-ink); }

/* Action buttons — square hairline ghost; primary fills navy on hover. */
.my-listings-table .t-actions {
    text-align: left;
    line-height: 1.7;
}
.my-listings-table .t-act {
    appearance: none;
    display: inline-block;
    padding: 5px 11px;
    margin: 0 3px 3px 0;
    background: transparent;
    border: 1px solid var(--jl-hairline);
    border-radius: 0;
    color: var(--jl-ink-soft);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    line-height: 1.4;
}
.my-listings-table .t-act:hover {
    background: #fff;
    border-color: var(--jl-ink);
    color: var(--jl-ink);
    text-decoration: none;
    transform: none;
}
.my-listings-table .t-act.is-primary {
    background: var(--jl-ink);
    border-color: var(--jl-ink);
    color: #faf8f3;
}
.my-listings-table .t-act.is-primary:hover {
    background: var(--jl-accent);
    border-color: var(--jl-accent);
    color: #faf8f3;
}
.my-listings-table .t-act.is-danger {
    color: #b3261e;
    border-color: color-mix(in srgb, #b3261e 35%, transparent);
}
.my-listings-table .t-act.is-danger:hover {
    background: #b3261e;
    border-color: #b3261e;
    color: #faf8f3;
}

/* Responsive — collapse the table to stacked cards on tablet. Uses the 1024
   ladder rung rather than 768: the fixed columns sum to ~744px, so between
   ~769–920px the auto title column gets squeezed until its text overflows
   into the status column. Collapsing across the whole ≤1024 range hands the
   tablet mid-width to the (roomier) card layout and avoids that overlap. */
@media (max-width: 1024px) {
    .my-listings-table { table-layout: auto; }
    .my-listings-table thead { display: none; }
    .my-listings-table, .my-listings-table tbody { display: block; }
    .my-listings-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 14px;
        position: relative;
        padding: 18px 14px 16px 24px;
        border-bottom: 1px solid var(--jl-hairline);
    }
    .my-listings-table tbody tr:last-child { border-bottom: 0; }
    .my-listings-table tbody td {
        display: block;
        padding: 0;
        border-bottom: 0;
        background: transparent !important;
    }
    .my-listings-table tbody td.t-rail {
        position: absolute;
        top: 0; bottom: 0; left: 0;
        width: 4px;
        height: auto;
        padding: 0;
        grid-column: 1 / -1;
    }
    .my-listings-table .t-title { grid-column: 1 / -1; padding-left: 0; padding-right: 0; }
    .my-listings-table tbody td:nth-child(3) { /* status */ grid-column: 1; }
    .my-listings-table tbody td:nth-child(4) { /* expires */ grid-column: 2; text-align: right; }
    .my-listings-table .t-num {
        text-align: left;
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-top: 4px;
    }
    .my-listings-table .t-num-value { display: inline; font-size: 18px; }
    .my-listings-table .t-num-label { display: inline; margin-top: 0; }
    .my-listings-table .t-actions {
        grid-column: 1 / -1;
        padding-top: 10px;
        border-top: 1px dashed var(--jl-hairline);
        margin-top: 6px;
    }
}

/* ===== Popup messages ===== */
.jobs-popup-message {
    position: fixed;
    background: #333;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.jobs-popup-message.show { opacity: 1; }

/* Page header chrome lives in the "Shared primitives" block near the
   top of this file (1.14). The legacy centered-rounded-panel style
   was replaced with the editorial left-aligned header used by every
   consumer page in the module. */

/* Bottom-of-results footer — listing count (left) + pagination (right). */
.jobs-results-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 24px;
    padding: 14px 4px;
    border-top: 2px solid var(--jl-rule);
    margin-top: -2px; /* overlap the existing #jobs-results border-bottom */
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jl-ink);
}
.jobs-results-footer:empty { display: none; }

.jl-foot-count {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-variation-settings: 'opsz' 48;
    font-size: 18px;
    text-transform: none;
    letter-spacing: -0.012em;
    color: var(--jl-ink);
    line-height: 1.2;
}
.jl-foot-range {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--jl-ink-muted);
    text-transform: uppercase;
    margin-left: 2px;
}

.jl-pager {
    display: flex;
    align-items: baseline;
    gap: 2px;
}
.jl-page-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 6px 10px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jl-ink-soft);
    cursor: pointer;
    transition: color 0.18s, border-color 0.18s, background 0.18s;
    border-bottom: 2px solid transparent;
}
.jl-page-btn:hover:not(:disabled):not(.is-current) {
    color: var(--jl-ink);
    border-bottom-color: var(--jl-hairline);
}
.jl-page-btn:disabled {
    color: var(--jl-ink-muted);
    cursor: default;
    opacity: 0.5;
}
.jl-page-num {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: 16px;
    text-transform: none;
    letter-spacing: 0;
    padding: 4px 8px;
    color: var(--jl-ink-soft);
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.jl-page-num.is-current {
    color: var(--jl-ink);
    border-bottom-color: var(--jl-ink);
    cursor: default;
}
.jl-page-step {
    color: var(--jl-ink);
}
.jl-page-ellipsis {
    color: var(--jl-ink-muted);
    padding: 0 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
}

@media (max-width: 720px) {
    .jobs-results-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .jl-pager { justify-content: center; flex-wrap: wrap; }
}

/* ============================================================
   Attachments — owner manager + viewer panel
   ============================================================ */

.jobs-attach-manager { font-size: 14px; }
.jobs-attach-help { margin-top: 0; }
.jobs-attach-plus {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1;
    color: var(--jl-ink);
}
.jobs-attach-default-vis-label {
    color: var(--jl-ink-soft);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
}
.jobs-attach-default-vis-select {
    width: auto;
    margin-left: 6px;
    padding: 4px 8px;
    font-size: 13px;
}
.jobs-attach-requests-heading {
    margin: 22px 0 10px;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 24;
    font-weight: 500;
    font-size: 16px;
    color: var(--jl-ink);
}
.jobs-attach-request-time {
    color: var(--jl-ink-muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
}
.jobs-attach-request-message {
    color: var(--jl-ink-soft);
    font-size: 13px;
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--jl-bg-warm);
    border-left: 3px solid var(--jl-hairline);
}
.jobs-attach-request-actions {
    display: flex;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.jobs-attach-dropzone {
    border: 1px dashed var(--jl-hairline);
    background: var(--jl-bg-warm);
    border-radius: 0;
    padding: 22px 18px;
    text-align: center;
    cursor: pointer;
    transition: background var(--jl-motion), border-color var(--jl-motion);
    margin-bottom: 14px;
}
.jobs-attach-dropzone:hover { background: var(--jl-bg-hover); border-color: var(--jl-ink-muted); }
.jobs-attach-dropzone.dragging { background: var(--jl-bg-hover); border-color: var(--jl-ink); border-style: solid; }
.jobs-attach-drop-inner > div { margin: 4px 0; color: #444; }
.jobs-attach-default-vis-row {
    margin-top: 8px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.jobs-attach-default-vis-row select { font-size: 13px; padding: 4px 6px; }
.jobs-attach-progress {
    margin-top: 10px;
    font-size: 13px;
    padding: 6px 10px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e2e8ef;
}

.jobs-attach-list { display: flex; flex-direction: column; gap: 10px; }
.jobs-attach-empty {
    padding: 18px;
    text-align: center;
    color: #888;
    font-style: italic;
    background: #fafafa;
    border-radius: 8px;
}

.jobs-attach-card {
    display: flex;
    gap: 14px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 10px;
    align-items: flex-start;
}
.jobs-attach-just-added { animation: jobsAttachFlash 1.2s ease; }
@keyframes jobsAttachFlash {
    0%   { box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
}
.jobs-attach-thumb {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jobs-attach-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.jobs-attach-pdf-icon {
    background: #c0392b;
    color: white;
    font-weight: 700;
    font-size: 16px;
    padding: 8px 14px;
    border-radius: 6px;
    letter-spacing: 1px;
}
.jobs-attach-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
/* New-listing staged-file preview cards (Option A): files held client-side
   before upload-on-submit. Reuses .jobs-attach-card / -thumb / -body chrome. */
.jobs-attach-stage-card .jobs-attach-body { gap: 2px; justify-content: center; }
.jobs-attach-stage-name { font-weight: 600; font-size: 13px; word-break: break-word; }
.jobs-attach-stage-note { font-size: 12px; color: #7a8798; }
.jobs-attach-stage-card .jobs-btn-small { align-self: center; flex-shrink: 0; }
.jobs-attach-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jobs-attach-label { flex: 1; min-width: 200px; font-size: 13px; }
.jobs-attach-filename {
    font-size: 12px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.jobs-attach-controls { gap: 10px; }
.jobs-attach-vis {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #444;
    flex: 1;
    min-width: 240px;
}
.jobs-attach-vis-select { font-size: 13px; padding: 4px 6px; flex: 1; }
.jobs-attach-status { font-size: 12px; color: #4CAF50; }

.jobs-attach-requests { display: flex; flex-direction: column; gap: 8px; }
.jobs-attach-request-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    background: #fffaf0;
    border: 1px solid #ffe1a8;
    border-radius: 8px;
    font-size: 13px;
}

/* Viewer side */
.jobs-attach-viewer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 10px;
}
.jobs-attach-viewer-card {
    background: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.jobs-attach-viewer-thumb {
    background: #f0f4f8;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
}
.jobs-attach-viewer-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.jobs-attach-viewer-locked {
    background: #f7f7f9;
    color: #aaa;
    font-size: 28px;
}
.jobs-attach-lock-icon { font-size: 28px; opacity: 0.5; }
.jobs-attach-viewer-meta {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.jobs-attach-viewer-label { font-size: 13px; font-weight: 600; color: #333; }
.jobs-attach-viewer-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.jobs-attach-vis-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.jobs-attach-vis-pub     { background: #e3f2fd; color: #1565c0; }
.jobs-attach-vis-req     { background: #e8f5e9; color: #2e7d32; }
.jobs-attach-vis-pending { background: #fff3cd; color: #8a6d00; }
.jobs-attach-vis-denied  { background: #fdecea; color: #b71c1c; }

.jobs-attach-owner-pending {
    margin-top: 18px;
    padding: 12px 14px;
    background: #fffaf0;
    border: 1px solid #ffe1a8;
    border-radius: 10px;
}
.jobs-attach-owner-pending h4 { margin: 0 0 8px; }

/* Modal */
.jobs-attach-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.jobs-attach-modal-card {
    background: var(--jl-bg-canvas);
    border-radius: 0;
    max-width: 520px;
    width: 100%;
    padding: 24px 26px 22px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    border-top: 2px solid var(--jl-rule);
}
.jobs-attach-modal-title {
    margin: 0 0 8px;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 30;
    font-weight: 500;
    font-size: 22px;
    color: var(--jl-ink);
}
.jobs-attach-modal-lede {
    margin: 0 0 12px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--jl-ink-soft);
}
.jobs-attach-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

@media (max-width: 600px) {
    .jobs-attach-card { flex-direction: column; }
    .jobs-attach-thumb { width: 100%; height: 160px; }
    .jobs-attach-viewer-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ============================================================
   Detail page — editorial / sport-journal aesthetic
   Mirrors the index masthead + .jl-row vocabulary so the two
   pages feel like spreads in the same magazine.
   ============================================================ */

.jd-wrap {
    max-width: 980px;
    margin: 16px auto 60px;
    padding: 0 24px;
}

.jd-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
    text-decoration: none;
    padding: 4px 0;
    margin-bottom: 14px;
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.jd-back:hover {
    color: var(--jl-ink);
    text-decoration: none;
    border-bottom-color: var(--jl-ink);
}

/* The page is bordered top/bottom with a 2px ink rule (mirrors
   #jobs-results) and a 4px employment-keyed rail on the left,
   so the listing's role-type carries through visually. */
.jd-page {
    background: var(--jl-bg-canvas);
    border-top: 2px solid var(--jl-rule);
    border-bottom: 2px solid var(--jl-rule);
    border-left: 4px solid var(--jl-emp-default);
    color: var(--jl-ink);
    padding: 0;
    position: relative;  /* anchor for the favorite button */
}

/* Favorite control on the detail page — pinned top-right of the article. */
.jd-fav {
    position: absolute;
    top: 18px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 12px;
    background: transparent;
    border: 1px solid var(--jl-hairline);
    color: var(--jl-ink-soft);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    z-index: 2;
}
.jd-fav:hover {
    border-color: var(--jl-emp-seasonal);
    color: var(--jl-emp-seasonal);
}
.jd-fav.is-fav {
    border-color: var(--jl-emp-seasonal);
    color: var(--jl-emp-seasonal);
    background: rgba(192, 144, 40, 0.06);
}
.jd-fav-glyph {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 16px;
    line-height: 1;
}
@media (max-width: 720px) {
    .jd-fav {
        top: 14px; right: 14px;
        padding: 5px 10px 5px 8px;
        font-size: 10px;
    }
    .jd-fav-label { display: none; }
}
.jd-page[data-emp="full_time"] { border-left-color: var(--jl-emp-full_time); }
.jd-page[data-emp="part_time"] { border-left-color: var(--jl-emp-part_time); }
.jd-page[data-emp="contract"]  { border-left-color: var(--jl-emp-contract);  }
.jd-page[data-emp="seasonal"]  { border-left-color: var(--jl-emp-seasonal);  }
.jd-page[data-emp="volunteer"] { border-left-color: var(--jl-emp-volunteer); }
.jd-page[data-emp="remote"]    { border-left-color: var(--jl-emp-remote);    }

/* ----- Masthead ----- */
.jd-masthead {
    padding: 32px 36px 28px;
    background: var(--jl-bg-warm);
    border-bottom: 1px solid var(--jl-hairline);
}

.jd-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-ink-soft);
    margin-bottom: 22px;
    line-height: 1;
}
.jd-eyebrow-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--jl-ink-muted);
    display: inline-block;
}
.jd-eyebrow-emp {
    color: var(--jl-accent);
    font-weight: 700;
}
.jd-page[data-emp="full_time"] .jd-eyebrow-emp { color: var(--jl-emp-full_time); }
.jd-page[data-emp="part_time"] .jd-eyebrow-emp { color: var(--jl-emp-part_time); }
.jd-page[data-emp="contract"]  .jd-eyebrow-emp { color: var(--jl-emp-contract);  }
.jd-page[data-emp="seasonal"]  .jd-eyebrow-emp { color: var(--jl-emp-seasonal);  }
.jd-page[data-emp="volunteer"] .jd-eyebrow-emp { color: var(--jl-emp-volunteer); }
.jd-page[data-emp="remote"]    .jd-eyebrow-emp { color: var(--jl-emp-remote);    }

/* JOB / COACH RESUME pip — small dot + mono small caps. Cleaner than
   the index's pill badge for the masthead context. */
.jd-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-ink);
}
.jd-type-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1565c0;
    display: inline-block;
}
.jd-type-resume .jd-type-dot { background: #6a1b9a; }

.jd-anon-tag {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--jl-emp-volunteer);
    padding: 1px 8px;
    border: 1px solid color-mix(in srgb, var(--jl-emp-volunteer) 35%, transparent);
    border-radius: 999px;
    line-height: 1.4;
}

/* Byline anonymous-name pill + display-name handle (1.12). */
.jd-anon-pill {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--jl-emp-volunteer) 22%, transparent);
    color: color-mix(in srgb, var(--jl-emp-volunteer) 85%, black);
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.03em;
    vertical-align: baseline;
}
.jd-anon-handle,
.jl-anon-handle {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    color: var(--jl-ink-soft, #5a6470);
    margin-left: 6px;
}
.jd-field-req-inline {
    margin-left: 8px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.jd-field-req-inline .jobs-btn { padding: 2px 10px; font-size: 12px; }

/* Resume releases table on myConnections (1.12, editorial repaint 1.14) */
.jobs-releases-table-wrap {
    overflow-x: auto;
    background: var(--jl-bg-canvas);
    border: 1px solid var(--jl-hairline);
    border-top: 2px solid var(--jl-rule);
    border-bottom: 2px solid var(--jl-rule);
    border-left: 0;
    border-right: 0;
}
.jobs-releases-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13.5px;
}
.jobs-releases-table th {
    background: var(--jl-ink);
    color: #faf8f3;
    padding: 12px 14px;
    text-align: left;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 0;
}
.jobs-releases-table td {
    padding: 14px;
    border-bottom: 1px solid var(--jl-hairline);
    color: var(--jl-ink);
    vertical-align: middle;
}
.jobs-releases-table tr:last-child td { border-bottom: none; }
.jobs-releases-table tr { transition: opacity 0.24s, background var(--jl-motion); }
.jobs-releases-table tr:hover td { background: var(--jl-bg-hover); }

/* Title + pay grid: title left, pay right (echoes the .jl-row
   layout). Stacks on narrow screens. */
.jd-headline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px 36px;
    margin-bottom: 12px;
}

.jd-title {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-variation-settings: 'opsz' 48, 'SOFT' 30;
    font-size: clamp(28px, 4.4vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--jl-ink);
}

.jd-pay {
    display: flex;
    align-items: baseline;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
    min-width: 120px;
    padding-left: 24px;
    border-left: 1px solid var(--jl-hairline);
}
.jd-pay-amt {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-variation-settings: 'opsz' 36;
    font-size: clamp(26px, 3.4vw, 34px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--jl-ink);
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    white-space: nowrap;
}
.jd-pay-unit {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
}
.jd-pay-gated {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.jd-pay-gated .jd-pay-amt.jd-pay-locked {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--jl-ink-muted);
    letter-spacing: 0.02em;
}
.jd-pay-unpaid .jd-pay-amt {
    font-style: italic;
    font-weight: 500;
    color: var(--jl-emp-volunteer);
    font-size: clamp(20px, 2.6vw, 26px);
}

.jd-byline {
    margin: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--jl-ink-soft);
}
.jd-byline strong {
    color: var(--jl-ink);
    font-weight: 600;
}
.jd-byline-sep {
    color: var(--jl-ink-muted);
    margin: 0 2px;
}
.jd-byline-loc { color: var(--jl-ink-soft); }

.jd-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--jl-hairline);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--jl-ink-soft);
}
.jd-meta-item { line-height: 1; }

/* ----- Sections ----- */
.jd-section {
    padding: 30px 36px;
    border-top: 1px solid var(--jl-hairline);
}
.jd-section:first-of-type { border-top: 0; }

.jd-section-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.jd-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--jl-hairline);
}

.jd-prose {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 15.5px;
    line-height: 1.68;
    color: var(--jl-ink);
    max-width: 64ch;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.jd-prose a { color: var(--jl-accent); }

/* Coaching needs / qualified for — stacked rows divided by hairlines,
   rather than the old grey panel boxes. Discipline name in serif. */
.jd-comps { display: flex; flex-direction: column; }
.jd-comp {
    padding: 16px 0;
    border-bottom: 1px dashed var(--jl-hairline);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px 24px;
}
.jd-comp:first-child { padding-top: 4px; }
.jd-comp:last-child  { border-bottom: 0; padding-bottom: 4px; }

.jd-comp-name {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-variation-settings: 'opsz' 24;
    font-size: 19px;
    line-height: 1.2;
    color: var(--jl-ink);
    letter-spacing: -0.005em;
    flex: 0 0 auto;
}
.jd-pref {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-emp-seasonal);
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--jl-emp-seasonal) 40%, transparent);
    border-radius: 999px;
    margin-left: 10px;
    vertical-align: middle;
}
/* ----- Edit history block ----- */
.jd-history-count {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--jl-ink-muted);
    margin-left: 8px;
    padding: 1px 6px;
    background: rgba(26, 31, 46, 0.04);
    border-radius: 3px;
    vertical-align: 1px;
}
.jd-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.jd-history-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--jl-hairline);
}
.jd-history-item:last-child  { border-bottom: 0; padding-bottom: 4px; }
.jd-history-item:first-child { padding-top: 4px; }

.jd-history-when {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
}
.jd-history-time {
    color: var(--jl-ink);
    font-weight: 500;
}
.jd-history-stamp {
    color: var(--jl-ink-muted);
}
.jd-history-editor {
    color: var(--jl-ink-soft);
    text-transform: none;
    letter-spacing: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12px;
}

.jd-history-changes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.jd-change {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    padding: 6px 0;
    border-bottom: 1px dashed transparent;
}
.jd-change-field {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
    line-height: 1.4;
    padding-top: 2px;
}
.jd-change-from {
    color: var(--jl-ink-soft);
    text-decoration: line-through;
    text-decoration-color: rgba(199, 82, 42, 0.35);
    text-decoration-thickness: 1px;
    word-break: break-word;
}
.jd-change-arrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    color: var(--jl-ink-muted);
    line-height: 1;
}
.jd-change-to {
    color: var(--jl-ink);
    font-weight: 500;
    word-break: break-word;
}
.jd-change-block {
    grid-template-columns: 160px minmax(0, 1fr);
    grid-template-areas:
        "field from"
        "field arrow"
        "field to";
    gap: 6px 10px;
}
.jd-change-block .jd-change-field { grid-area: field; }
.jd-change-block .jd-change-from {
    grid-area: from;
    background: rgba(199, 82, 42, 0.06);
    padding: 6px 10px;
    border-left: 2px solid rgba(199, 82, 42, 0.35);
    text-decoration: none;
    color: var(--jl-ink-soft);
    white-space: pre-wrap;
}
.jd-change-block .jd-change-arrow {
    grid-area: arrow;
    text-align: left;
    padding-left: 4px;
}
.jd-change-block .jd-change-to {
    grid-area: to;
    background: rgba(36, 54, 70, 0.04);
    padding: 6px 10px;
    border-left: 2px solid var(--jl-accent);
    color: var(--jl-ink);
    white-space: pre-wrap;
}

@media (max-width: 720px) {
    .jd-change {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "field" "from" "arrow" "to";
        gap: 4px;
    }
    .jd-change-field   { grid-area: field; }
    .jd-change-from    { grid-area: from; }
    .jd-change-arrow   { grid-area: arrow; }
    .jd-change-to      { grid-area: to; }
    .jd-change-block   { grid-template-columns: minmax(0, 1fr); }
}

/* ----- Login / rate-limit gate ----- */
.jd-gate {
    background: var(--jl-bg-warm);
    border: 1px solid var(--jl-hairline);
    border-left: 3px solid var(--jl-accent);
    padding: 18px 22px;
    border-radius: 4px;
    font-family: 'DM Sans', system-ui, sans-serif;
}
.jd-gate p {
    margin: 0 0 14px 0;
    color: var(--jl-ink-soft);
    font-size: 14px;
    line-height: 1.55;
}
.jd-gate p:last-of-type { margin-bottom: 0; }
.jd-gate-warn {
    border-left-color: var(--jl-emp-seasonal);
    background: #fffaf0;
}

/* ----- Contact lines (when an email/phone is shown directly) ----- */
.jd-contact-line {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--jl-hairline);
    font-family: 'DM Sans', system-ui, sans-serif;
}
.jd-contact-line:last-of-type { border-bottom: 0; }
.jd-contact-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
    min-width: 60px;
}
.jd-contact-value {
    color: var(--jl-ink);
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid var(--jl-hairline);
}
.jd-contact-value:hover { border-bottom-color: var(--jl-ink); color: var(--jl-ink); }

.jd-form-lede {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--jl-ink-soft);
    margin: 18px 0 14px;
}

/* Apply form — keep .jobs-input / .jobs-form-group but tighten labels
   into the editorial type system. */
.jd-form .jobs-form-group label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
    margin-bottom: 6px;
}
.jd-form .jobs-input {
    border-color: var(--jl-hairline);
    border-radius: 4px;
    background: var(--jl-bg-canvas);
    color: var(--jl-ink);
}
.jd-form .jobs-input:focus {
    border-color: var(--jl-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--jl-accent) 15%, transparent);
}
/* `.jd-form .jobs-btn-primary` override removed in 1.14 — base button is
   now editorial navy by default, so the contact form picks it up. */

/* ----- Re-skin the attachment viewer cards to match the editorial palette ----- */
#attachments .jobs-attach-viewer-grid { margin-top: 0; }
#attachments .jobs-attach-viewer-card {
    border: 1px solid var(--jl-hairline);
    border-radius: 4px;
    background: var(--jl-bg-canvas);
}
#attachments .jobs-attach-viewer-thumb { background: var(--jl-bg-warm); }
#attachments .jobs-attach-viewer-locked {
    background: var(--jl-bg-warm);
    color: var(--jl-ink-muted);
    border-bottom: 1px dashed var(--jl-hairline);
}
#attachments .jobs-attach-viewer-label {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: 14.5px;
    color: var(--jl-ink);
    letter-spacing: -0.005em;
}
#attachments .jobs-attach-vis-tag {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 500;
    letter-spacing: 0.16em;
    border-radius: 3px;
}
#attachments .jobs-attach-pdf-icon {
    background: var(--jl-emp-part_time);
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
#attachments .jobs-attach-owner-pending {
    border-radius: 4px;
    border-color: color-mix(in srgb, var(--jl-emp-seasonal) 40%, transparent);
}

@media (max-width: 720px) {
    .jd-wrap { padding: 0 14px; }
    .jd-masthead { padding: 24px 20px 22px; }
    .jd-section { padding: 24px 20px; }
    .jd-headline {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 14px;
    }
    .jd-pay {
        align-items: flex-start;
        text-align: left;
        padding-left: 0;
        border-left: 0;
        border-top: 1px dashed var(--jl-hairline);
        padding-top: 12px;
    }
    .jd-comp { gap: 8px 16px; }
}

/* ============================================================
   Two-way interest signal (1.7)
   ============================================================ */

.jd-interest-cta {
    margin: 14px 0 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.jd-interest-cta-note {
    font-size: 13px;
    color: #666;
}
.jd-interest-cta-empty .jobs-btn {
    font-size: 13px;
}

.jobs-interest-refs {
    background: var(--jl-bg-warm);
    border: 1px solid var(--jl-hairline);
    border-radius: 0;
    padding: 12px 14px;
}
.jobs-interest-refs-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
    margin-bottom: 8px;
    display: block;
}
.jobs-interest-ref-row.is-locked {
    cursor: default;
    opacity: 0.95;
}
.jobs-interest-ref-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.jobs-interest-ref-row input[type="checkbox"] {
    margin: 0;
}

/* Connections tracker page — editorial repaint in 1.14. Cards align with
   the `.jobs-card` vocabulary; chips and links use the navy palette. */

.jobs-connections-page {
    max-width: 900px;
}
.jobs-connections-section {
    margin-bottom: 36px;
}
.jobs-connections-heading {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 36;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    color: var(--jl-ink);
    margin: 0 0 14px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    letter-spacing: -0.012em;
}
.jobs-connections-count {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--jl-ink-muted);
    font-weight: 500;
    letter-spacing: 0.08em;
}
.jobs-connections-empty {
    color: var(--jl-ink-soft);
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 16px;
    background: var(--jl-bg-warm);
    border: 1px dashed var(--jl-hairline);
    border-radius: 0;
    padding: 20px 24px;
    text-align: center;
    line-height: 1.5;
}
.jobs-connections-empty a {
    color: var(--jl-accent);
    text-underline-offset: 3px;
}
.jobs-connection-card {
    background: var(--jl-bg-canvas);
    border: 1px solid var(--jl-hairline);
    border-radius: 0;
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: none;
    transition: border-color var(--jl-motion);
}
.jobs-connection-card:hover { border-color: var(--jl-ink); }
.jobs-connection-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--jl-hairline);
    padding-bottom: 10px;
    margin-bottom: 12px;
    gap: 14px;
    flex-wrap: wrap;
}
.jobs-connection-counterparty {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.jobs-connection-name {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 24;
    font-weight: 500;
    font-size: 16px;
    color: var(--jl-ink);
}
.jobs-connection-email {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    color: var(--jl-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--jl-hairline);
}
.jobs-connection-email:hover {
    color: var(--jl-ink);
    border-bottom-color: var(--jl-ink);
}
.jobs-connection-time {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
}
.jobs-connection-target {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    color: var(--jl-ink-soft);
    margin-bottom: 8px;
}
.jobs-connection-target a {
    color: var(--jl-ink);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--jl-hairline);
}
.jobs-connection-target a:hover {
    border-bottom-color: var(--jl-ink);
}
.jobs-connection-type-tag {
    display: inline-block;
    background: transparent;
    color: var(--jl-ink-soft);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border: 1px solid var(--jl-hairline);
    border-radius: 0;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.jobs-connection-refs {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    color: var(--jl-ink-soft);
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.jobs-connection-ref-chip {
    background: var(--jl-bg-warm);
    border: 1px solid var(--jl-hairline);
    color: var(--jl-ink);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 0;
    text-decoration: none;
    transition: border-color var(--jl-motion), background var(--jl-motion);
}
.jobs-connection-ref-chip:hover {
    background: var(--jl-bg-hover);
    border-color: var(--jl-ink);
}
.jobs-connection-message {
    background: var(--jl-bg-warm);
    border-left: 3px solid var(--jl-accent);
    padding: 12px 14px;
    border-radius: 0;
    color: var(--jl-ink);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    margin-bottom: 10px;
    word-break: break-word;
}
.jobs-connection-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.jobs-connection-card.is-removing {
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

/* ============================================================
   Resume CV sections (1.9) — form repeater + detail page list
   ============================================================ */

.jobs-entries-fieldset legend {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
/* Empty section — section title gets a quieter ink color, the "+ Add" button
   is the only thing in the section's body. Setting .jobs-entries-rows to no
   bottom margin so the button sits tight under the help line. */
.jobs-entries-fieldset[data-count="0"] legend { color: var(--jl-ink-soft); }
.jobs-entries-fieldset[data-count="0"] .jobs-entries-rows {
    margin: 0;
}
.jobs-entries-count {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
}
.jobs-entries-fieldset[data-count="0"] .jobs-entries-count { opacity: 0.7; }
.jobs-entries-optional {
    font-weight: 400;
    color: var(--jl-ink-muted);
    font-size: 12px;
    margin-left: 0;
    font-style: italic;
    font-family: 'Fraunces', Georgia, serif;
}
.jobs-entries-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 12px 0;
}
.jobs-entry-row {
    background: var(--jl-bg-warm);
    border: 1px solid var(--jl-hairline);
    border-radius: 0;
    padding: 14px 16px;
    position: relative;
}
.jobs-entry-row-head {
    display: flex;
    gap: 14px 18px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.jobs-entry-year {
    flex: 0 0 100px;
}
.jobs-entry-year input {
    width: 100%;
}
.jobs-entry-row-contact {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.jobs-entry-row-link,
.jobs-entry-row-description {
    margin-top: 10px;
}
.jobs-entry-row-actions {
    margin-top: 8px;
    text-align: right;
}
.jobs-entry-remove {
    background: transparent;
    color: #c0392b;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    font-size: 12px;
    text-decoration: underline;
}
.jobs-entry-remove:hover {
    color: #8e1f15;
}
.jobs-entries-add {
    margin-top: 8px;
}

/* Detail page — sections under the masthead, list-style entries */
.jd-resume-entries {
    margin-top: 8px;
}
.jobs-entry-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}
.jobs-entry-item {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}
.jobs-entry-item:last-child {
    border-bottom: 0;
}
.jobs-entry-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
}
.jobs-entry-item-title {
    font-weight: 600;
    color: rgb(36, 54, 70);
    font-size: 15px;
}
.jobs-entry-item-org {
    color: #444;
    font-size: 14px;
}
.jobs-entry-item-years {
    margin-left: auto;
    color: #888;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.jobs-entry-item-link,
.jobs-entry-item-contact {
    font-size: 13px;
    color: var(--jl-accent);
    margin-top: 4px;
}
.jobs-entry-item-link a,
.jobs-entry-item-contact a {
    color: inherit;
    text-decoration: none;
}
.jobs-entry-item-link a:hover,
.jobs-entry-item-contact a:hover {
    text-decoration: underline;
}
.jobs-entry-item-desc {
    margin-top: 6px;
    color: #444;
    font-size: 13px;
    line-height: 1.5;
}

/* ============================================================
   Resume slot promotions (1.10) — tip line + slot badge on
   attachment cards + detail-page avatar + Download résumé CTA
   ============================================================ */

.jobs-slot-tip {
    padding: 10px 14px;
    background: #f0f4f8;
    border-radius: 8px;
    font-size: 13px;
    color: #444;
    margin-bottom: 12px;
}
.jobs-slot-tip strong {
    color: rgb(36, 54, 70);
}
.jobs-attach-card.jobs-attach-slot {
    border: 1px solid var(--jl-hairline);
    border-left: 4px solid var(--jl-emp-seasonal);
    background: var(--jl-bg-warm);
}
.jobs-attach-card.jobs-attach-slot[data-purpose="profile_photo"] {
    border-left-color: var(--jl-emp-remote);
}
.jobs-attach-slot-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    background: var(--jl-ink);
    color: #faf8f3;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-align: center;
    padding: 3px 4px;
    border-radius: 0;
    pointer-events: none;
}
.jobs-attach-thumb {
    position: relative;
}
.jobs-attach-purpose-select {
    max-width: 220px;
}

/* Detail page — circular avatar in the masthead */

.jd-masthead-has-avatar {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 18px;
    align-items: start;
}
.jd-masthead-avatar img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px #ddd, 0 4px 14px rgba(0, 0, 0, 0.06);
}
@media (max-width: 560px) {
    .jd-masthead-has-avatar {
        grid-template-columns: 64px 1fr;
        gap: 12px;
    }
    .jd-masthead-avatar img {
        width: 64px;
        height: 64px;
    }
}

/* Detail page — Download résumé CTA */

.jd-resume-pdf-cta {
    margin: 8px 0 14px;
}
.jd-resume-pdf-cta .jobs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.jd-resume-pdf-cta .jobs-btn-glyph {
    font-weight: 700;
}

/* Search card — small circular avatar */

.jl-row-has-avatar {
    /* The existing .jl-row uses a flex/grid; just slot the avatar in. */
}
.jl-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-right: 12px;
    align-self: center;
}
.jl-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px #e0e0e0;
}

/* ============================================================
   Public-permalink directory page (1.13, editorial repaint in 1.14)
   /jobs/g/<slug> — gym aggregator banner + active job cards
   /jobs/c/<slug> — candidate resume permalink
   ============================================================ */
.jobs-directory-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4px 24px 60px;
}
.jobs-directory-header {
    text-align: left;
    margin: 0 0 22px;
    padding: 28px 24px 22px;
    background: var(--jl-bg-warm);
    border: 0;
    border-top: 2px solid var(--jl-rule);
    border-bottom: 2px solid var(--jl-rule);
    border-radius: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 32px;
    align-items: end;
}
.jobs-directory-eyebrow {
    margin: 0 0 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
    grid-column: 1 / -1;
}
.jobs-directory-header h1 {
    grid-column: 1;
    margin: 0 0 6px;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 60, 'SOFT' 30;
    font-weight: 500;
    font-size: clamp(28px, 4.4vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--jl-ink);
}
.jobs-directory-subline {
    grid-column: 1;
    margin: 0 0 4px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 15px;
    color: var(--jl-ink-soft);
}
.jobs-directory-website {
    grid-column: 1;
    margin: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
}
.jobs-directory-website a {
    color: var(--jl-ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--jl-hairline);
    padding-bottom: 1px;
    transition: color var(--jl-motion), border-color var(--jl-motion);
}
.jobs-directory-website a:hover {
    color: var(--jl-ink);
    border-bottom-color: var(--jl-ink);
}
.jobs-directory-count {
    grid-column: 2;
    grid-row: 2 / span 3;
    align-self: end;
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 36;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: var(--jl-ink-soft);
    text-align: right;
    white-space: nowrap;
}
.jobs-directory-count a {
    color: var(--jl-ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--jl-hairline);
    padding-bottom: 1px;
    transition: color var(--jl-motion), border-color var(--jl-motion);
}
.jobs-directory-count a:hover {
    color: var(--jl-ink);
    border-bottom-color: var(--jl-ink);
}

/* Footer affordance below the directory body — "Back to Jobs Board" plus
   (on candidate pages) "Browse more candidates". */
.jobs-directory-footer {
    margin: 36px auto 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--jl-hairline);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    max-width: 980px;
}

@media (max-width: 768px) {
    .jobs-directory-header {
        grid-template-columns: minmax(0, 1fr);
    }
    .jobs-directory-count {
        grid-column: 1;
        grid-row: auto;
        text-align: left;
        margin-top: 8px;
    }
}

/* Share CTA (1.13, editorial repaint in 1.14) — tight horizontal strip
   that sits immediately under the page header. Reads as a continuation
   of the header chrome rather than its own rounded panel. */
.jobs-share-cta {
    margin: -14px auto 22px;
    max-width: 1100px;
    padding: 10px 24px;
    background: var(--jl-bg-warm);
    border-bottom: 1px solid var(--jl-hairline);
    border-radius: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}
.jobs-share-cta-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jl-ink-muted);
    font-weight: 500;
    flex-shrink: 0;
}
.jobs-share-cta-eyebrow::after {
    content: " \2192";
    margin-left: 4px;
    color: var(--jl-ink-muted);
    opacity: 0.7;
}
.jobs-share-cta-hint { display: none; }
.jobs-share-cta-row {
    display: contents;
}
.jobs-share-cta-url {
    flex: 1 1 280px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 6px 10px;
    background: var(--jl-bg-canvas);
    border: 1px solid var(--jl-hairline);
    border-radius: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--jl-ink);
}
.jobs-share-cta-btn {
    padding: 6px 14px;
    background: var(--jl-ink);
    color: #faf8f3;
    border: 1px solid var(--jl-ink);
    border-radius: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.3;
    transition: background var(--jl-motion), color var(--jl-motion);
    flex-shrink: 0;
}
.jobs-share-cta-btn:hover { background: var(--jl-accent); color: #faf8f3; }
.jobs-share-cta-btn.is-secondary {
    background: transparent;
    color: var(--jl-ink);
}

/* Edit mode (1.14) — swap the URL display for an input + Save/Cancel.
   The `is-editing` class is toggled by JS. Default view: hide editor.
   Edit view: hide URL + Copy/Open/Edit buttons. */
.jobs-share-cta:not(.is-editing) .jobs-share-cta-edit-prefix,
.jobs-share-cta:not(.is-editing) .jobs-share-cta-edit-input,
.jobs-share-cta:not(.is-editing) .jobs-share-cta-save,
.jobs-share-cta:not(.is-editing) .jobs-share-cta-cancel {
    display: none !important;
}
.jobs-share-cta.is-editing .jobs-share-cta-url,
.jobs-share-cta.is-editing [data-share-url],
.jobs-share-cta.is-editing a[target="_blank"],
.jobs-share-cta.is-editing .jobs-share-cta-edit {
    display: none !important;
}
.jobs-share-cta.is-editing .jobs-share-cta-edit-prefix,
.jobs-share-cta.is-editing .jobs-share-cta-edit-input,
.jobs-share-cta.is-editing .jobs-share-cta-save,
.jobs-share-cta.is-editing .jobs-share-cta-cancel {
    display: inline-flex !important;
}
.jobs-share-cta-edit-prefix {
    align-items: center;
    padding: 6px 0 6px 10px;
    background: var(--jl-bg-canvas);
    border: 1px solid var(--jl-hairline);
    border-right: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--jl-ink-muted);
    line-height: 1.2;
    flex-shrink: 0;
}
.jobs-share-cta-edit-input {
    flex: 1 1 200px;
    min-width: 0;
    padding: 6px 10px;
    background: var(--jl-bg-canvas);
    border: 1px solid var(--jl-hairline);
    border-radius: 0;
    border-left: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--jl-ink);
    line-height: 1.2;
}
.jobs-share-cta-edit-input:focus {
    outline: none;
    border-color: var(--jl-ink);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--jl-accent) 14%, transparent);
}
.jobs-share-cta-status {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--jl-ink-soft);
}
.jobs-share-cta-status.is-ok    { color: #2e7d32; }
.jobs-share-cta-status.is-error { color: #b3261e; }

/* ============================================================
   Public video links (1.15)
   ============================================================ */

/* Form repeater rows */
.jobs-video-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 12px 0;
    border-bottom: 1px solid var(--jl-hairline, #e6e6e6);
}
.jobs-video-row:last-of-type { border-bottom: 0; }
.jobs-video-row-actions { margin-left: auto; }
.jobs-video-remove {
    background: none;
    border: 0;
    color: #b3261e;
    font-size: 12px;
    cursor: pointer;
    padding: 6px 4px;
}
.jobs-video-remove:hover { text-decoration: underline; }
.jobs-videos-add { margin-top: 10px; }

/* Detail-page video grid + click-to-play facade */
.jobs-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.jobs-video { margin: 0; }
.jobs-video-facade,
.jobs-video-iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 8px;
}
.jobs-video-facade {
    position: relative;
    padding: 0;
    background-color: #000;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
}
.jobs-video-facade::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.12);
    transition: background 0.15s ease;
}
.jobs-video-facade:hover::after { background: rgba(0, 0, 0, 0.28); }
.jobs-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.68);
    color: #fff;
    font-size: 20px;
    padding-left: 3px;
    transition: transform 0.15s ease, background 0.15s ease;
}
.jobs-video-facade:hover .jobs-video-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: #c00;
}
.jobs-video-caption {
    margin-top: 6px;
    font-size: 13px;
    color: var(--jl-ink-soft, #555);
}

@media (max-width: 600px) {
    .jobs-video-grid { grid-template-columns: 1fr; }
    .jobs-video-row-actions { margin-left: 0; }
}