/* ──────────────────────────────────────────────────────────────────────────
   Vice Neon (.vn) — етап 4a: роботи (/jobs, /jobs/:slug) за docs/redesign/prototype/JobsB.dc.html.

   Розмітку малює той самий public/js/jobs.js (реальні ставки й бонуси з routes/jobs.rb, рівень
   гравця, збережені бонуси, години сесії); формула — public/js/job-calc.js (тести:
   test/js/job_calc.test.js). Тут лише вигляд: старі змінні (--card, --money, --primary …) перевизначено
   токенами Vice Neon у межах .jobs-page, плюс картки/калькулятор/бонуси як у прототипі.
   Ставка на сайті — $ за годину (так її вносять редактори), тож повзунка «одиниць за годину» з
   прототипу немає: множити нема на що.
   ────────────────────────────────────────────────────────────────────────── */

html.vn:not([data-section="admin"]) .jobs-page {
  --card: rgba(255, 255, 255, .035);
  --card-hover: rgba(255, 255, 255, .06);
  --surface: rgba(255, 255, 255, .05);
  --surface-2: rgba(255, 255, 255, .08);
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .18);
  --bg: var(--vn-bg);
  --text: var(--vn-text);
  --text-2: var(--vn-muted);
  --faint: var(--vn-muted-2);
  --primary: var(--vn-pink);
  --primary-soft: rgba(255, 79, 163, .14);
  --on-primary: var(--vn-ink);
  --accent-strong: var(--vn-pink-soft);
  --money: var(--vn-cyan);
  --money-soft: rgba(46, 230, 214, .14);
  --on-money: var(--vn-ink);
  --job: var(--vn-orange);
  --job-soft: rgba(255, 159, 69, .14);
  --side-c: var(--vn-purple);
  --side-soft: rgba(185, 140, 255, .14);
  --bad: var(--vn-red);
  --bad-soft: rgba(255, 90, 122, .14);
  --bk-item: var(--vn-cyan);
  --bk-skin: var(--vn-pink);
  --bk-tune: var(--vn-orange);
  --bk-flag: var(--vn-purple);
  --bk-house: var(--vn-yellow);
  --font: var(--vn-font-body);
  --f-mono: var(--vn-font-mono);
  --focus-ring: 0 0 0 3px rgba(46, 230, 214, .6);
  width: 100%; box-sizing: border-box;
  gap: 22px;
  font-family: var(--vn-font-body), sans-serif;
  color: var(--vn-text);
}

/* ─── Заголовок ─────────────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .jobs-page .page-title {
  margin: 0; font-family: var(--vn-font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(36px, 5.4vw, 72px); line-height: .98; letter-spacing: -.04em; padding-bottom: 4px;
  background: linear-gradient(90deg, var(--vn-text) 40%, var(--vn-pink), var(--vn-orange), var(--vn-cyan));
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: bHue 8s ease-in-out infinite;
}
html.vn:not([data-section="admin"]) .jobs-page .page-sub { margin: 10px 0 0; max-width: 60ch; color: var(--vn-muted); font-size: 15px; line-height: 24px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-snap {
  min-height: 36px; padding: 0 14px; border-radius: var(--vn-radius-pill); border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04); color: var(--vn-text); font-size: 13px; font-weight: 700;
}
html.vn:not([data-section="admin"]) .jobs-page .jb-snap i { background: var(--vn-cyan); }
html.vn:not([data-section="admin"]) .jobs-page .jb-foot { font-size: 12.5px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-empty { border-radius: var(--vn-radius-card); }

/* ─── KPI і панель фільтрів ─────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .jobs-page .jb-kpi { padding: 14px 18px; border-radius: 20px; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
html.vn:not([data-section="admin"]) .jobs-page .jb-kpi span { font-weight: 700; line-height: 1.35; color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .jobs-page .jb-kpi b { font: 800 20px var(--vn-font-display); }
html.vn:not([data-section="admin"]) .jobs-page .jb-kpi:nth-child(1) b { color: var(--vn-cyan); }
html.vn:not([data-section="admin"]) .jobs-page .jb-kpi:nth-child(2) b { color: var(--vn-orange); }
html.vn:not([data-section="admin"]) .jobs-page .jb-kpi:nth-child(4) b { color: var(--vn-pink-soft); }
html.vn:not([data-section="admin"]) .jobs-page .jb-kpi > small { color: var(--vn-muted-2); }
html.vn:not([data-section="admin"]) .jobs-page .jb-toolbar { gap: 12px; padding: 12px; border-radius: 24px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-seg { gap: 6px; padding: 0; border: 0; background: none; flex-wrap: wrap; }
html.vn:not([data-section="admin"]) .jobs-page .jb-seg button,
html.vn:not([data-section="admin"]) .jobs-page .jb-qa button,
html.vn:not([data-section="admin"]) .jobs-page .jb-lnk {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--vn-radius-pill); background: rgba(255, 255, 255, .03);
  color: var(--vn-text); font: 700 13px var(--vn-font-body); white-space: nowrap; transition: background .2s, border-color .2s;
}
html.vn:not([data-section="admin"]) .jobs-page .jb-seg button:hover,
html.vn:not([data-section="admin"]) .jobs-page .jb-qa button:hover,
html.vn:not([data-section="admin"]) .jobs-page .jb-lnk:hover { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); color: var(--vn-text); }
html.vn:not([data-section="admin"]) .jobs-page .jb-seg button[aria-pressed="true"] {
  border-color: var(--vn-pink); background: rgba(255, 79, 163, .16); color: var(--vn-pink-soft);
  box-shadow: 0 0 0 2px rgba(255, 79, 163, .35), 0 6px 16px rgba(255, 79, 163, .18);
}
html.vn:not([data-section="admin"]) .jobs-page .jb-seg__c { font: 700 11px var(--vn-font-mono); opacity: .7; }
html.vn:not([data-section="admin"]) .jobs-page .jb-stp { border-radius: var(--vn-radius-pill); padding: 3px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-stp button { width: 32px; height: 32px; border-radius: 50%; color: var(--vn-text); font-weight: 700; }
html.vn:not([data-section="admin"]) .jobs-page .jb-stp:focus-within { box-shadow: var(--focus-ring); }
html.vn:not([data-section="admin"]) .jobs-page .jb-sel select { height: 40px; border-radius: var(--vn-radius-pill); padding-left: 16px; background: rgba(255, 255, 255, .04); }
html.vn:not([data-section="admin"]) .jobs-page .jb-sel select option { background: var(--vn-surface); }
html.vn:not([data-section="admin"]) .jobs-page .jb-sw { min-height: 36px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-sw__t { width: 40px; height: 22px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-sw__t::after { width: 16px; height: 16px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-sw input:checked + .jb-sw__t::after { left: 20px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-sw input:checked + .jb-sw__t { box-shadow: 0 0 14px rgba(255, 79, 163, .35); }

/* ─── Картки робіт ──────────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .jobs-page a.jb-jc {
  padding: 16px 18px; border-radius: 22px; background: rgba(255, 255, 255, .035); color: var(--vn-text);
  transition: transform .25s var(--vn-ease), border-color .25s, box-shadow .25s;
}
html.vn:not([data-section="admin"]) .jobs-page a.jb-jc:hover { color: var(--vn-text); border-color: rgba(255, 79, 163, .5); background: rgba(255, 79, 163, .06); }
@media (hover: hover) {
  html.vn:not([data-section="admin"]) .jobs-page a.jb-jc:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(255, 79, 163, .14); }
}
html.vn:not([data-section="admin"]) .jobs-page .jb-jc__n { font-weight: 800; font-size: 16px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-rk { font-size: 12px; color: var(--vn-muted-2); }
html.vn:not([data-section="admin"]) .jobs-page .jb-ji { border-radius: 14px; background: var(--c); color: var(--vn-ink); }
html.vn:not([data-section="admin"]) .jobs-page .jb-ji--lg { border-radius: 20px; box-shadow: 0 10px 30px color-mix(in srgb, var(--c) 35%, transparent); }
html.vn:not([data-section="admin"]) .jobs-page .jb-tg { padding: 3px 10px; border-radius: var(--vn-radius-pill); font-size: 12px; font-weight: 700; }
html.vn:not([data-section="admin"]) .jobs-page .jb-pay b { font-size: 20px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-pay em { color: var(--vn-orange); }
html.vn:not([data-section="admin"]) .jobs-page .jb-pbar { height: 8px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-pbar__b { background: var(--vn-grad-cool); }
html.vn:not([data-section="admin"]) .jobs-page .jb-pbar__m { background: rgba(255, 159, 69, .35); }

/* ─── Сторінка роботи ───────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .jobs-page .jb-crumbs a { display: inline-block; padding: 3px 0; }
html.vn:not([data-section="admin"]) .jobs-page .jb-jh h1 {
  font-family: var(--vn-font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(28px, 4.2vw, 56px); line-height: 1; letter-spacing: -.04em;
}
html.vn:not([data-section="admin"]) .jobs-page .jb-card { border-radius: var(--vn-radius-card); }
html.vn:not([data-section="admin"]) .jobs-page .jb-card__h h2 { font-family: var(--vn-font-display); font-weight: 800; font-size: 14px; letter-spacing: 0; }

/* калькулятор: помаранчево-рожева картка, сума за годину бірюзова, за сесію — помаранчева */
html.vn:not([data-section="admin"]) .jobs-page .jb-calc {
  top: 96px; padding: 22px; border-radius: var(--vn-radius-section);
  background: linear-gradient(160deg, rgba(255, 159, 69, .14), rgba(255, 79, 163, .06)), var(--vn-bg);
  border: 1px solid rgba(255, 159, 69, .3); animation: bPop .4s var(--vn-ease) both;
}
html.vn:not([data-section="admin"]) .jobs-page .jb-calc__k { font-size: 12px; font-weight: 800; color: var(--vn-orange); letter-spacing: .06em; }
html.vn:not([data-section="admin"]) .jobs-page .jb-calc__big { font: 700 clamp(30px, 3.6vw, 40px)/1.05 var(--vn-font-mono); color: var(--vn-cyan); }
html.vn:not([data-section="admin"]) .jobs-page .jb-calc__sub { font-size: 13px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-calc__sub b.is-up { color: var(--vn-pink-soft); }
html.vn:not([data-section="admin"]) .jobs-page .jb-mbar { height: 12px; gap: 3px; background: rgba(255, 255, 255, .06); }
html.vn:not([data-section="admin"]) .jobs-page .jb-mbar span { border-radius: var(--vn-radius-pill); transition: width .7s var(--vn-ease); }
html.vn:not([data-section="admin"]) .jobs-page .jb-mbar__b,
html.vn:not([data-section="admin"]) .jobs-page .jb-dot--b { background: var(--vn-cyan); }
html.vn:not([data-section="admin"]) .jobs-page .jb-mbar__x,
html.vn:not([data-section="admin"]) .jobs-page .jb-dot--x { background: var(--vn-pink); }
html.vn:not([data-section="admin"]) .jobs-page .jb-mleg { font-size: 12px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-hrs { font-size: 13px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-hrs b { margin-left: auto; font: 700 24px var(--vn-font-mono); color: var(--vn-orange); }
html.vn:not([data-section="admin"]) .jobs-page .jb-qa button:disabled { opacity: .45; }

html.vn:not([data-section="admin"]) .jobs-page .jb-info { background: var(--border); }
html.vn:not([data-section="admin"]) .jobs-page .jb-info div { background: var(--vn-bg); }
html.vn:not([data-section="admin"]) .jobs-page .jb-info span { font-size: 12px; font-weight: 700; }
html.vn:not([data-section="admin"]) .jobs-page .jb-info b { font: 800 17px var(--vn-font-display); }
html.vn:not([data-section="admin"]) .jobs-page .jb-info b.jb-money { color: var(--vn-cyan); }
html.vn:not([data-section="admin"]) .jobs-page .jb-note { font-size: 13px; }

/* бонуси: рожеві прапорці, як checkbox у прототипі */
html.vn:not([data-section="admin"]) .jobs-page .jb-bn { min-height: 44px; transition: background .2s; }
html.vn:not([data-section="admin"]) .jobs-page .jb-bn:hover { background: rgba(255, 255, 255, .04); }
html.vn:not([data-section="admin"]) .jobs-page .jb-bn:focus-visible { box-shadow: inset 0 0 0 3px rgba(46, 230, 214, .6); }
html.vn:not([data-section="admin"]) .jobs-page .jb-bn.is-on { background: rgba(255, 79, 163, .07); }
html.vn:not([data-section="admin"]) .jobs-page .jb-ck { width: 22px; height: 22px; border-radius: 7px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-bn.is-on .jb-ck { background: var(--vn-pink); border-color: var(--vn-pink); box-shadow: 0 0 12px rgba(255, 79, 163, .4); }
html.vn:not([data-section="admin"]) .jobs-page .jb-bi { border-radius: 12px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-bn b a { display: inline-block; padding: 3px 0; }
html.vn:not([data-section="admin"]) .jobs-page .jb-bn__ex { border-radius: var(--vn-radius-pill); padding: 1px 8px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-vb { padding: 4px 10px; font-size: 12.5px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-bn.is-on .jb-vb { background: rgba(255, 79, 163, .16); color: var(--vn-pink-soft); }
html.vn:not([data-section="admin"]) .jobs-page .jb-rng input { height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
html.vn:not([data-section="admin"]) .jobs-page .jb-rng input:focus { border-color: var(--vn-cyan); box-shadow: var(--focus-ring); }

/* інші роботи */
html.vn:not([data-section="admin"]) .jobs-page .jb-oj { top: 96px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-oj a { min-height: 44px; color: var(--vn-text); }
html.vn:not([data-section="admin"]) .jobs-page .jb-oj a.is-on { background: rgba(255, 79, 163, .1); box-shadow: inset 3px 0 0 var(--vn-pink); }
html.vn:not([data-section="admin"]) .jobs-page .jb-oj .jb-ji--sm { border-radius: 9px; }
html.vn:not([data-section="admin"]) .jobs-page .jb-mini span { background: var(--vn-grad-cool); }
html.vn:not([data-section="admin"]) .jobs-page .jb-grp { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .jobs-page .jb-toast {
  min-height: 48px; display: flex; align-items: center; padding: 0 20px; border-radius: var(--vn-radius-pill);
  background: var(--vn-ink); border: 1px solid rgba(255, 79, 163, .5); box-shadow: 0 0 40px rgba(255, 79, 163, .35); font-weight: 700;
}

@media (max-width: 760px) {
  html.vn:not([data-section="admin"]) .jobs-page { gap: 18px; }
  html.vn:not([data-section="admin"]) .jobs-page .jb-calc { padding: 16px; }
  html.vn:not([data-section="admin"]) .jobs-page .jb-seg button,
  html.vn:not([data-section="admin"]) .jobs-page .jb-qa button,
  html.vn:not([data-section="admin"]) .jobs-page .jb-lnk { min-height: 40px; }
  html.vn:not([data-section="admin"]) .jobs-page .jb-stp input,
  html.vn:not([data-section="admin"]) .jobs-page .jb-rng input,
  html.vn:not([data-section="admin"]) .jobs-page .jb-sel select { font-size: 16px; }
  html.vn:not([data-section="admin"]) .jobs-page .jb-toast { bottom: 92px; }
}