/* Learn AI — the Jobs skin, on the Library design system.
   Shared by three page families:
     /jobs/            the hub of 50 professions   (jh-)
     /jobs/<slug>/     one profession playbook     (jb-)
     /find-jobs/       the worldwide launchpad     (fj-)

   Every page that loads this file also loads /assets/shell.css (tokens, type,
   .btn/.card/.tile/.band/.tag) and /assets/shell.js (nav + footer), and carries
   the standard head — <title>… | Learn AI</title> plus
   <meta name="viewport" content="width=device-width, initial-scale=1">.
   Only the tokens from shell.css are used below: warm ink, paper, gold. Nothing
   here re-declares a colour, so theme.css can flip the whole skin for light mode. */

/* ═══════════════ shared ═══════════════ */
.jb-div{border-top:1px solid var(--line)}
.jb-h2{margin:8px 0 14px}
.jb-p{color:var(--paper2);font-size:16.5px;line-height:1.6;max-width:760px}
.jb-p b{color:var(--paper)}
.jb-eyebrow{display:inline-flex;align-items:center;gap:8px}

/* ═══════════════ profession playbook (jb-) ═══════════════ */
.jb-hero{position:relative;overflow:hidden}
.jb-hero::before{content:"";position:absolute;inset:-20% -10% auto;height:520px;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 60% at 20% 0%,rgba(214,178,94,.14),transparent 70%),
             radial-gradient(50% 55% at 85% 8%,rgba(214,178,94,.07),transparent 70%)}
.jb-hero .sub{max-width:720px}
.jb-heroactions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.jb-note{margin-top:20px;font-size:13.5px;color:var(--paper2)}
.jb-note b{color:var(--gold)}

/* why-now reality cards */
.jb-why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.jb-wc{padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--ink2)}
.jb-wc .k{font-size:11.5px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.jb-wc h3{margin:0 0 8px}
.jb-wc p{margin:0;color:var(--paper2);font-size:14.5px}
.jb-wc p b{color:var(--paper)}

/* skills cards */
.jb-skills{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.jb-skill{position:relative;padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(241,232,214,.035),rgba(241,232,214,.015));
  transition:border-color .18s,transform .18s,box-shadow .18s}
.jb-skill:hover{border-color:rgba(214,178,94,.45);transform:translateY(-3px);box-shadow:var(--shadow)}
.jb-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;margin-bottom:14px;
  background:var(--gold-soft);border:1px solid var(--line)}
.jb-skill h3{margin:0 0 8px}
.jb-skill p{margin:0;color:var(--paper2);font-size:14.5px}
.jb-skill p b{color:var(--paper)}
.jb-skill .tools{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.jb-skill .tools span{font-size:11px;font-weight:600;letter-spacing:.4px;color:var(--paper2);padding:4px 10px;
  border-radius:999px;border:1px solid var(--line2)}

/* "land your first job" */
.jb-first{margin-top:28px;border:1px solid rgba(154,211,168,.28);border-radius:var(--r-lg);padding:24px 26px;
  background:linear-gradient(180deg,rgba(154,211,168,.06),transparent)}
.jb-first .tag{margin-bottom:12px;color:var(--sage);border-color:rgba(154,211,168,.45)}
.jb-first p{margin:0;color:var(--paper);font-size:16.5px;line-height:1.65;max-width:820px}
.jb-first p b{color:var(--sage)}

/* "say this in the interview" box (nested in jb-first) */
.jb-say{margin-top:18px;border-left:3px solid var(--sage);background:rgba(154,211,168,.07);border-radius:0 12px 12px 0;padding:16px 18px}
.jb-say .who{font-size:11.5px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;color:var(--sage);margin-bottom:8px}
.jb-say p{margin:0;color:var(--paper);font-size:15px;line-height:1.65;font-style:italic}

/* path steps */
.jb-path{margin-top:28px}
.jb-step{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 0;border-top:1px solid var(--line)}
.jb-step:first-child{border-top:0}
.jb-num{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-family:var(--serif);font-size:22px;
  background:var(--gold-soft);border:1px solid var(--line);color:var(--gold)}
.jb-step.cap .jb-num{background:rgba(214,178,94,.22);border-color:rgba(214,178,94,.5)}
.jb-step .body{min-width:0}
.jb-step .body .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.jb-step .body h3{margin:0}
.jb-step .body h3 a{color:var(--paper)}
.jb-step .body h3 a:hover{color:var(--gold)}
.jb-step .lvl{font-size:10.5px;font-weight:600;letter-spacing:.5px;border-radius:999px;padding:2px 9px;
  border:1px solid var(--line2);color:var(--paper2)}
.jb-step .lvl.Basic{color:var(--sage);border-color:rgba(154,211,168,.45)}
.jb-step .lvl.Core,.jb-step .lvl.Build{color:var(--sky);border-color:rgba(156,199,232,.45)}
.jb-step .lvl.Pro{color:var(--rose);border-color:rgba(240,169,155,.45)}
.jb-step .body p{margin:0;color:var(--paper2);font-size:14.5px}
.jb-step .body p b{color:var(--paper)}
.jb-step .body .go{display:inline-block;margin-top:8px;font-size:13.5px;font-weight:600;color:var(--gold)}

/* deep-track banner (when a rich /tracks page exists for this job) */
.jb-track{margin-top:22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--line2);border-radius:var(--r-lg);padding:20px 24px;
  background:linear-gradient(120deg,rgba(214,178,94,.08),rgba(214,178,94,.02))}
.jb-track .big{font-size:34px;line-height:1}
.jb-track h3{margin:0 0 3px}
.jb-track p{margin:0;color:var(--paper2);font-size:14px;max-width:560px}
.jb-track .sp{flex:1;min-width:20px}

/* prove-it project */
.jb-proj{margin-top:28px;border:1px solid rgba(214,178,94,.3);border-radius:var(--r-lg);padding:26px;
  background:linear-gradient(180deg,rgba(214,178,94,.06),transparent)}
.jb-proj .tag{margin-bottom:12px;color:var(--gold);border-color:rgba(214,178,94,.5);background:var(--gold-soft)}
.jb-proj h3{margin:0 0 10px;font-family:var(--serif);font-weight:400;font-size:clamp(22px,3vw,28px);line-height:1.15}
.jb-proj .lead{color:var(--paper);font-size:16px;margin:0 0 20px;max-width:780px}
.jb-build{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:4px}
.jb-build h4{margin:0 0 10px;font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);font-weight:600}
.jb-build ol,.jb-build ul{margin:0;padding-left:20px;color:var(--paper2);font-size:14.5px;line-height:1.7}
.jb-build li::marker{color:var(--gold)}
.jb-build li b{color:var(--paper)}
.jb-showoff{margin-top:20px;border-top:1px solid var(--line);padding-top:16px;color:var(--paper2);font-size:14px}
.jb-showoff b{color:var(--paper)}

/* honest-note callout + final CTA */
.jb-callout{margin-top:28px;border-left:3px solid var(--gold);background:var(--gold-soft);border-radius:0 12px 12px 0;padding:16px 20px}
.jb-callout p{margin:0;color:var(--paper);font-size:16px;line-height:1.6}
.jb-callout p b{color:var(--gold)}
.jb-cta{border:1px solid var(--line2);border-radius:var(--r-lg);padding:38px 28px;text-align:center;
  background:linear-gradient(120deg,rgba(214,178,94,.08),rgba(214,178,94,.02))}
.jb-cta h2{margin:0 0 12px}
.jb-cta p{color:var(--paper2);font-size:16px;max-width:600px;margin:0 auto 24px}
.jb-ctarow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.jb-ctasub{margin-top:16px;font-size:13.5px;color:var(--paper2)}

/* FAQ */
.jb-faq{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.jb-faq details{border:1px solid var(--line);border-radius:14px;background:var(--ink2);padding:0 20px;transition:border-color .16s}
.jb-faq details[open]{border-color:rgba(214,178,94,.35)}
.jb-faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:16px 0;
  font-weight:600;font-size:16px;color:var(--paper)}
.jb-faq summary::-webkit-details-marker{display:none}
.jb-faq summary .tw{margin-left:auto;font-family:var(--serif);color:var(--gold);font-size:24px;line-height:1;flex:0 0 auto;transition:transform .2s}
.jb-faq details[open] summary .tw{transform:rotate(45deg)}
.jb-faq .ans{padding:0 0 16px;color:var(--paper2);font-size:15px;line-height:1.65;max-width:760px}

/* related jobs strip */
.jb-rel{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* "this page stays current" signal band */
.jb-signal{margin-top:28px;border:1px solid var(--line2);border-radius:var(--r-lg);padding:26px;
  background:linear-gradient(120deg,rgba(214,178,94,.08),rgba(214,178,94,.02))}
.jb-signal .tag{margin-bottom:12px;color:var(--gold);border-color:rgba(214,178,94,.5)}
.jb-signal h3{margin:0 0 10px;font-family:var(--serif);font-weight:400;font-size:clamp(21px,3vw,26px);line-height:1.15}
.jb-signal p{margin:0 0 6px;color:var(--paper2);font-size:15px;line-height:1.65;max-width:760px}
.jb-signal p b{color:var(--paper)}
.jb-signal .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.jb-signal .fine{margin-top:12px;font-size:12.5px;color:var(--mut)}

@media(max-width:820px){
  .jb-why,.jb-skills,.jb-build{grid-template-columns:1fr}
}
@media(max-width:720px){
  .jb-rel{grid-template-columns:1fr}
}

/* ═══════════════ the hub (jh-) ═══════════════ */
.jh-metrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.jh-metrow .pill b{color:var(--gold)}

/* controls: search + category chips */
.jh-controls{position:sticky;top:var(--nav-h);z-index:20;padding:14px 0;
  background:linear-gradient(180deg,var(--ink) 72%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.jh-search{max-width:460px}
.jh-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.jh-cat{font-size:12.5px;font-weight:600;font-family:var(--sans);color:var(--paper2);border:1px solid var(--line);
  background:var(--ink2);border-radius:999px;padding:7px 14px;cursor:pointer;white-space:nowrap;
  transition:color .15s,border-color .15s,background .15s}
.jh-cat:hover{color:var(--paper);border-color:rgba(214,178,94,.45)}
.jh-cat.on{color:#1a1405;background:var(--gold);border-color:var(--gold)}

.jh-sech{display:flex;align-items:baseline;gap:12px;margin:38px 0 14px;flex-wrap:wrap}
.jh-sech h2{font-size:clamp(22px,3vw,30px);margin:0}
.jh-sech span{color:var(--mut);font-size:13px}
.jh-empty{color:var(--paper2);padding:30px 0;font-size:15px}

/* the card used by the hub grid and by the "related paths" strip on a job page */
.jh-card{position:relative;display:flex;flex-direction:column;gap:6px;color:var(--paper);text-decoration:none;
  background:linear-gradient(180deg,rgba(241,232,214,.035),rgba(241,232,214,.015));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;
  transition:transform .18s,border-color .18s,box-shadow .18s,background .18s}
.jh-card:hover{transform:translateY(-3px);border-color:rgba(214,178,94,.45);box-shadow:var(--shadow);
  background:linear-gradient(180deg,rgba(214,178,94,.07),rgba(241,232,214,.02))}
.jh-card .ic{font-size:26px;line-height:1;margin-bottom:8px}
.jh-card h3{margin:0;font-size:17px}
.jh-card p{margin:0;color:var(--paper2);font-size:14px;line-height:1.55}

/* ═══════════════ find-a-job launchpad (fj-) ═══════════════ */
.fj-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.fj-tab{font-size:12.5px;font-weight:600;font-family:var(--sans);color:var(--paper2);border:1px solid var(--line);
  background:var(--ink2);border-radius:999px;padding:7px 14px;cursor:pointer;white-space:nowrap;
  transition:color .15s,border-color .15s,background .15s}
.fj-tab:hover{color:var(--paper);border-color:rgba(214,178,94,.45)}
.fj-tab.on{color:#1a1405;background:var(--gold);border-color:var(--gold)}
.fj-search{max-width:420px;margin-top:14px}
.fj-note{color:var(--paper2);font-size:13.5px;margin-top:16px;max-width:760px}
.fj-note b{color:var(--paper)}
.fj-note .ok{color:var(--sage)}

/* country cards */
.fj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.fj-country{padding:20px 22px;transition:border-color .16s}
.fj-country:hover{border-color:rgba(214,178,94,.35)}
.fj-country .ch{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.fj-country .flag{font-size:26px;line-height:1}
.fj-country .ch h3{margin:0;font-size:17px}
.fj-plat{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--line);text-decoration:none}
.fj-plat:first-of-type{border-top:0}
.fj-plat .pn{color:var(--paper);font-weight:600;font-size:14px}
.fj-plat:hover .pn{color:var(--gold)}
.fj-plat .pd{color:var(--paper2);font-size:12.5px;margin-top:1px;line-height:1.45}
.fj-plat .arw{margin-left:auto;color:var(--mut);font-size:13px;flex:0 0 auto}
.fj-plat:hover .arw{color:var(--gold)}
.fj-badge{font-size:9.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border-radius:999px;
  padding:1px 8px;border:1px solid var(--line2);color:var(--paper2);margin-left:8px;vertical-align:middle}
.fj-badge.gov{color:var(--sage);border-color:rgba(154,211,168,.45)}
.fj-badge.remote{color:var(--sky);border-color:rgba(156,199,232,.45)}
.fj-badge.graduate{color:var(--gold);border-color:rgba(214,178,94,.5)}
.fj-badge.niche{color:var(--rose);border-color:rgba(240,169,155,.45)}

/* remote + freelance strips */
.fj-lists{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fj-list{padding:24px}
.fj-list h3{margin:0 0 4px;font-family:var(--serif);font-weight:400;font-size:22px}
.fj-list .sub2{color:var(--paper2);font-size:13.5px;margin:0 0 12px;line-height:1.55}
.fj-item{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-top:1px solid var(--line);text-decoration:none}
.fj-item .pn{color:var(--paper);font-weight:600;font-size:14px}
.fj-item:hover .pn{color:var(--gold)}
.fj-item .pd{color:var(--paper2);font-size:12.5px;margin-top:1px;line-height:1.45}
.fj-item .tg{margin-left:auto;font-size:10px;font-weight:600;color:var(--mut);border:1px solid var(--line);
  border-radius:999px;padding:2px 8px;white-space:nowrap;flex:0 0 auto}

.fj-safe h3{margin:0;color:var(--gold)}
.fj-safe ul{margin:10px 0 0;padding-left:18px;color:var(--paper2);font-size:14.5px;line-height:1.75}
.fj-safe li::marker{color:var(--gold)}
.fj-safe li b{color:var(--paper)}

@media(max-width:720px){
  .fj-lists{grid-template-columns:1fr}
  .jh-controls{top:0}
}