/* Shared job-search component — used by jobs.html AND the portal's Find Job pane.
   Single source of truth: edit here (+ jobsearch.js) and both update.
   All rules scoped under .jobsearch so host pages can't collide. */
.jobsearch { --js-teal:#2dd4bf; --js-gold:#d9a121; --js-gold-b:#f0bc45;
  --js-ink:#f5f2ea; --js-muted:rgba(245,242,234,.62); --js-line:rgba(245,242,234,.12);
  --js-card:rgba(36,56,100,.45); }

/* filter card */
.jobsearch .js-filters { background:var(--js-card); border:1px solid var(--js-line); border-radius:14px;
  padding:14px; display:grid; gap:10px; margin-bottom:16px; box-shadow:0 12px 30px rgba(3,8,22,.35); }
.jobsearch .js-filters input, .jobsearch .js-filters select { padding:10px 12px; border:1.5px solid var(--js-line);
  border-radius:10px; font-size:.93rem; font-family:inherit; outline:none; width:100%;
  background:rgba(9,16,33,.55); color:var(--js-ink); }
.jobsearch .js-filters input::placeholder { color:rgba(245,242,234,.4); }
.jobsearch .js-filters input:focus, .jobsearch .js-filters select:focus { border-color:var(--js-teal); }
.jobsearch .js-filters select option { color:#10201e; }
.jobsearch .js-frow { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; }
.jobsearch .js-types { display:flex; gap:8px; flex-wrap:wrap; }
.jobsearch .js-chip { border:1.5px solid var(--js-line); background:rgba(245,242,234,.05); color:var(--js-muted);
  border-radius:999px; padding:7px 14px; font-size:.84rem; font-weight:700; cursor:pointer; font-family:inherit; }
.jobsearch .js-chip.on { background:rgba(45,212,191,.16); border-color:var(--js-teal); color:var(--js-teal); }

/* action buttons (match the site hero) */
.jobsearch .js-actions { display:flex; gap:10px; flex-wrap:wrap; }
.jobsearch .js-actions button { font-family:inherit; font-weight:700; font-size:.95rem; line-height:1;
  padding:13px 22px; border-radius:11px; cursor:pointer; }
.jobsearch .js-search { border:0; color:#191002;
  background:linear-gradient(100deg,#f3d27c,#d9a121 55%,#b9820f); box-shadow:0 6px 18px rgba(217,161,33,.32); }
.jobsearch .js-search:hover { filter:brightness(1.06); }
.jobsearch .js-academy { background:transparent; color:var(--js-gold-b); border:1.5px solid rgba(217,161,33,.55); }
.jobsearch .js-academy:hover { background:rgba(217,161,33,.12); border-color:var(--js-gold-b); }

/* job cards */
.jobsearch .js-job { background:var(--js-card); border:1px solid var(--js-line); border-radius:14px;
  padding:16px; margin-bottom:12px; cursor:pointer; transition:box-shadow .15s, border-color .15s; }
.jobsearch .js-job:hover { box-shadow:0 12px 30px rgba(3,8,22,.4); border-color:rgba(45,212,191,.35); }
.jobsearch .js-job h3 { margin:0 0 2px; font-size:1.02rem; color:var(--js-ink); }
.jobsearch .js-co { font-size:.85rem; color:var(--js-muted); }
.jobsearch .js-co b.v { color:var(--js-teal); }
.jobsearch .js-tags { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
.jobsearch .js-tag { background:rgba(245,242,234,.08); color:var(--js-teal); font-size:.75rem; font-weight:700;
  padding:4px 10px; border-radius:999px; }
.jobsearch .js-tag.pay { background:rgba(240,188,69,.16); color:var(--js-gold-b); }
.jobsearch .js-tag.type { background:rgba(120,150,220,.18); color:#aebef0; }
.jobsearch .js-detail { display:none; margin-top:12px; border-top:1px solid var(--js-line); padding-top:12px; }
.jobsearch .js-job.open .js-detail { display:block; }
.jobsearch .js-desc { white-space:pre-wrap; font-size:.92rem; margin:0 0 12px; color:var(--js-ink); }
.jobsearch .js-meta { font-size:.83rem; color:var(--js-muted); margin-bottom:12px; }
.jobsearch .js-apply { border:0; border-radius:10px; padding:10px 16px; font-weight:700; font-size:.9rem;
  cursor:pointer; font-family:inherit; background:var(--js-gold); color:#3b2604; }
.jobsearch .js-apply:hover { background:var(--js-gold-b); }
.jobsearch .js-apply.done { background:rgba(245,242,234,.08); color:var(--js-muted); cursor:default; }
.jobsearch .js-empty { text-align:center; color:var(--js-muted); padding:40px 20px; }
@media (max-width:560px){ .jobsearch .js-frow { grid-template-columns:1fr; } }