/* ════════════════════════════════════════════════════════════════
* jobs.css — every CSS rule scoped to the jobs app surface.
*
* Created in Step 12 of the jobs roadmap (mirrors the projects.css and
* posts.css extractions from Tweeks #25 + #26). Linked from each jobs
* template via is mirrored by the searchable
* .skills-picker widget below; hide the native control but keep it
* in the DOM so the form still POSTs the canonical IDs. The legacy
* .skills-select tall multiselect rule stays for any caller that
* isn't using the picker. */
.skills-select{min-height:200px}
.skills-picker-native{display:none}
.skills-picker-native select{display:none}
/* ── Skills picker — searchable multi-select widget ────────────────
* Replaces the ugly default SelectMultiple boxes. Three visible
* regions stacked vertically:
* 1. chip rail of currently-selected skills
* 2. search input + dropdown of filtered suggestions
* 3. (native hidden — owned by the form, mirrored by JS)
*/
.skills-picker{margin:0 0 18px;padding:14px 16px;
background:var(--bg-card);border:1px solid var(--border);border-radius:12px;
}
.skills-picker:last-child{margin-bottom:0}
.skills-picker-label{
display:block;font-size:var(--fs-sm);font-weight:700;
color:var(--text-secondary);margin:0 0 2px;
}
.skills-picker-help{
margin:0 0 10px;font-size:var(--fs-xs);color:var(--text-muted);line-height:1.5;
}
/* Chip rail — selected skills */
.skills-picker-chips{
display:flex;flex-wrap:wrap;gap:6px;
min-height:34px;padding:6px;
background:var(--bg-surface);
border:1px solid var(--border);border-radius:10px;
margin-bottom:10px;
}
.skills-picker-chip{
display:inline-flex;align-items:center;gap:6px;
padding:3px 4px 3px 10px;border-radius:99px;
background:rgba(205,161,44,.14);color:var(--accent);
border:1px solid rgba(205,161,44,.40);
font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;
max-width:100%;
}
.skills-picker-chip > span{
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;
}
.skills-picker-chip-x{
display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;border-radius:50%;
background:rgba(205,161,44,.18);color:var(--accent);
border:0;padding:0;cursor:pointer;font-size:var(--fs-md);line-height:1;
font-family:inherit;font-weight:700;
transition:background .12s,color .12s;
}
.skills-picker-chip-x:hover{background:var(--accent-surface);color:#1a1a1a}
.skills-picker-chip-empty{
font-size:var(--fs-xs);color:var(--text-muted);font-style:italic;
padding:5px 8px;
}
/* Search input + dropdown */
.skills-picker-search-wrap{position:relative}
.skills-picker-search{
width:100%;
background:var(--bg-surface);border:1px solid var(--border-hover);
border-radius:10px;padding:10px 14px;font-size:var(--fs-sm);
color:var(--text-primary);font-family:inherit;
transition:border-color .12s, box-shadow .12s;
}
.skills-picker-search:focus{
outline:none;border-color:rgba(205,161,44,.55);
box-shadow:0 0 0 3px rgba(205,161,44,.14);
}
.skills-picker-search::placeholder{color:var(--text-muted)}
.skills-picker-menu{
position:absolute;top:100%;left:0;right:0;z-index:30;
margin-top:4px;
background:var(--bg-card);
border:1px solid var(--border);border-radius:10px;
max-height:260px;overflow-y:auto;
box-shadow:0 12px 28px rgba(0,0,0,.32);
}
.skills-picker-menu[hidden]{display:none!important}
.skills-picker-menu-row{
display:block;width:100%;text-align:start;
padding:8px 12px;background:transparent;border:0;border-bottom:1px solid var(--border);
color:var(--text-primary);font-size:var(--fs-sm);cursor:pointer;font-family:inherit;
transition:background .12s, color .12s;
}
.skills-picker-menu-row:last-child{border-bottom:0}
.skills-picker-menu-row:hover,
.skills-picker-menu-row:focus{
background:rgba(205,161,44,.10);color:var(--accent);outline:none;
}
/* ── Apps-Cards audit: status as a left-edge ring ─────────────────
* The corner status-chip is replaced by a 4-px coloured strip down
* the start edge of the card. Encodes the same info (open / applied /
* accepted / rejected / closed) without another floating chip
* crowding the cover. Driven by ``data-job-status`` on the card root.
* inset-inline-start so it mirrors to the right under dir="rtl". */
.job-card[data-job-status]{position:relative}
.job-card[data-job-status]::before{
content:"";position:absolute;top:0;bottom:0;inset-inline-start:0;
width:4px;z-index:3;pointer-events:none;
}
.job-card[data-job-status="open"]::before{background:#2dd4bf}
.job-card[data-job-status="applied"]::before{background:#fb923c}
.job-card[data-job-status="accepted"]::before{background:#34d399}
.job-card[data-job-status="rejected"]::before{background:#f472b6}
.job-card[data-job-status="closed"]::before{background:rgba(255,255,255,.18)}
.job-card[data-job-status="own"]::before{background:rgba(205,161,44,.55)}
/* ── Apps-Cards audit: byline row under the title ─────────────────
* Holds the status pill + office chip + match pill. Locked to a
* single row (flex-wrap:nowrap + overflow:hidden) so a long office
* name + match pill can't wrap onto a second line and steal vertical
* room from the rows below — which would push the work-type chip
* strip past the body's overflow boundary and clip "Remote / Mid". */
.job-card-byline{
display:flex;flex-wrap:nowrap;align-items:center;gap:6px 10px;
margin:0 0 4px;min-height:24px;
overflow:hidden;min-width:0;
}
.job-card-byline > *{flex:0 0 auto;min-width:0}
.job-card-byline .job-card-office-chip{
/* Office chip absorbs the slack — it's the one element with
* variable-length content (the office name). Ellipsis keeps the
* row at 1 line regardless of how long the name gets. */
flex:1 1 auto;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
/* Inline match pill (replaces the corner-stack match chip on the
* card). Uses the same tier classes as .job-match-chip but smaller
* geometry tuned for an inline position. */
.job-card-match-pill{
display:inline-flex;align-items:center;gap:5px;
padding:2px 9px;border-radius:99px;
font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;
border:1px solid;line-height:1.5;
white-space:nowrap;
}
.job-card-match-pill i{font-size:var(--fs-2xs)}
.job-card-match-pill.is-strong{color:#4ade80;border-color:rgba(74,222,128,.45);background:rgba(15,32,21,.55)}
.job-card-match-pill.is-medium{color:var(--accent);border-color:rgba(205,161,44,.45);background:var(--accent-dim)}
.job-card-match-pill.is-weak{color:var(--text-muted);border-color:var(--border);background:rgba(255,255,255,.04)}
/* Inline status pill — explicit text label so the left-edge ring is
* not the only state cue. Same colour family as the ring so the two
* signals reinforce each other; the pill adds the read-out
* (Open / Applied / Accepted / Rejected / Hired). */
.job-card-status-pill{
display:inline-flex;align-items:center;gap:5px;
padding:2px 9px;border-radius:99px;
font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;
border:1px solid;line-height:1.5;
white-space:nowrap;
}
.job-card-status-pill i{font-size:var(--fs-2xs)}
/* FND-073 decisions 4+5: application STATES map to the three semantic tokens,
not five ad-hoc hues; each was also text on a 10% tint of ITSELF (1.74 in
light). -ink tokens give the text the opposite end of the hue. */
.job-card-status-pill.is-open{color:var(--success-ink);border-color:color-mix(in srgb,var(--success) 45%,transparent);background:color-mix(in srgb,var(--success) 10%,transparent)}
.job-card-status-pill.is-applied{color:var(--warning-ink);border-color:color-mix(in srgb,var(--warning) 45%,transparent);background:color-mix(in srgb,var(--warning) 10%,transparent)}
.job-card-status-pill.is-accepted{color:var(--success-ink);border-color:color-mix(in srgb,var(--success) 45%,transparent);background:color-mix(in srgb,var(--success) 10%,transparent)}
.job-card-status-pill.is-rejected{color:var(--danger-ink);border-color:color-mix(in srgb,var(--danger) 45%,transparent);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.job-card-status-pill.is-closed{color:var(--text-muted);border-color:var(--border);background:rgba(255,255,255,.04)}
.job-card-status-pill.is-own{color:var(--accent);border-color:rgba(205,161,44,.45);background:var(--accent-dim)}
/* Closed-job state — dim the card more aggressively (sinks to the
* bottom of the listing already; this is the final visual cue). */
.job-card.is-closed{opacity:.55;filter:saturate(.55)}
.job-card.is-closed:hover{opacity:.85;filter:saturate(.8)}
.job-card.is-closed .job-card-cover img,
.job-card.is-closed .job-card-cover .job-cover-fallback{filter:grayscale(.85)}
/* ── 1A · Open-call announcement card ────────────────────────────────
*
* A different shape of Job row: an office's broadcast that they'd hire
* the right person tomorrow even without a specific role open. No
* cover image (none has been authored — the card uses the visual eye
* of the gold accent strip + the bullhorn glyph), no salary / work-
* type chips (those fields are blank by design). Routed visually as
* a status-emphasis card via the brand gold accent that the rest of
* the site already uses for verification / arch-cta affordances.
* ────────────────────────────────────────────────────────────────── */
.job-card.is-announcement{
/* Same fixed height as the regular job card so mixed lists stay
* level. No cover slot — the wide gold strip on the left is the
* visual signature instead. The body carries all internal padding
* so the absolutely-positioned action row keeps its 60-px reserve
* just like the regular card. */
height:240px;
padding:0;
border-left:0;
background:linear-gradient(135deg,rgba(205,161,44,.10) 0%,var(--bg-card) 55%);
position:relative;
}
.job-card.is-announcement:hover{
background:linear-gradient(135deg,rgba(205,161,44,.18) 0%,var(--bg-surface) 55%);
border-color:rgba(205,161,44,.45);
}
/* Poster strip — 8-px gold gradient on the inline-start edge. Wider
* than the data-job-status ring used by regular cards so the open
* call reads as a poster, not a list item. Layered above the card
* background but below the body content. */
.job-card.is-announcement::after{
content:"";position:absolute;top:0;bottom:0;inset-inline-start:0;
width:8px;z-index:3;pointer-events:none;
background:linear-gradient(180deg,rgba(205,161,44,.95) 0%,rgba(255,211,94,1) 50%,rgba(205,161,44,.95) 100%);
box-shadow:0 0 12px rgba(205,161,44,.30);
}
.job-card.is-announcement .job-card-body{
/* Top + sides match the regular card; bottom reserves 60 px for
* the absolutely-positioned action row so the meta row above it
* can't be overlapped. Extra inline-start padding (32 px instead
* of 20 px) clears the 8-px gold poster strip with breathing room. */
padding:20px 24px 60px 32px;
display:flex;flex-direction:column;gap:6px;
flex:1;min-width:0;
}
/* "OPEN CALL" eyebrow above the title — replaces both the floating
* .job-announcement-chip and the .job-announcement-mark bullhorn icon
* that used to live in the top-LEFT corner. */
.job-announcement-eb{
display:inline-flex;align-items:center;gap:6px;
font-size:var(--fs-xs);font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--accent);
margin:0 0 2px;
}
.job-announcement-eb i{font-size:var(--fs-xs)}
.job-announcement-eb-suffix{
color:var(--text-muted);font-weight:700;letter-spacing:.10em;
}
/* Closing-in countdown in the meta band — amber so the urgency reads
* at a glance, replaces the older "Open until {date}" phrasing. */
.job-card-meta .job-card-countdown,
.job-card-meta .job-card-countdown i{color:#fb923c}
.job-card-meta .job-card-countdown{font-weight:700}
/* Legacy bullhorn icon + chip — kept for backwards compat with any
* caller that still emits them. New announcements use the eyebrow
* above the title; these rules are not referenced by the current
* template. */
.job-announcement-mark{
position:absolute;top:14px;inset-inline-start:8px;
width:24px;height:24px;display:flex;align-items:center;justify-content:center;
color:rgba(205,161,44,.95);font-size:var(--fs-lg);
pointer-events:none;
}
.job-announcement-chip{
display:inline-flex;align-items:center;gap:6px;
padding:5px 11px;border-radius:99px;
background:rgba(205,161,44,.16);
border:1px solid rgba(205,161,44,.55);
color:#facc15;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;text-transform:uppercase;
}
.job-announcement-chip i{font-size:var(--fs-2xs)}
/* Kind segmented control — sits as a second row on the jobs toolbar.
* Active chip uses the same brand gold the announcement card is built
* around so the toolbar's affordance reads as the same idea. The radio
* input is hidden but kept tab-reachable; clicking the label auto-
* submits the toolbar form so the chip behaves like a one-tap filter. */
/* Kind tab bar — sits below the filter form, above the listings */
.jobs-kind-bar{
display:flex;align-items:stretch;justify-content:space-between;
border-bottom:1px solid var(--border);
margin-bottom:20px;
}
.jobs-kind-tabs{display:flex;align-items:stretch}
.jobs-kind-tab{
display:inline-flex;align-items:center;gap:6px;
padding:9px 18px;
font-size:var(--fs-sm);font-weight:500;
color:var(--text-muted);
cursor:pointer;
border-bottom:2px solid transparent;
margin-bottom:-1px;
transition:color .15s,border-color .15s;
user-select:none;white-space:nowrap;
}
.jobs-kind-tab input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.jobs-kind-tab i{font-size:var(--fs-xs)}
.jobs-kind-tab:hover{color:var(--text-primary)}
.jobs-kind-tab.is-active{color:var(--accent);border-bottom-color:var(--accent)}
.jobs-kind-tab.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.jobs-kind-available{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;margin:4px 0;
border-radius:999px;
border:1px solid var(--border-hover);
font-size:var(--fs-xs);font-weight:500;
color:var(--text-muted);
cursor:pointer;user-select:none;white-space:nowrap;
align-self:center;
transition:background .15s,border-color .15s,color .15s;
}
.jobs-kind-available input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.jobs-kind-available i{font-size:var(--fs-xs)}
.jobs-kind-available:hover{border-color:rgba(205,161,44,.45);color:var(--text-primary)}
.jobs-kind-available.is-active{
background:rgba(205,161,44,.16);
border-color:rgba(205,161,44,.60);
color:var(--accent);
}
/* Listing-card action buttons — compact size so Apply / Quick apply /
* Report can sit next to each other on narrow cards without wrapping.
* Targeting the .job-card-buttons children directly keeps the rest of
* the site (view_job's hero, the apply modal's CTAs, etc.) at full
* size. */
.job-card-buttons > .arch-cta,
.job-card-buttons > .btn{
font-size:var(--fs-xs);
padding:5px 11px;
line-height:1.2;
height:auto;
}
.job-card-buttons > .arch-cta i,
.job-card-buttons > .btn i{font-size:var(--fs-xs)}
/* ──────────────────────────────────────────────────────────────────
* 1B · Job search-result card — dedicated namespace
*
* Light horizontal card used on /search/'s Jobs section. Doesn't share
* scaffolding with the vertical .job-card listing card (which carries
* cover · chip stack · apply buttons · match score) so the search
* card can evolve independently. Used by templates/jobs/_search_card.html.
* ────────────────────────────────────────────────────────────────── */
.job-search-card{
position:relative;
background:var(--bg-card);
border:1px solid var(--border);
border-radius:14px;
padding:14px 18px;margin-bottom:14px;
transition:background .2s,border-color .2s,box-shadow .2s;
}
.job-search-card:hover{
background:var(--bg-surface);
border-color:rgba(205,161,44,.30);
box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.job-search-card h4{
color:var(--text-primary);font-size:var(--fs-md);font-weight:600;
line-height:1.3;margin:0 0 6px;
}
.job-search-card p{
color:var(--text-muted);font-size:var(--fs-sm);line-height:1.5;margin:0 0 8px;
}
/* Mobile — stack the cover above the body; let the card grow to fit */
@media (max-width:640px){
.job-card{flex-direction:column;height:auto}
.job-card-cover{width:100%;height:160px}
.job-card h4{padding-right:0}
/* Kind-bar: keep the tab group + "Available only" pill on one row (inline);
the bar scrolls horizontally on very narrow phones instead of pushing the
page sideways. */
.jobs-kind-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.jobs-kind-bar::-webkit-scrollbar{display:none}
.jobs-kind-tabs{flex:0 0 auto}
.jobs-kind-tab{white-space:nowrap}
.jobs-kind-available{flex:0 0 auto;white-space:nowrap}
}
/* ── 2. Profile Jobs tab section headers ─────────────────────── */
.profile-jobs-header{
display:flex;align-items:center;gap:8px;
margin:0 0 14px;
font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--text-muted);
}
.profile-jobs-header i{color:var(--accent);font-size:var(--fs-sm)}
/* Profile Jobs / Saved tabs use the same horizontal card shape as the
* /jobs/ listing — no profile-specific override. The narrower
* .col-lg-9 column on profile (≈696 px at lg) still gives 180 px cover
* + ~516 px body, plenty of room. Tweeks #31 added a vertical-stack
* override here that the user rejected three times; #34l removed it
* for visual consistency. The base mobile-breakpoint rule below still
* collapses to vertical at ≤640 px on either page. */
.profile-jobs-count{
display:inline-flex;align-items:center;justify-content:center;
min-width:22px;height:20px;padding:0 7px;margin-inline-start:auto;
background:var(--accent-dim);color:var(--accent);
border-radius:99px;
font-size:var(--fs-xs);font-weight:700;letter-spacing:0;
}
/* ── 3. view_job hero + actions + sections ───────────────────── */
/* The page is for review + control, not marketing. A simple stack:
* back link → header (title + status chip) → quick facts → action
* panel → description → custom fields → inline messages. Action
* controls split by role (creator vs viewer). */
.jv-page{max-width:780px;margin:0 auto}
.jv-back{
display:inline-flex;align-items:center;gap:8px;
font-size:var(--fs-sm);color:var(--text-muted);text-decoration:none;
margin-bottom:18px;
transition:color .15s var(--ease);
}
.jv-back:hover{color:var(--accent)}
/* Header — title + status. Glassy translucent panel matching the
* .posts-filter-bar shell language. The gold halo at top centre
* matches the toolbar treatment so the header reads as a hero. */
.jv-head{
display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
position:relative;
padding:32px 36px;
margin-bottom:16px;
background:var(--bg-card);
border:1px solid var(--border-hover);
border-radius:var(--radius-lg);
box-shadow:0 12px 32px rgba(0,0,0,.28);
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
overflow:hidden;
}
.jv-head::before{
content:"";position:absolute;inset:0;
background:transparent;
pointer-events:none;
border-radius:var(--radius-lg);
}
[data-theme="light"] .jv-head{
background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.05);
}
.jv-head-text{flex:1;min-width:0;position:relative;z-index:1}
.jv-head-status{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:6px;position:relative;z-index:1}
.jv-position{
display:inline-block;
padding:4px 12px;border-radius:99px;
background:var(--accent-dim);color:var(--accent);
font-size:var(--fs-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
margin-bottom:10px;
}
.jv-title{
margin:0 0 10px;
font-size:32px;font-weight:700;color:var(--text-primary);
line-height:1.2;letter-spacing:-.01em;
}
.jv-creator-line{
margin:0;font-size:var(--fs-md);color:var(--text-muted);
display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.jv-creator-line a{
display:inline-flex;align-items:center;gap:6px;
color:var(--text-secondary);text-decoration:none;
transition:color .15s var(--ease);
}
.jv-creator-line a:hover{color:var(--accent)}
.jv-creator-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover}
/* Publisher attribution — small office logo + secondary "managed by" line. */
.jv-office-mark{
display:inline-block;width:22px;height:22px;border-radius:6px;
object-fit:cover;vertical-align:middle;margin:0 6px 0 4px;
border:1px solid var(--border);
}
.jv-office-mark--gradient{display:inline-block}
/* Company attribution on job detail (Step #91) */
.jv-company-link{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:inherit}
.jv-company-link:hover strong{color:var(--accent)}
.jv-company-mark{width:28px;height:28px;border-radius:8px;object-fit:cover;border:1px solid var(--border);flex-shrink:0}
.jv-company-mark--icon{display:inline-flex;align-items:center;justify-content:center;background:var(--bg-surface);color:var(--text-muted);font-size:var(--fs-md)}
.jv-company-verified{color:var(--accent);font-size:var(--fs-sm);margin-inline-start:2px}
/* Company logo inside job-card chip (Step #91) */
.job-card-company-logo{width:16px;height:16px;border-radius:4px;object-fit:cover;border:1px solid var(--border);flex-shrink:0}
.jv-creator-line--secondary{
font-size:var(--fs-sm);color:var(--text-muted);margin-top:2px;
}
.jv-creator-line--secondary a{color:var(--text-secondary)}
/* Office chip on the listing card — small inline pill that links to the
office page. Lives between the title and the description. */
.job-card-office-chip{
display:inline-flex;align-items:center;gap:6px;
margin:2px 0 8px;padding:3px 10px;
font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--accent);background:var(--bg-surface);
border:1px solid var(--border);border-radius:99px;
text-decoration:none;
}
.job-card-office-chip:hover{background:var(--overlay-hover);color:var(--accent-hover, var(--accent))}
.job-card-office-chip i{font-size:var(--fs-xs)}
/* Card meta strip + title link — used on the search page so the
markup stays free of inline styles. The strip mirrors the inline
d-flex gap-3 the listing uses; promoting it to a class keeps the
two surfaces visually identical without the inline style. */
.job-card-meta{
/* Rule 0 — one row, no wrap. Overflow clips so a long city + salary
* combo can't push the meta to a second line and steal vertical room
* from the 2-line description above. */
display:flex;flex-wrap:nowrap;gap:12px;
font-size:var(--fs-xs);color:var(--text-muted);
overflow:hidden;min-width:0;
}
.job-card-meta > span{
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
flex:0 1 auto;min-width:0;
}
.job-card-title-link{text-decoration:none;color:inherit}
.search-jobs-page-num{color:var(--text-muted);font-size:var(--fs-sm);align-self:center}
/* Quick facts strip — translucent panel, larger numbers, gold accent
* icons in soft halo. */
/* Job-info — one glassy panel with two-column rows (label · value). */
.jv-info-list{
margin:0;padding:0;
display:grid;
grid-template-columns:1fr;
gap:0;
}
.jv-info-list > div{
display:grid;
grid-template-columns:200px 1fr;
align-items:center;gap:12px;
padding:12px 0;
border-top:1px solid var(--border);
}
.jv-info-list > div:first-child{border-top:0;padding-top:0}
.jv-info-list dt{
margin:0;
display:inline-flex;align-items:center;gap:8px;
font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);
letter-spacing:.02em;
}
.jv-info-list dt i{color:var(--accent);font-size:var(--fs-sm);width:18px;text-align:center}
.jv-info-list dd{
margin:0;
font-size:var(--fs-md);color:var(--text-primary);font-weight:600;
letter-spacing:-.005em;
}
@media (max-width:576px){
.jv-info-list > div{grid-template-columns:1fr;gap:4px}
}
/* About-this-role section gets a slightly larger heading + breathing room
* since it's the first content section right after the header. */
.jv-section-about .jv-description{font-size:var(--fs-lg);line-height:1.78}
/* Action toolbar — three-cluster layout.
* `.jv-actions-primary` sits left, `.jv-actions-secondary` flex-grows
* in the middle and pushes `.jv-actions-danger` to the right edge so
* the user reads the row as: important → tools → careful actions.
* Each cluster wraps internally, so on narrow viewports the row stacks
* cleanly without losing grouping. */
.jv-actions{
display:flex;flex-wrap:wrap;align-items:center;gap:14px;
margin-bottom:22px;
}
.jv-actions-primary,
.jv-actions-secondary,
.jv-actions-danger{
display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.jv-actions-secondary{flex:1 1 auto;justify-content:flex-start}
.jv-actions-danger{margin-inline-start:auto}
/* Uniform pill height + padding so the cluster reads as one row.
* `.arch-cta` already has its own height; we just normalise font and
* neutral-button proportions. */
.jv-actions .arch-cta,
.jv-actions .btn,
.jv-actions .arch-btn-ok,
.jv-actions .arch-btn-red{font-size:var(--fs-sm)}
.jv-actions .btn,
.jv-actions .arch-btn-red{
height:38px;padding:0 14px;
display:inline-flex;align-items:center;gap:8px;
white-space:nowrap;
}
.jv-actions .btn i,
.jv-actions .arch-btn-red i,
.jv-actions .arch-cta i{font-size:var(--fs-sm);line-height:1}
/* Section blocks — description, custom fields, messages. Glassy edge
* matching the head/facts panels. */
.jv-section{
background:var(--bg-card);
border:1px solid var(--border-hover);
border-radius:var(--radius-lg);
padding:22px 24px;
margin-bottom:16px;
box-shadow:0 6px 20px rgba(0,0,0,.18);
backdrop-filter:blur(10px) saturate(130%);
-webkit-backdrop-filter:blur(10px) saturate(130%);
}
[data-theme="light"] .jv-section{
background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.05);
}
.jv-section-title{
display:flex;align-items:center;gap:10px;
margin:0 0 14px;
font-size:var(--fs-md);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--text-secondary);
}
.jv-section-title i{color:var(--accent);font-size:var(--fs-md)}
.jv-section-sub{margin:0 0 14px;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.55}
.jv-description{font-size:var(--fs-lg);color:var(--text-primary);line-height:1.75;overflow-wrap:break-word}
.jv-description p{margin:0 0 14px}
.jv-empty{font-size:var(--fs-sm);color:var(--text-muted);margin:0;font-style:italic}
/* ── 4. Custom-field preview rows ────────────────────────────── */
.jv-custom-fields{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:8px;
}
.jv-custom-fields li{
display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:10px 14px;
background:var(--bg-surface);border:1px solid var(--border);
border-radius:var(--radius-sm);
}
.jv-cf-name{font-size:var(--fs-sm);color:var(--text-primary);font-weight:600}
.jv-cf-meta{font-size:var(--fs-xs);color:var(--text-muted);letter-spacing:.02em;text-transform:uppercase}
/* Question / Extra-info subhead inside the Application form preview.
Two of these can render in sequence — give them a small top margin so
they don't crowd the previous list. */
.jv-cf-subhead{
font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--accent);margin:18px 0 8px;display:flex;align-items:center;gap:8px;
}
.jv-cf-subhead i{font-size:var(--fs-xs)}
.jv-cf-subhead:first-of-type{margin-top:6px}
/* ── 5. Message thread bubbles (viewer + creator side) ──────── */
.jv-msg-thread{
max-height:340px;overflow-y:auto;
display:flex;flex-direction:column;gap:8px;
padding:6px 2px;margin-bottom:14px;
}
.jv-msg{
max-width:80%;
padding:10px 14px;border-radius:14px;
font-size:var(--fs-sm);line-height:1.55;
}
.jv-msg p{margin:0}
.jv-msg small{display:block;margin-top:4px;font-size:var(--fs-2xs);opacity:.6}
.jv-msg--me{align-self:flex-end;background:var(--accent-dim);color:var(--text-primary);border:1px solid rgba(205,161,44,.30);border-end-end-radius:4px}
.jv-msg--them{align-self:flex-start;background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border);border-end-start-radius:4px}
.jv-msg-empty{padding:18px 0;text-align:center}
#jvMsgForm textarea{
width:100%;
background:var(--bg-surface);
color:var(--text-primary);
border:1px solid var(--border);border-radius:var(--radius-sm);
padding:10px 12px;
font-family:inherit;font-size:var(--fs-sm);line-height:1.55;
resize:vertical;min-height:80px;
}
#jvMsgForm textarea:focus{outline:none;background:var(--bg-card);border-color:rgba(205,161,44,.45)}
.jv-msg-actions{display:flex;justify-content:flex-end;margin-top:10px}
/* ── 6. Creator inline applicants ──────────────────────────── */
/* Replaces the standalone job_applied page. Each row: avatar+
* profession header (linked to profile), status chip, action stack
* (Resume, Messages w/ unread badge, Accept/Reject). */
.jv-applicants{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.jv-applicant{
background:var(--bg-surface);
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:14px 16px;
transition:border-color .15s var(--ease),background .15s var(--ease);
}
.jv-applicant:hover{border-color:rgba(205,161,44,.30);background:var(--bg-card)}
.jv-applicant.is-accepted{border-inline-start:3px solid #4ade80}
.jv-applicant.is-rejected{border-inline-start:3px solid #f87171;opacity:.85}
.jv-applicant-head{
display:flex;align-items:center;gap:12px;
margin-bottom:10px;
}
.jv-applicant-head-link{
display:flex;align-items:center;gap:12px;flex:1;min-width:0;
text-decoration:none;color:inherit;
}
.jv-applicant-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0}
.jv-applicant-text{flex:1;min-width:0}
.jv-applicant-text strong{display:block;font-size:var(--fs-md);color:var(--text-primary);font-weight:600;letter-spacing:-.005em}
.jv-applicant-text span{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--text-muted)}
.jv-applicant-actions{
display:flex;flex-wrap:wrap;align-items:center;gap:14px;
padding-top:10px;
border-top:1px solid var(--border);
}
.jv-applicant-actions-primary,
.jv-applicant-actions-decision{
display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;
}
/* Decision cluster (Accept / Reject) pinned to the row's far end so
* the eye reads `tools → decide`. inline-start:auto keeps it correct
* under RTL. */
.jv-applicant-actions-decision{margin-inline-start:auto}
/* Force one shared height across the row so Resume / Application details /
* Messages / Schedule interview / Reject all line up exactly with Accept.
* `height:auto` was content-driven; varying icon/line-height nudged each
* pill by a pixel or two and the cluster looked uneven. */
.jv-applicant-actions .btn,
.jv-applicant-actions .arch-btn-ok,
.jv-applicant-actions .arch-btn-red{
height:34px;padding:0 14px;
font-size:var(--fs-xs);line-height:1;
display:inline-flex;align-items:center;gap:6px;
white-space:nowrap;
}
.jv-applicant-actions .btn i,
.jv-applicant-actions .arch-btn-ok i,
.jv-applicant-actions .arch-btn-red i{font-size:var(--fs-xs);line-height:1}
.jv-applicant-msg-link{position:relative}
/* Per-applicant inline thread (creator side) — collapse panel that
* opens under the applicant card. The same chat-bubble vocabulary as
* the viewer-side thread, but with a compact reply form. */
.jv-applicant-thread{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.jv-applicant-thread .jv-msg-thread{max-height:280px;margin-bottom:10px}
/* Reply form — column flex so the staged-files tray sits ABOVE the
* input row, never overlapping the paperclip / send buttons. */
.jv-creator-reply{display:flex;flex-direction:column;gap:8px}
.jv-creator-reply .jv-msg-row{display:flex;gap:10px;align-items:flex-end}
.jv-creator-reply textarea{
flex:1;min-height:46px;
background:var(--bg-surface);
border:1px solid var(--border);border-radius:var(--radius-sm);
padding:8px 12px;color:var(--text-primary);
font-family:inherit;font-size:var(--fs-sm);line-height:1.5;resize:vertical;
}
.jv-creator-reply textarea:focus{outline:none;background:var(--bg-card);border-color:rgba(205,161,44,.45)}
.jv-creator-reply .arch-cta{flex-shrink:0;height:42px;padding:0 16px}
/* Same column rule for the viewer-side jvMsgForm so it shares the
* tray-above-row layout. */
#jvMsgForm{display:flex;flex-direction:column;gap:8px}
#jvMsgForm .jv-msg-row,
.jv-msg-locked .jv-msg-row{display:flex;gap:10px;align-items:center}
/* Visitor-side textarea: single-row, locked-height, no resize handle —
* stays flush with the .arch-cta send button (40px) so the paperclip,
* input, and CTA all share one baseline. Long messages scroll inside
* instead of growing the field; resize is killed so the user can't
* pull it taller and break the alignment. */
#jvMsgForm textarea,
.jv-msg-locked textarea{
flex:1;min-width:0;
height:40px;min-height:40px;max-height:40px;
padding:9px 12px;line-height:1.4;
background:var(--bg-surface);
border:1px solid var(--border);border-radius:var(--radius-sm);
color:var(--text-primary);font-family:inherit;font-size:var(--fs-sm);
resize:none;overflow:auto;
}
#jvMsgForm textarea:focus{
outline:none;background:var(--bg-card);
border-color:rgba(205,161,44,.45);
}
#jvMsgForm .arch-cta,
.jv-msg-locked .arch-cta{flex-shrink:0;height:40px;padding:0 18px}
/* Mobile: a wide "Send message" button squeezes the textarea to a sliver on a
* narrow card. Stack the composer — full-width textarea on its own line, with
* the attach + send buttons on the row below it. */
@media (max-width:640px){
#jvMsgForm .jv-msg-row,
.jv-msg-locked .jv-msg-row,
.jv-creator-reply .jv-msg-row{flex-wrap:wrap}
#jvMsgForm textarea,
.jv-msg-locked textarea,
.jv-creator-reply textarea{flex-basis:100%;order:-1}
#jvMsgForm .arch-cta,
.jv-msg-locked .arch-cta,
.jv-creator-reply .arch-cta{flex:1}
}
.jv-msg-locked{display:flex;flex-direction:column;gap:8px}
.jv-applicant-badge{
display:inline-flex;align-items:center;justify-content:center;
min-width:18px;height:18px;padding:0 6px;
margin-inline-start:6px;
background:var(--accent-surface);color:var(--bg-deep);
border-radius:99px;
font-size:var(--fs-2xs);font-weight:700;
}
/* Creator conversation list — entries link to the full thread. */
.jv-conv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.jv-conv-list li{margin:0}
.jv-conv-list a{
display:flex;align-items:center;gap:12px;
padding:10px 12px;
background:var(--bg-surface);border:1px solid var(--border);
border-radius:var(--radius-md);text-decoration:none;
transition:background .15s var(--ease),border-color .15s var(--ease);
}
.jv-conv-list a:hover{background:var(--bg-card);border-color:rgba(205,161,44,.30)}
.jv-conv-list img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}
.jv-conv-text{flex:1;min-width:0}
.jv-conv-text strong{display:block;font-size:var(--fs-sm);color:var(--text-primary);font-weight:600}
.jv-conv-text p{margin:2px 0 0;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jv-conv-time{flex-shrink:0;font-size:var(--fs-xs);color:var(--text-muted)}
@media (max-width:480px){
.jv-head{flex-direction:column;align-items:stretch;padding:20px 18px}
.jv-head-status{align-items:flex-start}
.jv-section{padding:16px 16px}
/* Mobile — collapse the three clusters into one full-width column
* stack and let each pill grow to fill the row, so taps are roomy. */
.jv-actions{flex-direction:column;align-items:stretch;gap:10px}
.jv-actions-primary,
.jv-actions-secondary,
.jv-actions-danger{width:100%}
.jv-actions-danger{margin-inline-start:0}
.jv-actions .arch-cta,
.jv-actions .btn,
.jv-actions .arch-btn-red{flex:1;justify-content:center;min-width:120px}
}
/* ── 7. Apply form (multi-section) ───────────────────────────── */
/* Applicant-facing rich-apply page. Sections: cover letter, resume,
* certifications, photos, creator questions, extra fields, additional
* contact, recommendation. All optional. */
.apply-cover-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.apply-cover-grid{grid-template-columns:1fr}}
.apply-cell{display:flex;flex-direction:column;gap:6px;margin:0}
.form-group-title-label{
font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--text-muted);
}
/* Apply-cell shell — wraps every common input type so forms inside a
* modal (Schedule interview, Apply, etc.) read as one consistent shape
* instead of a mix of native and themed widgets. */
.apply-cell textarea,
.apply-cell input[type="text"],
.apply-cell input[type="email"],
.apply-cell input[type="url"],
.apply-cell input[type="tel"],
.apply-cell input[type="number"],
.apply-cell input[type="date"],
.apply-cell input[type="time"],
.apply-cell input[type="datetime-local"],
.apply-cell select{
width:100%;padding:10px 12px;
background:var(--bg-surface);
border:1px solid var(--border);border-radius:var(--radius-sm);
color:var(--text-primary);font-size:var(--fs-sm);line-height:1.55;
font-family:inherit;
}
.apply-cell textarea{resize:vertical;min-height:140px}
.apply-cell select{
appearance:none;-webkit-appearance:none;
/* Custom caret matches the rest of the site's selects */
background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),
linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-inline-end:34px;
}
.apply-cell input[type="datetime-local"],
.apply-cell input[type="date"],
.apply-cell input[type="time"]{
/* Make the native picker icon legible against the dark surface */
color-scheme:dark;
}
[data-theme="light"] .apply-cell input[type="datetime-local"],
[data-theme="light"] .apply-cell input[type="date"],
[data-theme="light"] .apply-cell input[type="time"]{color-scheme:light}
.apply-cell textarea:focus,
.apply-cell input:focus,
.apply-cell select:focus{outline:none;background:var(--bg-card);border-color:rgba(205,161,44,.45)}
.apply-cf{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.apply-cf-label{
font-size:var(--fs-sm);font-weight:600;color:var(--text-primary);
}
.apply-cf-label em{font-style:normal;color:var(--accent);font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.apply-cf textarea,
.apply-cf input[type="text"],
.apply-cf select{
width:100%;padding:10px 12px;
background:var(--bg-surface);
border:1px solid var(--border);border-radius:var(--radius-sm);
color:var(--text-primary);font-size:var(--fs-sm);line-height:1.55;
font-family:inherit;resize:vertical;
}
.apply-cf-checkbox{
display:inline-flex;align-items:center;gap:8px;
padding:8px 12px;
background:var(--bg-surface);
border:1px solid var(--border);border-radius:var(--radius-sm);
color:var(--text-secondary);font-size:var(--fs-sm);cursor:pointer;
transition:border-color .15s var(--ease);
}
.apply-cf-checkbox:hover{border-color:var(--border-hover)}
.apply-cf-checkbox input[type="checkbox"]{accent-color:var(--accent);width:14px;height:14px}
/* Soft danger callout for the "we don't recommend sharing private contact" hint. */
.apply-warn{
display:flex;align-items:flex-start;gap:10px;
padding:10px 14px;
background:rgba(178,62,61,.08);
border:1px solid rgba(178,62,61,.30);
border-radius:var(--radius-md);
color:var(--text-primary);font-size:var(--fs-sm);line-height:1.55;
}
.apply-warn i{flex-shrink:0;margin-top:2px;color:var(--danger);font-size:var(--fs-sm)}
/* Quick-apply WARNING modal — info list + tip callout.
* Lives inside the standard .arch-modal shell with is-danger hero.
* The list lays out the "what this is / what it isn't" bullets; the
* tip block calls out the better alternative (view the full job
* first) in a red-tinted panel matching the danger theme. All
* content sits centered inside the modal body. */
.quick-apply-list{
list-style:none;
margin:0 auto 16px;padding:0;
display:flex;flex-direction:column;align-items:center;gap:10px;
max-width:520px;
}
.quick-apply-list li{
display:inline-flex;align-items:flex-start;gap:10px;
font-size:var(--fs-sm);line-height:1.55;color:var(--text-secondary);
text-align:start; /* keep multi-line text reading naturally */
}
.quick-apply-list li i{
flex-shrink:0;
margin-top:3px;
color:var(--danger);font-size:var(--fs-xs);opacity:.85;
}
.quick-apply-tip{
display:flex;align-items:flex-start;gap:12px;
margin:0 auto;
padding:14px 16px;
max-width:520px;
background:rgba(178,62,61,.10);
border:1px solid rgba(178,62,61,.35);
border-radius:var(--radius-md);
font-size:var(--fs-sm);line-height:1.6;color:var(--text-primary);
text-align:start;
}
.quick-apply-tip i{
flex-shrink:0;
margin-top:2px;
color:var(--danger);font-size:var(--fs-md);
}
/* Resume completeness panels inside the quick-apply warning modal.
* `.quick-apply-missing` is the red attention block (lists what the
* employer would NOT see); `.quick-apply-complete` is the calmer
* green confirmation when nothing is missing. Both share the modal's
* inset width with the tip block above them. */
.quick-apply-missing{
margin:14px auto 0;max-width:520px;
padding:14px 16px;
background:rgba(178,62,61,.10);
border:1px solid rgba(178,62,61,.35);
border-left:4px solid var(--danger);
border-radius:var(--radius-md);
text-align:start;
}
.quick-apply-missing-head{
display:flex;align-items:center;gap:10px;
margin:0 0 10px;font-size:var(--fs-sm);font-weight:700;
color:var(--danger);
}
.quick-apply-missing-head i{font-size:var(--fs-md)}
.quick-apply-missing-list{
list-style:none;padding:0;margin:0 0 12px;
display:grid;gap:6px;
}
.quick-apply-missing-list li{
display:flex;align-items:center;gap:10px;
font-size:var(--fs-sm);color:var(--text-primary);
}
.quick-apply-missing-list li i{
width:14px;flex-shrink:0;
color:var(--danger);font-size:var(--fs-xs);
}
.quick-apply-missing-link{
display:inline-flex;align-items:center;gap:6px;
font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--danger);text-decoration:none;
padding:6px 12px;border:1px solid rgba(178,62,61,.45);
border-radius:99px;
background:rgba(178,62,61,.06);
transition:background .15s,color .15s,border-color .15s;
}
.quick-apply-missing-link:hover{
background:rgba(178,62,61,.18);
border-color:rgba(178,62,61,.65);
color:var(--danger);
}
.quick-apply-complete{
margin:14px auto 0;max-width:520px;
padding:12px 16px;text-align:start;
display:flex;align-items:center;gap:10px;
background:rgba(29,158,117,.10);
border:1px solid rgba(29,158,117,.35);
border-radius:var(--radius-md);
color:var(--success);font-size:var(--fs-sm);font-weight:600;
}
.quick-apply-complete i{font-size:var(--fs-md);color:var(--success)}
/* ── 8. edit_job — current cover preview before the file input ── */
.job-cover-preview{
margin-bottom:14px;
padding:10px;
background:var(--bg-surface);
border:1px solid var(--border);
border-radius:var(--radius-md);
}
.job-cover-preview img{
width:100%;height:auto;max-height:220px;
object-fit:cover;
border-radius:var(--radius-sm);
display:block;
}
/* When .job-cover-preview is shown above the cover field, hide crispy's
* default "Currently: · Clear" stack — the preview already
* conveys the same info visually. */
.job-cover-preview ~ #div_id_job_cover .form-text,
.job-cover-preview ~ #div_id_job_cover a[href*="/uploads/"],
.job-cover-preview ~ #div_id_job_cover a[href*="/users_uploads/"]{display:none}
.job-cover-preview ~ #div_id_job_cover label[for$="-clear_id"],
.job-cover-preview ~ #div_id_job_cover input[type="checkbox"][id$="-clear_id"]{display:none}
/* ── 9. add_job custom-fields builder ───────────────────────── */
/* Inline mini-form for the job creator to declare the fields the
* applicant will fill. Each row carries name + type + required toggle,
* and the textarea for select-type options reveals only when needed. */
/* Custom-fields editor styles moved to style.css (loaded site-wide) so the
* projects _custom_fields_editor.html partial — rendered on a page that does
* NOT load jobs.css — picks them up. The jobs custom-field markup still
* inherits them via style.css. Single source: search ".custom-field" there. */
/* ── 10. Step-12 utility classes (replace inline style=) ─────── */
/* Modal action strips share one of two padding contexts — full pad or
* top-only. Promoting them to classes lets every jobs modal drop the
* inline style="padding:14px 22px 22px;border-top:…" repetition. */
.jobs-modal-actions{padding:14px 22px 22px;border-top:1px solid var(--border);margin-top:6px}
.jobs-modal-actions--inset{padding:14px 0 0;border-top:1px solid var(--border);margin-top:14px}
/* Quick-apply intro paragraph + its big-margin variant. */
.jobs-modal-intro{font-size:var(--fs-md);line-height:1.6;margin:0 0 14px}
/* Delete-job warning modal's secondary nudge ("If you just want it off
* the listing, choose Hide instead"). */
.jobs-delete-nudge{margin-top:10px}
/* Narrow-container variants used by add_job (680) and apply_form (780) —
* keeps form pages from stretching to the global container width. */
.jobs-container-680{max-width:680px}
.jobs-container-780{max-width:780px}
/* "Posting as office" disabled-picker fallback hint. */
.jobs-form-text-muted{margin:6px 0 0;font-size:var(--fs-sm);color:var(--text-muted)}
/* The Add-field button sits below the custom-fields list. */
.jobs-add-field-btn{margin-top:8px}
/* Apply-form "…or attach a file" cell sits below the textarea cell. */
.apply-cell--mt-14{margin-top:14px}
/* ── 14. Card chip strip — work-type / arrangement / level / years ──
* Up-to-four coloured pills that surface the structural facts the
* meta strip would otherwise hide. Renders identically on every
* jobs surface (listing card, search card, view_job info dl) so the
* same fact reads the same colour everywhere. */
.job-chip-strip{
display:flex;flex-wrap:wrap;gap:6px;
margin:2px 0 6px;
/* Cap visible chips at 4 even if a future model adds a fifth — the
* partial only emits 4, but this rule defends against drift. */
max-height:60px;overflow:hidden;
}
.job-chip{
display:inline-flex;align-items:center;gap:5px;
padding:3px 9px;border-radius:99px;
font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;
background:var(--bg-surface);
border:1px solid var(--border);
color:var(--text-secondary);
white-space:nowrap;line-height:1.4;
}
.job-chip i{font-size:var(--fs-2xs);opacity:.9}
/* Work-type palette — same per-type icons the gradient fallback uses
* so cards with covers and cards without "rhyme" visually. */
.job-chip--work-type-full_time {color:#67e8f9;border-color:rgba(103,232,249,.40);background:rgba(103,232,249,.10)}
.job-chip--work-type-part_time {color:#a78bfa;border-color:rgba(167,139,250,.40);background:rgba(167,139,250,.10)}
.job-chip--work-type-contract {color:#fb923c;border-color:rgba(251,146,60,.40);background:rgba(251,146,60,.10)}
.job-chip--work-type-temporary {color:#f472b6;border-color:rgba(244,114,182,.40);background:rgba(244,114,182,.10)}
.job-chip--work-type-internship {color:#34d399;border-color:rgba(52,211,153,.40);background:rgba(52,211,153,.10)}
.job-chip--work-type-freelance {color:#facc15;border-color:rgba(250,204,21,.40);background:rgba(250,204,21,.10)}
/* Arrangement palette — three values, three colours. Building (on-site)
* stays neutral; Remote leans cool sky; Hybrid amber for the midpoint. */
.job-chip--arrangement-on_site {color:var(--text-secondary);border-color:var(--border-hover);background:var(--bg-card)}
.job-chip--arrangement-remote {color:#60a5fa;border-color:rgba(96,165,250,.40);background:rgba(96,165,250,.10)}
.job-chip--arrangement-hybrid {color:#fbbf24;border-color:rgba(251,191,36,.40);background:rgba(251,191,36,.10)}
/* Experience-level — junior amber, mid sky, senior gold, manager rose.
* Roughly matches the project's wider semantic palette. */
.job-chip--level-junior {color:#fbbf24;border-color:rgba(251,191,36,.40);background:rgba(251,191,36,.10)}
.job-chip--level-mid {color:#67e8f9;border-color:rgba(103,232,249,.40);background:rgba(103,232,249,.10)}
.job-chip--level-senior {color:var(--accent);border-color:rgba(205,161,44,.45);background:var(--accent-dim)}
.job-chip--level-manager {color:#f472b6;border-color:rgba(244,114,182,.40);background:rgba(244,114,182,.10)}
/* Experience-years — neutral by design; the number is what matters. */
.job-chip--years{color:var(--text-secondary);border-color:var(--border)}
/* When the chip strip lives inside the view_job info dl , the
* surrounding column already provides spacing. Drop the partial's
* default top/bottom margin so the chip aligns with the label row. */
.jv-info-list dd .job-chip{margin:0}
/* ── 15. Match-score chip — listing card + view_job hero ─────────
* Three intensity tiers map to the score tier (75+ strong / 50–74
* medium / <50 weak). The chip lives next to the status chip on the
* card, and inside .jv-head-status on view_job. */
.job-match-chip{
display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;border-radius:99px;
font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;
background:rgba(15,21,32,.85);
border:1px solid var(--border-hover);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.job-match-chip i{font-size:var(--fs-2xs)}
.job-match-chip small{font-weight:500;font-size:var(--fs-2xs);opacity:.85;margin-inline-start:4px}
/* Tier colour: strong=green, medium=gold, weak=muted. */
.job-match-chip.is-strong{color:#4ade80;border-color:rgba(74,222,128,.45);background:rgba(15,32,21,.92)}
.job-match-chip.is-medium{color:var(--accent);border-color:rgba(205,161,44,.45);background:var(--accent-dim)}
.job-match-chip.is-weak{color:var(--text-muted);border-color:var(--border)}
/* Listing card: the match chip rides next to the status chip inside
* the `.job-card-chip-stack` wrapper. The wrapper handles positioning;
* children stay in normal flow. The mobile breakpoint moves the whole
* stack to the bottom-left so the cover image stays unobstructed. */
.job-card-chip-stack > .job-match-chip,
.job-card-chip-stack > .job-status-chip{
position:static;
}
@media (max-width:640px){
.job-card-chip-stack{
top:auto;bottom:12px;
inset-inline-start:12px;inset-inline-end:auto;
flex-wrap:wrap;
}
}
/* ── Featured chip (Step 22) ────────────────────────────────────
* Gold star pill, brand colour. On the listing card it pins to the
* top-LEFT corner of the cover so it doesn't fight with the status
* chip on the right; on view_job's .jv-head-status it just stacks
* above the status chip. */
.job-featured-chip{
display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;border-radius:99px;
font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:#1a1a1a;
background:linear-gradient(135deg, var(--accent), #ffd35e);
border:1px solid rgba(205,161,44,.55);
box-shadow:0 4px 12px rgba(205,161,44,.30);
}
.job-featured-chip i{font-size:var(--fs-2xs)}
.job-card .job-featured-chip{
/* Inline-start so it mirrors to top-RIGHT under dir="rtl" — that
* keeps the featured pill on the OPPOSITE side from the status
* chip stack (.job-card-chip-stack uses inline-end). */
position:absolute;top:12px;inset-inline-start:12px;z-index:2;
}
@media (max-width:640px){
.job-card .job-featured-chip{position:static;margin-bottom:6px;display:inline-flex}
}
/* V3 Step 35 — inline "Commission" chip (one-off freelance projects). Sits in
* the card byline in normal flow, so it never collides with the absolute
* featured chip or the status-pill stack. */
.job-kind-chip--commission{
display:inline-flex;align-items:center;gap:5px;margin:2px 0 6px;
padding:3px 9px;border-radius:99px;
font-size:var(--fs-2xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--accent-strong,#8a6d1f);
background:var(--accent-surface,rgba(205,161,44,.12));
border:1px solid rgba(205,161,44,.40);
}
.job-kind-chip--commission i{font-size:var(--fs-2xs)}
/* ── 16. Saved-search modal + manage page (Step 18) ──────────────
* Three-cell row inside the modal: name input + frequency select +
* (the submit button is in the actions strip below). The manage-page
* inline edit row uses the same shape minus the labels. */
.jobs-saved-freq-cell{margin-top:14px}
.jobs-saved-row{
display:grid;gap:10px;align-items:center;
grid-template-columns:1fr 200px auto;
margin:8px 0 12px;
}
.jobs-saved-row input[type="text"]{
height:36px;padding:0 12px;
background:var(--bg-surface);border:1px solid var(--border);
border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--fs-sm);
}
.jobs-saved-row select{
height:36px;padding:0 10px;
background:var(--bg-surface);border:1px solid var(--border);
border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--fs-sm);
}
@media (max-width:640px){
.jobs-saved-row{grid-template-columns:1fr}
}
/* ── 17. Hiring-pipeline kanban (Step 19) ───────────────────────── */
.jv-applicants-head{
display:flex;align-items:center;justify-content:space-between;gap:14px;
margin-bottom:14px;flex-wrap:wrap;
}
.jv-applicants-head .jv-section-title{margin:0}
.jv-view-toggle{
display:inline-flex;background:var(--bg-surface);
border:1px solid var(--border);border-radius:99px;padding:3px;
}
.jv-view-toggle-btn{
display:inline-flex;align-items:center;gap:6px;
padding:5px 12px;border-radius:99px;
font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;
color:var(--text-muted);text-decoration:none;
transition:background .15s var(--ease),color .15s var(--ease);
}
.jv-view-toggle-btn.is-active{
background:var(--accent-dim);color:var(--accent);
}
.jv-view-toggle-btn:hover:not(.is-active){color:var(--text-primary)}
.jv-kanban-toolbar{
display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-bottom:14px;padding:10px 14px;
background:var(--bg-surface);border:1px solid var(--border);
border-radius:var(--radius-md);
flex-wrap:wrap;
}
.jv-kanban-selected{
display:inline-flex;align-items:center;gap:6px;
font-size:var(--fs-sm);font-weight:600;color:var(--text-secondary);
}
.jv-kanban-selected i{color:var(--accent)}
.jv-kanban-toolbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.jv-kanban-bulk-stage{
height:34px;padding:0 10px;
background:var(--bg-card);border:1px solid var(--border);
border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--fs-sm);
}
.jv-kanban{
display:grid;
grid-template-columns:repeat(5, minmax(0, 1fr));
gap:10px;
/* Horizontal scroll on narrow screens — each column keeps a min
* width so content doesn't pancake into unreadable slivers. */
overflow-x:auto;
}
@media (max-width:1200px){.jv-kanban{grid-template-columns:repeat(5, minmax(180px, 1fr))}}
.jv-kanban-col{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:10px;
display:flex;flex-direction:column;gap:8px;
min-height:240px;
transition:border-color .15s var(--ease),background .15s var(--ease);
}
.jv-kanban-col.is-drop-target{
border-color:var(--accent);
background:var(--accent-dim);
}
.jv-kanban-col-head{
display:flex;align-items:center;justify-content:space-between;
padding:0 4px 6px;border-bottom:1px dashed var(--border);
}
.jv-kanban-col-name{
font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--text-muted);
}
.jv-kanban-col-count{
display:inline-flex;align-items:center;justify-content:center;
min-width:20px;height:20px;padding:0 6px;
background:var(--accent-dim);color:var(--accent);
border-radius:99px;font-size:var(--fs-xs);font-weight:700;
}
.jv-kanban-col-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.jv-kanban-col-empty{
padding:18px 8px;text-align:center;
font-size:var(--fs-xs);color:var(--text-muted);font-style:italic;
}
.jv-kanban-card{
position:relative;
padding:10px 10px 8px;
background:var(--bg-surface);
border:1px solid var(--border);
border-radius:var(--radius-sm);
cursor:grab;
transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .12s var(--ease);
}
.jv-kanban-card:hover{border-color:rgba(205,161,44,.30);box-shadow:0 4px 14px rgba(0,0,0,.20)}
.jv-kanban-card.is-dragging{opacity:.45;cursor:grabbing}
.jv-kanban-card-pick{position:absolute;top:6px;inset-inline-end:8px;margin:0}
.jv-kanban-card-pick input{accent-color:var(--accent);width:14px;height:14px;cursor:pointer}
.jv-kanban-card-head{
display:flex;align-items:center;gap:8px;
text-decoration:none;color:inherit;
padding-inline-end:24px; /* room for the checkbox — flips under RTL */
}
.jv-kanban-card-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}
.jv-kanban-card-text{min-width:0;flex:1}
.jv-kanban-card-text strong{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jv-kanban-card-text span{display:block;font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jv-kanban-card-meta{
display:flex;gap:10px;
margin-top:6px;
font-size:var(--fs-2xs);color:var(--text-muted);
}
.jv-kanban-card-meta i{color:var(--accent);opacity:.85}
/* ── 18. Applicant notes (creator-private; Step 19) ─────────────── */
.jv-applicant-notes{
margin-top:14px;padding-top:14px;
border-top:1px solid var(--border);
}
.jv-applicant-notes-head{
font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--text-muted);
margin:0 0 8px;display:inline-flex;align-items:center;gap:6px;
}
.jv-applicant-notes-head i{color:var(--accent)}
.jv-applicant-note{
display:flex;flex-direction:column;gap:4px;
padding:8px 12px;margin-bottom:6px;
background:var(--bg-card);border:1px solid var(--border);
border-radius:var(--radius-sm);
}
.jv-applicant-note-meta{
display:flex;justify-content:space-between;align-items:center;gap:10px;
font-size:var(--fs-xs);color:var(--text-muted);
}
.jv-applicant-note-body{
font-size:var(--fs-sm);line-height:1.55;color:var(--text-primary);
white-space:pre-wrap;
}
.jv-applicant-note-form{
display:flex;flex-direction:column;gap:6px;margin-top:8px;
}
.jv-applicant-note-form textarea{
width:100%;min-height:60px;padding:8px 10px;
background:var(--bg-surface);border:1px solid var(--border);
border-radius:var(--radius-sm);color:var(--text-primary);
font-family:inherit;font-size:var(--fs-sm);line-height:1.5;resize:vertical;
}
.jv-applicant-note-form-row{display:flex;justify-content:flex-end}
/* .jv-note-delete-btn → .arch-icon-btn --xs --pill --danger (FR-4 Wave 2). */
/* ── 19. Insights dashboard (Step 20) ─────────────────────────── */
.jobs-kpi-grid{
display:grid;gap:12px;
grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
margin:6px 0 4px;
}
.jobs-kpi{
padding:14px 16px;
background:var(--bg-surface);
border:1px solid var(--border);
border-radius:var(--radius-md);
display:flex;flex-direction:column;gap:4px;
}
.jobs-kpi-label{
margin:0;
font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--text-muted);display:inline-flex;align-items:center;gap:6px;
}
.jobs-kpi-label i{color:var(--accent);font-size:var(--fs-xs)}
.jobs-kpi-value{
margin:0;font-size:28px;font-weight:700;color:var(--text-primary);
line-height:1.1;letter-spacing:-.01em;
}
.jobs-kpi-sub{
margin:0;font-size:var(--fs-xs);color:var(--text-muted);line-height:1.4;
}
/* Pure-CSS bar chart — two stacked bars per day, scaled against the
* series max so a single tall day doesn't crush the rest. No JS chart
* library; matches the posts insights pattern from Tweeks #26 Step 10. */
.jobs-chart{
display:flex;align-items:flex-end;gap:4px;
height:180px;padding:6px 4px;
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--radius-md);
overflow-x:auto;
}
.jobs-chart-day{
flex:1;min-width:14px;
display:flex;flex-direction:column;align-items:center;gap:4px;
height:100%;
}
.jobs-chart-stacks{
flex:1;width:100%;
display:flex;align-items:flex-end;justify-content:center;gap:2px;
}
.jobs-chart-bar{
width:6px;min-height:1px;border-radius:2px 2px 0 0;
transition:transform .12s var(--ease);
}
.jobs-chart-bar:hover{transform:scaleX(1.5)}
.jobs-chart-bar--views{background:var(--text-secondary);opacity:.7}
.jobs-chart-bar--apps{background:var(--accent-surface)}
.jobs-chart-day-label{
font-size:var(--fs-2xs);color:var(--text-muted);letter-spacing:.04em;
font-variant-numeric:tabular-nums;line-height:1;
}
.jobs-chart-legend{
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
margin-top:8px;font-size:var(--fs-xs);color:var(--text-muted);
}
.jobs-chart-legend-item{display:inline-flex;align-items:center;gap:6px}
.jobs-chart-legend-swatch{
display:inline-block;width:12px;height:12px;border-radius:3px;
}
.jobs-chart-legend-note{margin-inline-start:auto;font-size:var(--fs-xs)}
/* ── 21. Interview card (Step 25) ───────────────────────────────
* Shown both on the applicant side (top of the page, big card) and
* on the creator side (compact list inside each applicant row). */
.jv-interview{
padding:12px 14px;margin:8px 0;
background:var(--bg-surface);
border:1px solid var(--border);
border-radius:var(--radius-md);
display:flex;flex-direction:column;gap:6px;
}
.jv-interview.is-confirmed{border-inline-start:3px solid #4ade80}
.jv-interview.is-cancelled{opacity:.6}
.jv-interview-head{
display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.jv-interview-when{
font-size:var(--fs-md);font-weight:600;color:var(--text-primary);
display:inline-flex;align-items:center;gap:6px;
}
.jv-interview-when i{color:var(--accent)}
.jv-interview-status{font-size:var(--fs-2xs)}
.jv-interview-status--proposed{color:var(--accent);border-color:rgba(205,161,44,.45);background:var(--accent-dim)}
.jv-interview-status--confirmed{color:#4ade80;border-color:rgba(74,222,128,.40);background:rgba(74,222,128,.10)}
.jv-interview-status--cancelled{color:#f87171;border-color:rgba(248,113,113,.40);background:rgba(248,113,113,.10)}
.jv-interview-meta{
font-size:var(--fs-sm);color:var(--text-muted);
display:flex;flex-wrap:wrap;gap:14px;margin:0;
}
.jv-interview-meta a{color:var(--accent)}
.jv-interview-notes{font-size:var(--fs-sm);color:var(--text-secondary);margin:0;line-height:1.55}
.jv-interview-actions{
display:flex;flex-wrap:wrap;gap:8px;
padding-top:6px;border-top:1px dashed var(--border);
}
.jv-interview-actions .btn,
.jv-interview-actions .arch-btn-ok,
.jv-interview-actions .arch-btn-red{font-size:var(--fs-xs);padding:5px 10px;height:auto}
/* Creator-side compact list inside applicant row. */
.jv-app-interviews{margin-top:8px;display:flex;flex-direction:column;gap:6px}
/* ── 20. Print stylesheet (Step 21) ─────────────────────────────
* Activates when the user hits Cmd-P / Ctrl-P on view_job. Strips
* every interactive element + decoration so a paper copy reads
* like a clean job-sheet, then bumps the body text up to 13.5pt
* with a 1.7 line-height for comfortable column-width reading.
* The xhtml2pdf-driven /export.pdf endpoint uses its own template
* — these rules are for the browser-side Print dialog only. */
@media print {
body{background:#ffffff !important;color:#000000;font-size:13.5pt;line-height:1.7}
/* Hide every interactive surface: nav, sidebars, toolbars,
* action rows, modals, message threads, kanban + chart, etc. */
nav, .navbar, .sidebar, .messages, .toast,
.jv-back, .jv-actions, .jv-applicants-head, .jv-applicants,
.jv-msg-thread, .jv-applicant-thread, .jv-creator-reply,
#jvMsgForm, .jv-msg-locked, .jv-msg-row,
.jv-kanban-toolbar, .jv-kanban,
.jobs-modal-actions, .arch-modal,
.job-card-actions, .job-card-icons, .job-card-buttons,
.app-toolbar-form, .posts-filter-bar,
.jobs-chart, .jobs-kpi-grid,
.reported-lock-band,
.pagination, .modal{display:none !important}
/* Section frames lose their glass + halo; black-on-white reads on paper. */
.jv-section{
background:none !important;border:0 !important;box-shadow:none !important;
padding:0 !important;margin:0 0 14pt !important;
backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
.jv-section-title{color:#000000 !important;border-bottom:1pt solid #999;padding-bottom:4pt}
.jv-head{
background:none !important;border:0 !important;box-shadow:none !important;
padding:0 !important;margin-bottom:18pt !important;
backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
.jv-head::before{display:none !important}
.jv-title{font-size:24pt;color:#000000}
.jv-position{
background:none !important;color:#666 !important;border:1pt solid #999;
font-size:9pt;
}
.jv-creator-line, .jv-creator-line a{color:#333 !important}
/* Job-info dl reads like a small spec table on print. */
.jv-info-list{display:block}
.jv-info-list > div{
display:block !important;border-top:1pt solid #ddd;
padding:6pt 0 !important;
}
.jv-info-list dt{
color:#555 !important;font-size:10pt;
display:inline-block !important;width:30%;margin-right:8pt;
}
.jv-info-list dd{
color:#000 !important;font-size:11pt;
display:inline-block !important;width:65%;font-weight:normal;
}
/* Match chips render as plain text on paper — no halo. */
.job-chip,
.job-status-chip,
.job-match-chip,
.job-card-office-chip{
background:none !important;border:1pt solid #999 !important;
color:#000 !important;backdrop-filter:none !important;
}
/* Show the URL after each link so the printout is self-referential. */
a[href]:after{content:" (" attr(href) ")";font-size:9pt;color:#666}
a[href^="#"]:after, a[href^="javascript:"]:after{content:""}
/* Avoid orphan headings + page breaks inside dl/li. */
h1, h2, h3, h4{page-break-after:avoid}
li, dt, dd{page-break-inside:avoid}
}
/* Inline form wrapper used by view_job's Hide button. */
.jobs-inline-form{display:inline}
/* Report job modal form inset — pads the body and lifts a higher
* z-index so the file input + crispy errors sit above the modal hero
* gradient. */
.report-job-form{padding:0 22px 22px;position:relative;z-index:2}
/* ── 11. Legacy job-form / applied-user-card ────────────────── */
.job-form{background:var(--bg-card);border:1px solid var(--border);padding:24px;border-radius:14px;margin-bottom:15px;box-shadow:var(--shadow-sm)}
.job-form h2{color:var(--accent);margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border);font-size:var(--fs-xl);letter-spacing:.01em}
.job-form input,.job-form textarea,.job-form select{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid var(--border-hover);border-radius:var(--radius-sm)}
.job-form textarea{resize:none}
.job-form input:focus,.job-form textarea:focus{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid rgba(255,199,60,.40)!important;box-shadow:none!important;outline:none!important}
.applied-user-card{background-color:var(--bg-card);border-radius:var(--radius-md);padding:18px;transition:background .2s}
.applied-user-card:hover{background-color:var(--bg-surface)}
/* ── 12. Application details + per-job message attachments + apply-profile toggle (Step 12 second pass) ─ */
/* ── Application details panel (creator-side applicant card) ────────
* Renders the cover letter, attachments, custom-field answers,
* additional contact, and recommend-by chips inside an expandable
* collapse beneath the action row of each .jv-applicant. */
.jv-applicant-details{
margin-top:14px;padding-top:14px;
border-top:1px solid var(--border);
display:flex;flex-direction:column;gap:14px;
}
.jv-app-block{}
.jv-app-block-title{
font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--text-muted);
margin:0 0 8px;display:inline-flex;align-items:center;gap:8px;
}
.jv-app-block-title i{color:var(--accent)}
.jv-app-cover-text{
font-size:var(--fs-sm);line-height:1.65;color:var(--text-secondary);
background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);
padding:10px 14px;
}
.jv-app-cover-text p{margin:0 0 8px}
.jv-app-cover-text p:last-child{margin:0}
.jv-app-file{
display:inline-flex;align-items:center;gap:8px;
padding:8px 14px;background:var(--bg-card);border:1px solid var(--border);
border-radius:var(--radius-sm);text-decoration:none;color:var(--text-primary);
font-size:var(--fs-sm);cursor:pointer;list-style:none;
}
.jv-app-file::-webkit-details-marker{display:none}
.jv-app-file:hover{border-color:rgba(205,161,44,.30)}
.jv-app-file small{margin-inline-start:auto;color:var(--accent);font-weight:600}
/* Cover-letter inline preview (Tweeks #34n). Wrapped in so the
* embed doesn't load until the creator opens it — fast list rendering
* even with many applicants attaching PDFs. */
.jv-app-preview[open] > .jv-app-file{border-color:rgba(205,161,44,.45);background:rgba(205,161,44,.06)}
.jv-app-preview[open] > .jv-app-file small{color:var(--text-muted)}
.jv-app-preview-frame{
width:100%;height:560px;border:1px solid var(--border);border-radius:var(--radius-sm);
background:var(--bg-deep);margin-top:10px;display:block;
}
.jv-app-preview-img{
display:block;max-width:100%;max-height:560px;
border:1px solid var(--border);border-radius:var(--radius-sm);
margin-top:10px;background:var(--bg-deep);
}
.jv-app-preview-fallback{font-size:var(--fs-sm);color:var(--text-muted);margin:10px 0 0;padding:10px 14px;background:var(--bg-card);border:1px dashed var(--border);border-radius:var(--radius-sm)}
.jv-app-preview-actions{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:640px){
.jv-app-preview-frame,.jv-app-preview-img{height:auto;max-height:420px}
}
.jv-app-thumbs{
list-style:none;margin:0;padding:0;
display:flex;flex-wrap:wrap;gap:10px;
}
.jv-app-thumbs li{margin:0}
.jv-app-thumb{
display:flex;flex-direction:column;align-items:center;gap:4px;
width:96px;text-decoration:none;color:var(--text-secondary);
}
.jv-app-thumb img,
.jv-app-thumb-fallback{
width:96px;height:96px;border-radius:var(--radius-sm);
object-fit:cover;background:var(--bg-card);border:1px solid var(--border);
display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--accent);
}
.jv-app-thumb:hover img,
.jv-app-thumb:hover .jv-app-thumb-fallback{border-color:rgba(205,161,44,.45)}
.jv-app-thumb-cap{font-size:var(--fs-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.jv-app-answers{margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.jv-app-answers > div{
background:var(--bg-card);border:1px solid var(--border);
border-radius:var(--radius-sm);padding:10px 14px;
}
.jv-app-answers dt{font-size:var(--fs-xs);font-weight:600;color:var(--text-primary);margin:0 0 4px}
.jv-app-answers dt em{font-style:normal;color:var(--text-muted);font-size:var(--fs-xs);font-weight:500}
.jv-app-answers dd{margin:0;font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.55}
.jv-app-answers dd a{color:var(--accent)}
.jv-app-contact{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;font-size:var(--fs-sm);color:var(--text-secondary)}
.jv-app-contact li{display:inline-flex;align-items:center;gap:6px}
.jv-app-contact a{color:var(--accent);text-decoration:none}
.jv-app-contact a:hover{text-decoration:underline}
.jv-app-rec{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.jv-app-rec-chip a,
.jv-app-rec-chip{
display:inline-flex;align-items:center;gap:6px;
padding:5px 10px;
background:var(--bg-card);border:1px solid var(--border);
border-radius:99px;text-decoration:none;
font-size:var(--fs-xs);color:var(--text-primary);
}
.jv-app-rec-chip a img{width:18px;height:18px;border-radius:50%;object-fit:cover}
.jv-app-rec-chip a:hover{border-color:rgba(205,161,44,.45)}
.jv-app-rec-chip.is-text{color:var(--text-muted)}
/* ── Per-job message attachments ────────────────────────────────────
* Renders inline file thumbs + chips on .jv-msg bubbles, plus the
* staged-files chip list under the reply textarea. */
.jv-msg-atts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.jv-msg-att{
display:inline-flex;align-items:center;gap:6px;
padding:6px 10px;
background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;
color:var(--text-primary);font-size:var(--fs-xs);text-decoration:none;
max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.jv-msg-att-img{padding:0;border:none;background:transparent;width:auto}
.jv-msg-att-img img{width:auto;max-width:200px;max-height:160px;border-radius:10px;display:block}
.jv-msg-att:hover{border-color:var(--accent)}
/* Reply row — paperclip + textarea + send all on one line, staged
* tray sits separately above. flex-wrap removed so the row never
* collapses around the staged chips. */
.jv-msg-row{display:flex;align-items:flex-end;gap:8px}
/* .jv-msg-attach-btn → .arch-icon-btn --lg --accent (FR-4 Wave 2). */
/* Staged-files tray — its own row above .jv-msg-row, horizontally
* scrollable on overflow so the tray never grows tall enough to push
* the input row down. Image chips show a small square thumbnail; file
* chips show an icon + filename + size. The remove × is overlaid in
* the top corner of each chip. */
.jv-msg-staged{
list-style:none;margin:0;padding:10px 2px 4px;
display:flex;gap:8px;
overflow-x:auto;overflow-y:hidden;
scrollbar-width:thin;
max-width:100%;
}
.jv-msg-staged::-webkit-scrollbar{height:6px}
.jv-msg-staged li{
position:relative;flex-shrink:0;
display:inline-flex;align-items:center;gap:8px;
padding:6px 8px;height:54px;max-width:240px;
background:var(--bg-card);border:1px solid var(--border);
border-radius:10px;
transition:border-color .15s var(--ease);
}
.jv-msg-staged li:hover{border-color:rgba(205,161,44,.40)}
/* Image-only chip — square 54×54 with the picture filling it.
* Clipping lives on the inner .jv-msg-staged-thumb so the chip
* doesn't crop the absolutely-positioned remove × button. */
.jv-msg-staged li.is-image{padding:0;width:54px;max-width:54px;background:transparent;border:0}
.jv-msg-staged-thumb{
flex-shrink:0;width:42px;height:42px;border-radius:8px;overflow:hidden;
background:var(--bg-deep);
display:inline-flex;align-items:center;justify-content:center;
}
.jv-msg-staged li.is-image .jv-msg-staged-thumb{
width:54px;height:54px;border-radius:10px;
border:1px solid var(--border);
}
.jv-msg-staged-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.jv-msg-staged-thumb i{color:var(--accent);font-size:var(--fs-md)}
.jv-msg-staged-meta{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;line-height:1.25}
.jv-msg-staged-name{
font-size:var(--fs-xs);font-weight:600;color:var(--text-primary);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;
}
.jv-msg-staged-sub{font-size:var(--fs-2xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.jv-msg-staged-remove{
position:absolute;top:-6px;inset-inline-end:-6px;
width:20px;height:20px;border-radius:50%;
border:1px solid var(--border);background:var(--bg-deep);
color:var(--text-muted);cursor:pointer;font-size:var(--fs-2xs);
display:inline-flex;align-items:center;justify-content:center;
transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
z-index:2;padding:0;
}
.jv-msg-staged-remove:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
/* ── "Use my profile values" toggle on the apply form ───────────── */
.apply-profile-toggle{
display:flex;align-items:center;gap:10px;
padding:10px 14px;margin:0 0 12px;
background:var(--bg-card);border:1px solid var(--border);
border-radius:var(--radius-md);font-size:var(--fs-sm);color:var(--text-primary);
cursor:pointer;
}
.apply-profile-toggle:hover{border-color:rgba(205,161,44,.30)}
.apply-profile-toggle input[type="checkbox"]{accent-color:var(--accent);width:14px;height:14px}
.apply-profile-toggle small{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--text-muted)}
/* ── 13. Auto-generated job cover (blueprint grid + halo) + view_job hero variant ─ */
/* Auto-generated job cover — used when the creator skips the upload.
* Job-dedicated namespace (was once the shared .entity-cover-fallback
* primitive). Inlines the base gradient-initial styles + the blueprint
* grid + halo + icon overlay. Adds a subtle blueprint grid plus a
* centered briefcase / role icon so the card reads as deliberately
* designed rather than as an empty placeholder. */
.job-cover-fallback{
position:relative;
overflow:hidden;
display:inline-flex;align-items:center;justify-content:center;
width:100%;height:100%;
color:rgba(255,255,255,.88);font-family:'Poppins',system-ui,sans-serif;
font-weight:700;letter-spacing:.04em;font-size:0;line-height:1;
text-shadow:0 4px 16px rgba(0,0,0,.35);
border-radius:inherit;
}
.job-cover-fallback::before{
/* blueprint grid */
content:"";
position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
background-size:14px 14px;
pointer-events:none;
}
.job-cover-fallback::after{
/* gold halo behind the icon */
content:"";
position:absolute;inset:0;
background:radial-gradient(circle at 50% 50%, rgba(205,161,44,.16), transparent 60%);
pointer-events:none;
}
.job-cover-fallback .job-cover-art-icon{
position:relative;z-index:1;
font-size:38%; /* scales with container's font-size */
line-height:1;
color:rgba(255,255,255,.92);
text-shadow:0 4px 16px rgba(0,0,0,.45);
}
/* At small list sizes (~80px tall) we want the icon to read clearly. */
.job-card-cover .job-cover-fallback{font-size:80px}
.job-card-cover .job-cover-fallback .job-cover-art-icon{font-size:38px}
[data-theme="light"] .job-cover-fallback::before{
background-image:
linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px);
}
/* Hero cover variant — same blueprint grid + halo + icon, scaled up
* for the view_job hero band. Layered absolutely over the gradient bg
* so it doesn't affect layout. */
.job-hero-cover--empty{position:relative}
.job-hero-cover--empty::before{
content:"";
position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
background-size:18px 18px;
pointer-events:none;
}
.job-hero-cover--empty::after{
content:"";
position:absolute;inset:0;
background:radial-gradient(circle at 50% 35%, rgba(205,161,44,.18), transparent 60%);
pointer-events:none;
}
.job-hero-cover-art{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
z-index:1;pointer-events:none;
font-size:88px;
color:rgba(255,255,255,.94);
text-shadow:0 8px 32px rgba(0,0,0,.45);
}
/* ── Searchable filter dropdown — used by the jobs toolbar (and any
* future toolbar that includes _filter_dropdown.html). Replaces the
* native combobox with a styled trigger +
* popup that has its own search input on top of the options list. */
.filter-dd{position:relative;width:100%}
.filter-dd-trigger{
display:flex;align-items:center;gap:10px;
width:100%;height:38px;padding:0 12px;
background:var(--bg-surface);
border:1px solid var(--border);border-radius:var(--radius-sm);
color:var(--text-primary);font-size:var(--fs-sm);line-height:1.3;
cursor:pointer;text-align:start;
transition:background .15s var(--ease),border-color .15s var(--ease);
}
.filter-dd-trigger:hover,
.filter-dd-trigger:focus-visible{
background:var(--bg-card);
border-color:rgba(205,161,44,.45);outline:none;
}
.filter-dd-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-dd-value.is-empty{color:var(--text-muted)}
.filter-dd-caret{font-size:var(--fs-2xs);color:var(--text-muted);transition:transform .15s var(--ease);flex-shrink:0}
.filter-dd[data-open='1'] .filter-dd-caret{transform:rotate(180deg)}
.filter-dd-panel{
position:absolute;top:calc(100% + 6px);inset-inline-start:0;
width:100%;min-width:220px;max-width:340px;
background:var(--bg-card);
border:1px solid var(--border-hover);border-radius:var(--radius-md);
box-shadow:0 12px 32px rgba(0,0,0,.30);
padding:8px;z-index:50;
display:flex;flex-direction:column;gap:6px;
/* Cap height so a long list scrolls instead of overflowing the page */
max-height:320px;
}
.filter-dd-search-wrap{
display:flex;align-items:center;gap:8px;
padding:6px 10px;
background:var(--bg-surface);
border:1px solid var(--border);border-radius:var(--radius-sm);
flex-shrink:0;
}
.filter-dd-search-wrap i{color:var(--text-muted);font-size:var(--fs-xs)}
.filter-dd-search{
flex:1;background:transparent;border:0;outline:none;
color:var(--text-primary);font-size:var(--fs-sm);font-family:inherit;
}
.filter-dd-search::placeholder{color:var(--text-muted)}
.filter-dd-list{
list-style:none;margin:0;padding:0;
overflow-y:auto;
/* Subtract the search input + paddings so the list scrolls inside
* the panel without pushing it off-screen. */
flex:1;min-height:0;
}
.filter-dd-option{
display:flex;align-items:center;gap:8px;
padding:8px 10px;border-radius:var(--radius-sm);
cursor:pointer;font-size:var(--fs-sm);color:var(--text-primary);
transition:background .12s var(--ease),color .12s var(--ease);
}
.filter-dd-option:hover,
.filter-dd-option.is-focused{background:var(--bg-surface)}
.filter-dd-option.is-active{
color:var(--accent);
background:var(--accent-dim);
}
.filter-dd-option-icon{font-size:var(--fs-2xs);color:var(--text-muted)}
.filter-dd-option.is-active .filter-dd-option-icon{color:var(--accent)}
.filter-dd-option[hidden]{display:none}
.filter-dd-empty{
margin:0;padding:8px 10px;
color:var(--text-muted);font-size:var(--fs-sm);font-style:italic;
}
/* ── Light-theme overrides ──────────────────────────────────────────── */
/* Status chips lose the dark frosted glass; use a light frosted surface */
[data-theme="light"] .job-status-chip {
background: rgba(245,246,248,0.92);
}
[data-theme="light"] .job-status-chip.open {
color: #047857;
border-color: rgba(5,150,105,.40);
background: rgba(245,246,248,0.92);
}
[data-theme="light"] .job-status-chip.applied {
color: #0369a1;
border-color: rgba(3,105,161,.40);
background: rgba(245,246,248,0.92);
}
[data-theme="light"] .job-status-chip.closed {
color: #991b1b;
border-color: rgba(153,27,27,.38);
background: rgba(245,246,248,0.92);
}
/* Match pill — dark green bg → light tint */
[data-theme="light"] .job-card-match-pill.is-strong {
background: rgba(5,150,105,.10);
color: #065f46;
border-color: rgba(5,150,105,.32);
}
[data-theme="light"] .job-card-match-pill.is-weak {
background: var(--overlay-soft);
}
/* Match chip (view_job hero + listing card) — dark frosted glass reads as a
* harsh dark pill on the light surface card. Swap to light tints; is-medium
* already uses theme-aware --accent vars so it needs no override. */
[data-theme="light"] .job-match-chip {
background: rgba(245,246,248,0.92);
}
[data-theme="light"] .job-match-chip.is-strong {
color: #047857;
border-color: rgba(5,150,105,.40);
background: rgba(5,150,105,.10);
}
[data-theme="light"] .job-match-chip.is-weak {
color: var(--text-muted);
border-color: var(--border);
background: rgba(245,246,248,0.92);
}
/* Status pill closed — near-invisible white overlay → light overlay */
[data-theme="light"] .job-card-status-pill.is-closed {
background: var(--overlay-soft);
}
/* Closed-card left-edge stripe — near-invisible white → visible grey */
[data-theme="light"] .job-card[data-job-status="closed"]::before {
background: rgba(0,0,0,.15);
}
/* Cover fallback icon — white text invisible on light bg-surface */
[data-theme="light"] .job-card-cover .job-cover-fallback {
color: var(--text-muted);
}
/* ── Apply form — sticky bar, file counter, draft notice (#32) ────────
* The action row sticks to the bottom of the viewport as the long apply
* form scrolls, so Send/Save-draft are always reachable. The file counter
* turns red past the cap and disables Send before a wasted round-trip. */
.apply-draft-notice{
display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-bottom:14px;padding:8px 12px;
background:var(--accent-dim,rgba(205,161,44,.12));
border:1px solid rgba(205,161,44,.35);border-radius:8px;
font-size:var(--fs-sm);color:var(--text-secondary);
}
.apply-draft-notice i{color:var(--accent,#cda12c);margin-inline-end:4px}
.apply-draft-discard{
background:none;border:none;cursor:pointer;
font-size:var(--fs-xs);font-weight:600;color:var(--accent,#cda12c);
text-decoration:underline;padding:0;
}
.apply-sticky-bar{
position:sticky;bottom:0;z-index:5;
display:flex;align-items:center;justify-content:space-between;gap:12px;
flex-wrap:wrap;margin-top:18px;padding:12px 14px;
background:var(--bg-card);border:1px solid var(--border);
border-radius:var(--radius-sm,10px);
box-shadow:0 -6px 18px rgba(0,0,0,.18);
}
.apply-sticky-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.apply-file-counter{
display:inline-flex;align-items:center;gap:6px;
font-size:var(--fs-sm);font-weight:600;color:var(--text-secondary);
}
.apply-file-counter i{color:var(--accent,#cda12c)}
.apply-file-counter.is-over{color:var(--danger,#dc2626)}
.apply-file-counter.is-over i{color:var(--danger,#dc2626)}
.apply-draft-status{font-size:var(--fs-xs);color:var(--text-muted);font-style:italic}
.apply-sticky-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.apply-file-overflow{
margin:8px 0 0;font-size:var(--fs-xs);color:var(--danger,#dc2626);
display:flex;align-items:center;gap:6px;
}
@media (max-width:576px){
.apply-sticky-bar{flex-direction:column;align-items:stretch}
.apply-sticky-actions{justify-content:space-between}
}