/* caio.pro - job card ("tape row") styles.
   Used by every page that renders cards with /static/job-cards.js: the homepage tape and layout B
   ("cards") of the jobs page. Moved verbatim out of caio.css; it reads the design tokens
   (--ink, --muted, --amber, --cat-* ...) and inherits the type of the element it sits in. Both pages get
   the homepage's from /static/home-tokens.css: the homepage in :root, the jobs page on its card list
   (class "home-skin"), whatever palette the rest of that page has. */

/* ── the tape (role rows) ──────────────────────────────────────────────── */
.tape{border-top:1px solid var(--line-2)}
.tape-row{
  display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:start;
  padding:18px 8px 18px 0;border-bottom:1px solid var(--line);
  position:relative;transition:background .15s;
}
.tape-row::before{ /* category rail */
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--rail,var(--faint));opacity:.55;transition:opacity .15s;
}
a.tape-row:hover{background:var(--surface)}
a.tape-row:hover::before{opacity:1}
.tape-row.featured{background:linear-gradient(90deg,rgba(245,178,61,.06),transparent 60%)}
.tape-row.featured::before{background:var(--amber);opacity:1;width:3px}
.tape-row.is-closed{opacity:.5}
.tape-code{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--muted);padding-left:14px;padding-top:3px;line-height:1.3}
.tape-main{min-width:0}
.tape-title{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.2;overflow-wrap:anywhere}
.tape-row:hover .tape-title{color:var(--amber)}
.tape-co{margin-top:3px;font-size:13.5px;color:var(--muted)}
.tape-ess{margin-top:8px;font-size:14.5px;color:var(--ink-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.tape-sig{margin-top:10px;display:flex;flex-wrap:wrap;gap:7px 14px;font-size:12.5px;color:var(--muted)}
.tape-sig .g::before{content:"\25B8";color:var(--green);margin-right:5px}
.tape-sig .r::before{content:"\25B9";color:var(--red);margin-right:5px}
.tape-data{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:2px}
.tape-data .sal{font-size:15px;color:var(--ink);font-weight:500}
.tape-data .sal.none{color:var(--faint);font-weight:400;font-size:13px}
.tape-data .rep{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.tape-data .feat-tag{display:inline-block;margin-bottom:8px;font-size:10px;letter-spacing:.12em;color:var(--amber);border:1px solid var(--amber);border-radius:var(--radius-sm);padding:2px 6px}
.tape-chips{margin-top:8px;display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
/* outlined maturity/stage chips */
.chip-out{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:3px 7px}
@media(max-width:640px){
  .tape-row{grid-template-columns:1fr;gap:8px;padding-left:14px}
  .tape-row::before{width:3px}
  .tape-code{padding-left:0}
  .tape-data{text-align:left}
  .tape-chips{justify-content:flex-start}
}