/* /jobs — split view: scannable list on the left, full role on the right.
   Requires tokens.css + base.css.

   The list is server-rendered by tools/render-jobs.mjs so every role is in the
   HTML for search engines and no-JS visitors; each row is a plain <a> to the
   employer listing. js/jobs.js upgrades that to an in-page detail pane on wide
   screens only — on phones the row keeps its original behaviour. */

.jobs-hero { padding: var(--s5) var(--page-pad) var(--s4); border-bottom: 1px solid var(--line); }
.jobs-hero .breadcrumb { font-size: var(--t-meta); color: var(--ink-40); margin-bottom: 10px; }
.jobs-hero h1 { font-size: var(--t-h2); margin-bottom: 6px; }
/* nothing follows the headline now, so the hero padding sets the gap */
.jobs-hero h1:last-child { margin-bottom: 0; }
.jobs-hero p { font-size: var(--t-ui); color: var(--ink-60); max-width: 720px; }

/* ---------- filter rail ---------- */

.filters {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s3) var(--page-pad);
  border-bottom: 1px solid var(--line); background: var(--paper);
}
.filters input[type="search"] { width: 240px; }
.filters select { max-width: 200px; }
.filters .spacer { flex-grow: 1; }
.filters .count { font-size: var(--t-ui-sm); color: var(--ink-40); }
.filters .count strong { color: var(--ink); font-weight: 600; }

/* ---------- two-pane ---------- */

.jobs-layout {
  display: grid; grid-template-columns: 494px minmax(0, 1fr);
  height: calc(100vh - 250px); min-height: 560px;
}
.jobs-list { border-right: 1px solid var(--line); overflow-y: auto; background: var(--paper); }
.jobs-list-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--s3) 22px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--paper); z-index: 2;
}
.jobs-list-head .n { font-size: var(--t-ui-sm); font-weight: 600; }
.jobs-list-head .t { font-size: var(--t-meta); color: var(--ink-40); }

/* ---------- a row ---------- */

.job-row {
  display: flex; gap: var(--s3);
  padding: 15px 22px 15px 19px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid transparent;
  color: inherit;
}
.job-row:hover { background: var(--paper-3); color: inherit; }
.job-row.is-selected { background: var(--blue-tint); border-left-color: var(--blue); }
.job-row-main { flex-grow: 1; min-width: 0; }
.job-row-title {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  line-height: 1.28; letter-spacing: -0.012em; color: var(--ink); margin-bottom: 3px;
}
.job-row-company { font-size: var(--t-ui-sm); color: var(--ink-60); }
.job-row-snippet {
  font-size: var(--t-meta); color: var(--ink-40); line-height: 1.5; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.job-row-meta { display: flex; align-items: center; gap: var(--s2); margin-top: 9px; flex-wrap: wrap; }
.job-row-meta span { font-size: var(--t-meta); color: var(--ink-40); }
.job-row-side { flex-shrink: 0; text-align: right; }
.job-row-salary { font-size: var(--t-ui-sm); font-weight: 600; color: var(--ink); }
.job-row-salary.is-none { font-weight: 400; color: var(--ink-40); }
.job-row-side .sponsor-mark { margin-top: 10px; }

/* ---------- detail pane ---------- */

.jobs-detail { overflow-y: auto; background: var(--paper-2); padding: var(--s5) var(--s6); }
.detail-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s5) 30px;
}
.detail-kickers { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); flex-wrap: wrap; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); }
.detail-head h2 { font-size: 30px; line-height: 1.16; letter-spacing: -0.022em; margin-bottom: 7px; }
.detail-head .where { font-size: 15px; color: var(--ink-60); }
.detail-salary { flex-shrink: 0; text-align: right; }
.detail-salary .k { font-size: var(--t-meta); color: var(--ink-40); }
.detail-salary .v { font-size: 15px; font-weight: 600; margin-top: 3px; }
.detail-salary .v.is-none { font-weight: 400; color: var(--ink-40); }
.detail-actions { display: flex; gap: var(--s2); margin-top: 22px; flex-wrap: wrap; }

.detail-sponsor {
  display: flex; align-items: flex-start; gap: var(--s3);
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: var(--radius); padding: 18px 22px; margin-top: var(--s3);
}
.detail-sponsor svg { flex-shrink: 0; margin-top: 2px; }
.detail-sponsor .t { font-size: var(--t-ui); font-weight: 600; }
.detail-sponsor .d { font-size: var(--t-ui-sm); color: var(--ink-60); line-height: 1.55; margin-top: 3px; }

.detail-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-top: var(--s3);
}
.detail-meta > div { background: var(--paper); padding: 14px 18px; }
.detail-meta .k { font-size: var(--t-meta); color: var(--ink-40); }
.detail-meta .v { font-size: var(--t-ui); font-weight: 600; margin-top: 3px; }

.detail-body {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 26px; margin-top: var(--s3);
}
.detail-body .eyebrow { display: block; margin-bottom: var(--s3); letter-spacing: 0.1em; }
.detail-body p { font-size: var(--t-ui-sm); color: var(--ink-60); line-height: 1.7; }
.detail-body .source { font-size: var(--t-meta); color: var(--ink-40); margin-top: var(--s3); }

.detail-empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: var(--t-ui); color: var(--ink-40); text-align: center; padding: var(--s6);
}

/* honesty line under the board */
.jobs-note {
  padding: var(--s3) var(--page-pad);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: var(--t-meta); color: var(--ink-40); background: var(--paper);
}

.strip { padding: var(--s5) var(--page-pad); font-size: var(--t-ui); color: var(--ink-60); }

.state { padding: var(--s6) 22px; font-size: var(--t-ui); color: var(--ink-40); }

@media (max-width: 980px) {
  .jobs-layout { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .jobs-list { border-right: none; overflow: visible; }
  .jobs-detail { display: none; }
}