/* =====================================================================
   job-details.html only. Shared rules live in assets/css/styles.css.
   No new colours, radii, shadows or type sizes: tokens only.
   ===================================================================== */

.jd-page{--jd-bar-h:76px}
.jd-hero{padding-block:clamp(2rem,1.5rem + 2.5vw,4rem)}
.jd-sample{max-width:760px;margin:var(--sp-4) 0 var(--sp-5)}
.jd-fallback{
  display:flex;
  gap:10px;
  align-items:flex-start;
  max-width:760px;
  margin:0 0 var(--sp-5);
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--saffron-200);
  border-radius:var(--r-md);
  background:var(--saffron-50);
  color:var(--ink-800);
  font-size:var(--fs-sm);
}
.jd-fallback svg{width:18px;height:18px;color:var(--saffron-700);flex:none;margin-top:2px}
.jd-head{display:grid;gap:var(--sp-6)}
.jd-head__main{
  max-width:980px;
  padding:clamp(22px,3vw,40px);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:#fff;
  box-shadow:var(--sh-sm);
}
.jd-head__top{display:flex;gap:var(--sp-4);align-items:flex-start}
.jd-head h1{margin:0}
.jd-co{margin:var(--sp-2) 0 0;color:var(--text-muted)}
.jd-co__rating{display:inline-flex;align-items:center;gap:4px;margin-left:8px;color:var(--saffron-800);font-size:var(--fs-sm)}
.jd-co__rating svg{width:15px;height:15px;fill:currentColor}
.jd-agency,
.jd-free,
.jd-steps__note{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:var(--sp-5) 0 0;
  font-size:var(--fs-sm);
  line-height:1.6;
  color:var(--text-muted);
}
.jd-agency svg,
.jd-free svg,
.jd-steps__note svg{width:19px;height:19px;color:var(--forest-500);flex:none;margin-top:2px}
.jd-chips{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  margin:var(--sp-6) 0 0;
  padding:0;
}
.jd-chips li{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--ink-50);
  font-size:var(--fs-sm);
  color:var(--ink-700);
}
.jd-chips svg{width:16px;height:16px;color:var(--saffron-700);flex:none}
.jd-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-4)}
.jd-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}

.jd-section{padding-block:clamp(2.5rem,2rem + 3vw,4.5rem)}
.jd-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start}
@media (min-width:1040px){.jd-layout{grid-template-columns:minmax(0,1fr) 320px}}
.jd-main{display:grid;gap:var(--sp-5);min-width:0}
.jd-block{
  padding:clamp(22px,2.4vw,32px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow:var(--sh-xs);
}
.jd-block h2{font-size:var(--fs-h3);margin:0 0 var(--sp-4)}
.jd-block--tint{background:var(--surface-2)}
.jd-block--ai{background:linear-gradient(145deg,var(--forest-50),#fff 72%)}
.jd-highlights{margin-top:var(--sp-6)}
.jd-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.jd-list li{
  position:relative;
  margin:0;
  padding-left:28px;
  color:var(--ink-700);
  line-height:1.65;
}
.jd-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.52em;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--saffron-100);
  box-shadow:inset 0 0 0 5px var(--saffron-500);
}
.jd-list--green li::before{background:var(--forest-100);box-shadow:inset 0 0 0 5px var(--forest-500)}
.jd-skills-note{margin-bottom:var(--sp-4)}
.jd-facts{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin:0;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  overflow:hidden;
}
@media (min-width:700px){.jd-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.jd-facts div{
  display:grid;
  gap:4px;
  padding:var(--sp-4);
  border-bottom:1px solid var(--line-soft);
  background:#fff;
}
@media (min-width:700px){.jd-facts div:nth-child(odd){border-right:1px solid var(--line-soft)}}
.jd-facts dt{font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-subtle)}
.jd-facts dd{margin:0;color:var(--ink-800);font-weight:600}
.jd-client__row{display:flex;gap:var(--sp-4);align-items:flex-start}
.jd-client__body{min-width:0}
.jd-client h3{margin:0 0 var(--sp-1);font-size:var(--fs-h4)}
.jd-client__meta{margin:0 0 var(--sp-3);font-size:var(--fs-sm);color:var(--text-muted)}
.jd-fraudbox{border-color:var(--saffron-200);background:var(--saffron-50)}

.jd-rail{display:grid;gap:var(--sp-4);min-width:0}
@media (min-width:1040px){.jd-rail{position:sticky;top:calc(var(--header-h) + 20px)}}
.jd-apply-card{padding:var(--sp-5)}
.jd-apply-card__h{font-size:var(--fs-h4);margin:0 0 var(--sp-4)}
.jd-apply-card__facts{display:grid;gap:0;margin:0 0 var(--sp-5);border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden}
.jd-apply-card__facts div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-top:1px solid var(--line-soft)}
.jd-apply-card__facts div:first-child{border-top:0}
.jd-apply-card__facts dt{font-size:var(--fs-xs);color:var(--text-muted)}
.jd-apply-card__facts dd{margin:0;font-size:var(--fs-sm);font-weight:700;color:var(--ink-800);text-align:right}
.jd-applied-note svg{width:16px;height:16px;color:var(--forest-500);vertical-align:-3px}

.jd-steps{margin-top:var(--sp-8)}
.jd-steps__note{
  justify-content:center;
  margin-top:var(--sp-8);
  padding:var(--sp-4) var(--sp-5);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.06);
  color:var(--text-on-dark-muted);
}
.jd-steps__note svg{color:var(--saffron-300)}
.jd-similar .job-card{height:100%}

.jd-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:var(--z-fab);
  display:none;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:10px;
  align-items:center;
  padding:10px var(--sp-4) calc(10px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.96);
  box-shadow:0 -12px 28px -18px rgba(12,26,10,.38);
  backdrop-filter:saturate(1.4) blur(10px);
}
.jd-bar__copy{min-width:0}
.jd-bar__title,
.jd-bar__meta{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jd-bar__title{font-weight:700;color:var(--ink-800);font-size:var(--fs-sm)}
.jd-bar__meta{font-size:var(--fs-xs);color:var(--text-muted)}
@media (max-width:899.98px){
  .jd-bar-on .jd-bar{display:grid}
  .jd-bar-on{padding-bottom:var(--jd-bar-h)}
}
@media (max-width:420px){
  .jd-bar{grid-template-columns:minmax(0,1fr) 44px auto}
  #jd-apply-bar{padding-inline:16px}
}

.jd-file{padding:10px}
.jd-file::file-selector-button{
  min-height:36px;
  margin-right:12px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface-2);
  color:var(--forest-700);
  font-weight:700;
}

@media (max-width:699.98px){
  .jd-head__top{align-items:flex-start}
  .jd-actions .btn{width:100%;justify-content:center}
  .jd-client__row{flex-direction:column}
}