/* File: web/assets/jobs.css — the customer's job browser (/jobs).
 * Loaded AFTER /assets/style.css, which supplies the design tokens, nav, buttons and footer.
 * Nothing here redefines a token, so the page follows the site's light/dark theme for free.
 *
 * The layout optimises for DECIDING, not skimming: the score sits beside the title where the
 * eye lands, the description is readable in place, and the Apply button is last in the row so
 * the evidence is passed before the irreversible control is reached. */

.jobs-wrap { padding: 28px 0 64px; }

.jobs-head { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin: 0 0 20px; }
.jobs-head h1 { font-size: clamp(24px, 4vw, 34px); letter-spacing: -.03em; margin: 0 0 6px; }
.jobs-source { color: var(--muted); font-size: 14px; margin: 0; }
.jobs-scope { color: var(--faint); }

/* The allowance is the constraint the page exists to respect — pinned, not buried. */
.allowance-box { border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius-sm, 10px); padding: 14px 18px; min-width: 210px; display: grid; gap: 2px; box-shadow: var(--shadow); }
.allowance-box.spent { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn) 6%, var(--panel)); }
.allowance-num { font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.allowance-unit { font-size: 13px; color: var(--muted); }
.allowance-sub { font-size: 12.5px; color: var(--faint); }
.allowance-cta { margin-top: 8px; text-align: center; }

.jobs-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 18px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); background: var(--panel-2); }
.jobs-filters input[type="search"] { flex: 1 1 260px; min-width: 0; }
.jobs-filters input, .jobs-filters select { padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; font-size: 14px; }
.jobs-filters .chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); }

.jobs-status { color: var(--muted); padding: 26px 4px; font-size: 15px; }

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

.job { border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); background: var(--panel); padding: 18px 20px; }
.job-applied { opacity: .68; }
.job-queued { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.job-failed { border-color: color-mix(in srgb, var(--err) 35%, var(--border)); }

.job-head { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.job-title-wrap { min-width: 0; flex: 1 1 320px; }
.job-title { font-size: 17px; line-height: 1.35; margin: 0 0 5px; letter-spacing: -.01em; }
.job-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 13.5px; color: var(--muted); }
.job-company { font-weight: 600; color: var(--text); }

/* Score. The BAND is what a person acts on; the number is what they argue with; the reasons
   are what make either trustworthy — so all three are reachable, but only two are loud. */
.score { display: grid; justify-items: end; gap: 3px; text-align: right; min-width: 108px; }
.score-band { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.score-strong .score-band { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.score-good .score-band { color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent); }
.score-possible .score-band { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
.score-weak .score-band, .score-unscored .score-band { color: var(--faint); background: var(--panel-2); }
.score-pct { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.score-why { font-size: 12.5px; }
.score-why summary { color: var(--muted); cursor: pointer; list-style: none; }
.score-why summary::-webkit-details-marker { display: none; }
.score-why summary:hover { color: var(--accent); }
.score-reasons { margin: 7px 0 0; padding: 0 0 0 16px; text-align: left; color: var(--muted); max-width: 320px; }
.score-reasons li { margin: 0 0 4px; }

.job-jd { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.job-jd-none { color: var(--faint); font-style: italic; }
/* The full description: a measured column, capped and scrollable, so one 20k JD cannot push
   every other row off the screen. */
.job-jd-full { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--panel-2); max-height: 380px; overflow-y: auto; font-size: 14px; line-height: 1.65; max-width: 72ch; }
.job-jd-full p { margin: 0 0 11px; }
.job-jd-full p:last-child { margin-bottom: 0; }

.job-actions { display: flex; gap: 9px; flex-wrap: wrap; margin: 14px 0 0; align-items: center; }
.job-apply { margin-left: auto; min-width: 128px; }
/* An armed irreversible action should look different from a resting one. */
.job-apply.confirming { background: var(--warn); border-color: var(--warn); color: #fff; }
.job-blocked { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

.jobs-pager { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 26px 0 0; }
.jobs-pagelabel { font-size: 13.5px; color: var(--muted); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 640px) {
  .job-head { gap: 10px; }
  .score { justify-items: start; text-align: left; }
  .score-reasons { text-align: left; }
  .job-apply { margin-left: 0; width: 100%; }
}

/* ── First-run greeting ───────────────────────────────────────────────────────────
   Onboarding ends on this page rather than on a dashboard that is empty for a brand-new
   account, so for many customers this banner is the first thing the product ever says to
   them. Shown once (onboarding.js sets a sessionStorage marker, jobs.js clears it). */
.jobs-firstrun {
  display: flex; align-items: flex-start; gap: 14px; margin: 0 0 24px;
  padding: 18px 20px; border-radius: var(--radius, 16px);
  background: color-mix(in srgb, var(--ok) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 26%, transparent);
}
.jobs-firstrun-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--ok);
  display: flex; align-items: center; justify-content: center;
}
.jobs-firstrun-ic svg { width: 18px; height: 18px; color: var(--panel); }
.jobs-firstrun-body { flex: 1 1 auto; min-width: 0; }
.jobs-firstrun-body strong { display: block; font-size: 15.5px; letter-spacing: -.015em; margin-bottom: 3px; }
.jobs-firstrun-body p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 74ch; }
.jobs-firstrun-body b { color: var(--text); font-weight: 600; }
.jobs-firstrun-x {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer; padding: 4px;
  width: 24px; height: 24px; color: var(--muted); border-radius: 6px;
}
.jobs-firstrun-x::before {
  content: ""; display: block; width: 100%; height: 100%; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.jobs-firstrun-x:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }

/* An empty list needs an action, not just a sentence — a new customer's very first visit
   can legitimately land here, and nothing to press reads as a broken product. */
.jobs-status { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.jobs-empty-line { margin: 0; max-width: 68ch; }
.jobs-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }