/* One open position. The loading state is the same idea as the roles list and the meeting booker:
   the shape of the thing arrives first, then the text replaces it, so nothing jumps. */

/* A posting reads as a document, not as a landing page: ranged left, one column, the same 820px
   measure as the text below it. .page-hero centres its content, which left the meta row — a flex
   row, so text-align never reached it — hard against the left while the title sat centred. */
.job-hero { padding-bottom: 0; text-align: left; }
.job-hero .container { max-width: 820px; }
.job-hero .crumbs { justify-content: flex-start; margin-bottom: 28px; }
.job-hero .hero-actions { justify-content: flex-start; }
.job-hero h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; margin: 0 0 18px; max-width: 20ch; }

.job-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 28px; color: rgb(var(--ink) / .62); font-size: 15px; }
.job-meta i { color: rgb(var(--ink) / .3); font-style: normal; }

.job-section { padding-top: 56px; }
.job-section .container { max-width: 820px; }

.job-part + .job-part { margin-top: 48px; }
.job-part h2 { font-size: 22px; margin: 0 0 16px; }

/* the posting's own HTML, from Comeet */
.job-part .prose { color: rgb(var(--ink) / .74); line-height: 1.7; font-size: 16px; }
.job-part .prose p { margin: 0 0 16px; }
.job-part .prose ul,
.job-part .prose ol { margin: 0 0 16px; padding-left: 22px; }
.job-part .prose li { margin: 0 0 10px; }
.job-part .prose b,
.job-part .prose strong { color: rgb(var(--ink) / .92); font-weight: 600; }
.job-part .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.job-part .prose h2,
.job-part .prose h3,
.job-part .prose h4 { color: rgb(var(--ink) / .92); font-size: 17px; margin: 28px 0 12px; }

.job-foot { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.job-foot .fine { margin: 16px 0 0; }

/* ── loading ───────────────────────────────────────────────────────────── */
.sk { display: block; border-radius: 8px; background: rgb(var(--ink) / .07); position: relative; overflow: hidden; }
.sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(var(--ink) / .07), transparent);
  animation: job-sheen 1.5s infinite;
}
@keyframes job-sheen { 100% { transform: translateX(100%); } }

.sk-title { height: clamp(38px, 5vw, 62px); width: min(560px, 80%); margin-bottom: 20px; }
.sk-meta { height: 16px; width: 280px; }
.sk-line { height: 14px; margin-bottom: 14px; }
.sk-line.sk-short { width: 62%; }

.job-head:not(.is-loading) .sk,
.job-body:not(.is-loading) .sk { display: none; }

@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

@media (max-width: 560px) {
  .job-section { padding-top: 40px; }
  .job-foot { margin-top: 40px; }
}

/* Light skin: small green text uses --mint (≥4.5:1 on the light surfaces); --accent stays for dots, fills,
   borders and large numbers. Light only, so the dark skin is unchanged. */
:root[data-theme="light"] .job-part .prose a { color: var(--mint); }