/* Jobs (decision 0020; docs/design/jobs-ux.md): Work near you, the job page and its Honesty card, Hiring here, the
   steward's jobs and the post form. Linked only by the pages that show jobs. Existing tokens only (palette.md); saffron
   (#f4bc5c / #8a5a00), the vacancy green (#5fd39a / #1f7a45) and the block red (#ff8a80 / #b3261e) are the design's AA
   pairs (§9). Safari 13: margins instead of flex gap, long-hand offsets, no color-mix or aspect-ratio. Only transform
   and opacity animate; reduced motion keeps everything still (motion.md). */

.jobs-page,.job-page{padding-top:28px;padding-bottom:72px}

/* ---- the hiring field (a calm hero band under the header, not the home field) ---- */
.jobs-field{position:relative;overflow:hidden;margin:12px 0 18px;padding:24px 20px 20px;min-height:300px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(120% 90% at 50% 110%,#0b1433 0%,#070a1a 60%);z-index:0}
.jobs-field-layers{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none}
.jobs-blob{position:absolute;width:60%;height:80%;border-radius:50%;opacity:.55;filter:blur(40px);animation:jobs-drift 60s ease-in-out infinite alternate}
.jobs-blob.is-a{top:-20%;left:-10%;background:radial-gradient(circle,rgba(67,229,233,.35),transparent 70%)}
.jobs-blob.is-b{right:-15%;bottom:-30%;background:radial-gradient(circle,rgba(156,114,255,.35),transparent 70%);animation-duration:84s}
.jobs-contours{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5;background:repeating-radial-gradient(circle at 70% 120%,transparent 0,transparent 22px,rgba(180,220,255,.06) 23px,transparent 24px)}
.jobs-field h1{font:600 clamp(1.9rem,5vw,2.8rem)/1.1 'Manrope',sans-serif;letter-spacing:-.03em;margin:.2rem 0 .4rem}
.jobs-lede{color:var(--muted);max-width:34rem;margin:0}
.jobs-gems{position:relative;height:130px;margin-top:14px}
.jobs-gem{position:absolute;display:block;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;text-decoration:none;color:var(--ink);animation:jobs-gem-breathe 4.2s ease-in-out infinite}
.jobs-gem:before{content:"";position:absolute;top:13px;left:13px;width:18px;height:18px;border-radius:4px;transform:rotate(45deg);background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 14px rgba(67,229,233,.55)}
.jobs-gem.is-future:before{background:transparent;border:2px solid var(--violet);box-shadow:none}
.jobs-gem:focus-visible:before,.jobs-gem:hover:before{box-shadow:0 0 0 3px var(--night),0 0 0 5px var(--cyan),0 0 18px rgba(67,229,233,.7)}
.jobs-gem-count{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--panel);border:1px solid var(--line);font:700 .62rem/16px 'Manrope',sans-serif;text-align:center}
.jobs-gem-label{position:absolute;left:50%;top:44px;transform:translateX(-50%);white-space:nowrap;font-size:.66rem;color:var(--muted)}
.jobs-chips{margin:0 0 .6rem}
.jobs-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:.4rem 0 .6rem}
.jobs-count{margin:0 1rem .4rem 0;color:var(--muted)}
.jobs-more{color:var(--muted);font-size:.88rem}
.jobs-end{text-align:center;padding:18px;margin:16px 0;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.jobs-end p{margin:.3rem 0;color:var(--muted);font-size:.9rem}
.jobs-end strong{color:var(--ink)}
.jobs-empty{padding:40px 18px}
.jobs-state-glyph{display:inline-block;width:56px;height:56px;line-height:54px;border-radius:50%;border:1px solid var(--line);color:var(--cyan);font:700 1.2rem 'Manrope',sans-serif}

/* ---- job rows and tiles ---- */
.job-list,.job-grid,.job-mine{list-style:none;margin:0;padding:0}
.job-row{position:relative;display:grid;grid-template-columns:64px 1fr;grid-column-gap:.85rem;padding:.85rem .5rem .85rem 0;border-top:1px solid var(--line);border-radius:12px;transition:background-color var(--m-hover,180ms) ease-out,transform var(--m-press,90ms) ease-out}
.job-row:hover,.job-row:focus-within{background:rgba(67,229,233,.05)}
.job-row:active{transform:scale(.985)}
.job-row.is-filled,.job-tile.is-filled{opacity:.72}
.job-row-art{display:block;width:64px;height:64px;border-radius:14px;background:radial-gradient(circle at 65% 30%,rgba(156,114,255,.35),transparent 50%),linear-gradient(145deg,#122b41,#10172f);position:relative}
.job-gem-art{position:absolute;top:22px;left:22px;width:20px;height:20px;border-radius:5px;transform:rotate(45deg);background:linear-gradient(135deg,var(--cyan),var(--violet))}
.job-row-kicker,.job-tile-kicker{display:block;color:var(--muted);font-size:.78rem}
.job-row h3,.job-tile h3{margin:.1rem 0 .15rem;font:600 1.02rem/1.25 'Manrope',sans-serif}
.job-row h3 a,.job-tile h3 a{color:#9fe9ee;text-decoration:none}
.job-row h3 a:after,.job-tile h3 a:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px}
.job-row h3 a:focus-visible,.job-tile h3 a:focus-visible{outline:none}
.job-row h3 a:focus-visible:after,.job-tile h3 a:focus-visible:after{outline:3px solid var(--cyan);outline-offset:2px}
.job-pay{margin:.1rem 0 .35rem;font-weight:700}
.job-pay small{font-weight:400;color:var(--muted)}
.job-signals{display:flex;flex-wrap:wrap;align-items:center;margin:0}
.job-signals>*{margin:0 .6rem .3rem 0}
.job-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:14px;gap:14px}
.job-tile{position:relative;padding:16px;min-height:150px;border:1px solid var(--line);border-radius:18px;background:var(--panel);transition:transform var(--m-hover,180ms) ease-out,border-color var(--m-hover,180ms)}
.job-tile-kicker{color:var(--cyan);font:700 .95rem 'Manrope',sans-serif}
.job-tile-detail{color:var(--muted);font-size:.85rem;margin:0 0 .5rem}
@media (hover:hover){.job-tile:hover{transform:translateY(-3px);border-color:rgba(67,229,233,.45)}}

/* vacancy chip and freshness ring */
.job-vacancy{display:inline-flex;align-items:center;min-height:24px;padding:0 .55rem;border-radius:999px;border:1px solid rgba(95,211,154,.45);color:#5fd39a;font-size:.74rem;font-weight:700}
.job-vacancy i{width:8px;height:8px;border-radius:50%;background:#5fd39a;margin-right:.4rem;animation:jobs-dot 2.4s ease-in-out infinite}
.job-vacancy.is-future{border-color:var(--line);color:var(--muted)}
.job-vacancy.is-future i{background:transparent;border:1.5px solid var(--muted);animation:none}
.job-vacancy.is-filled{border-color:rgba(156,114,255,.5);color:var(--violet)}
.job-ring{display:inline-flex;align-items:center;font-size:.74rem;color:var(--muted)}
.job-ring svg{width:24px;height:24px;margin-right:.3rem;transform:rotate(-90deg)}
.job-ring.is-big svg{width:56px;height:56px;margin-right:.7rem}
.job-ring-track{fill:none;stroke:var(--line);stroke-width:3.2}
.job-ring-value{fill:none;stroke:var(--cyan);stroke-width:3.2;stroke-linecap:round;transition:stroke-dashoffset 700ms cubic-bezier(.2,.8,.2,1)}
.job-ring.is-ageing .job-ring-value{stroke:#f4bc5c}
.job-ring.is-ending .job-ring-value{stroke:var(--muted)}

/* ---- the job page and its Honesty card ---- */
.job-hero{margin:14px 0 6px}
.job-hero h1{font:600 clamp(1.8rem,5vw,2.6rem)/1.1 'Manrope',sans-serif;letter-spacing:-.03em;margin:.3rem 0}
.job-occupation{color:var(--muted);font-size:.88rem}
.job-honesty{position:relative;border:1px solid rgba(67,229,233,.28);border-radius:22px;padding:18px;margin:14px 0;background:linear-gradient(160deg,rgba(67,229,233,.07),rgba(156,114,255,.06) 60%,transparent),var(--panel);box-shadow:0 18px 50px -24px rgba(0,0,0,.6)}
.job-honesty-head{display:flex;justify-content:space-between;align-items:flex-start}
.job-honesty-head .kicker{margin:0}
.job-seal-mini{display:inline-block;width:44px;height:44px;line-height:40px;border-radius:50%;border:2px dashed var(--violet);color:var(--violet);font:800 .62rem 'Manrope',sans-serif;text-align:center;transform:rotate(-10deg)}
.job-big-pay{font:700 1.7rem/1.1 'Manrope',sans-serif;letter-spacing:-.02em;margin:.25rem 0 .6rem}
.job-big-pay small{font:500 .95rem 'DM Sans',sans-serif;color:var(--muted)}
.job-facts{margin:0}
.job-facts>div{display:grid;grid-template-columns:minmax(8rem,38%) 1fr;grid-column-gap:1rem;padding:.55rem 0;border-top:1px solid var(--line)}
.job-facts dt{color:var(--muted);font-size:.85rem}
.job-facts dd{margin:0}
.job-facts dd small{display:block;color:var(--muted)}
.job-fresh dd{display:flex;align-items:center}
.job-fresh b{display:block}
.job-honesty-note{margin:.6rem 0 0;color:var(--muted);font-size:.8rem}
.job-description,.job-employer{margin:18px 0}
.job-words{white-space:pre-line}
.job-ended{text-align:center;padding:20px;margin:12px 0;border:1px dashed rgba(156,114,255,.45);border-radius:18px}
.job-seal{width:130px;height:130px;margin-bottom:12px}
.job-article.is-ended .job-honesty{opacity:.8}
.job-apply-bar{margin:20px 0}
.job-apply{width:100%}
.job-apply-note{color:var(--muted);font-size:.84rem;margin:.5rem 0 0}
@media (max-width:600px){
  .job-apply-bar{position:-webkit-sticky;position:sticky;bottom:0;z-index:5;margin:20px -12px 0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--night);border-top:1px solid var(--line)}
}

/* ---- Hiring here (listing page) ---- */
.detail-visual{position:relative;overflow:hidden}
.job-ribbon{position:absolute;top:22px;right:-34px;width:160px;transform:rotate(40deg);padding:4px 0;text-align:center;background:linear-gradient(90deg,#f4bc5c,#f7d38c);color:#2a1a00;font:800 .6rem/1.2 'Manrope',sans-serif;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.job-hiring{margin:1.4rem 0;padding:1rem 1.1rem;border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:18px;background:var(--panel)}
.job-ribbon-band{display:inline-flex;align-items:center;margin:0 0 .6rem;padding:.35rem .8rem .35rem .4rem;border-radius:999px;background:linear-gradient(90deg,#f4bc5c,#f7d38c);color:#2a1a00;font:800 .7rem 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.job-ribbon-band i{display:inline-block;width:20px;height:20px;line-height:17px;margin-right:.45rem;border-radius:50%;border:1.5px dashed #6b4300;font-style:normal;font-size:.62rem;text-align:center;transform:rotate(-12deg)}

/* ---- the steward's jobs and the post form ---- */
.job-still{display:flex;align-items:flex-start}
.job-still h2{margin:0 0 .3rem}
.job-still-actions{display:flex;flex-wrap:wrap;margin-top:.6rem}
.job-still-actions>*{margin:0 .5rem .5rem 0;min-height:48px}
.job-mine-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:0 0 .3rem}
.job-status{display:inline-block;padding:.1rem .6rem;border-radius:999px;border:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.job-status.is-published{border-color:rgba(95,211,154,.45);color:#5fd39a}
.job-status.is-inreview,.job-status.is-paused{border-color:rgba(244,188,92,.5);color:#f4bc5c}
.job-status.is-rejected,.job-status.is-takendown{border-color:rgba(255,138,128,.5);color:#ff8a80}
.job-edit-grid{display:grid;grid-template-columns:1fr;grid-gap:18px;gap:18px}
@media (min-width:900px){.job-edit-grid{grid-template-columns:minmax(0,1fr) 320px}.job-checks{position:-webkit-sticky;position:sticky;top:100px;align-self:start}}
.job-pay-row{display:flex;flex-wrap:wrap;align-items:center}
.job-pay-row>*{margin:0 .5rem .5rem 0}
.job-pay-row input{width:7rem}
.job-french{margin:1rem 0;padding:.6rem .8rem;border:1px dashed var(--line);border-radius:14px}
.job-french summary{cursor:pointer;font-weight:600}
.job-edit-actions>*{margin:0 .6rem .6rem 0;min-height:52px}
.job-check-list{list-style:none;margin:.5rem 0;padding:0}
.job-check-list li{display:flex;align-items:flex-start;padding:.3rem 0;font-size:.88rem}
.job-check-list i{flex:none;display:inline-block;width:20px;height:20px;line-height:17px;margin:1px .55rem 0 0;border-radius:50%;border:1.5px solid var(--line);font-style:normal;font-size:.7rem;font-weight:800;text-align:center;transition:background-color var(--m-hover,180ms),border-color var(--m-hover,180ms),transform var(--m-move,260ms) cubic-bezier(.3,1.4,.5,1)}
.job-check-list li.is-ok i{background:#5fd39a;border-color:#5fd39a;color:#06141c;transform:scale(1.08)}
.job-check-list li.is-ok i:before{content:"✓"}
.job-check-list li.is-bad i{border-color:#ff8a80;color:#ff8a80}
.job-check-list li.is-bad i:before{content:"!"}
.job-findings{margin:12px 0}
.job-findings h3{margin:.8rem 0 .3rem;font-size:.95rem}
.job-finding-list{margin:0;padding-left:1.1rem}
.job-finding-list li{margin:.2rem 0}
.job-finding-list.is-blocker li{color:#ff8a80}
.job-finding-list.is-review li{color:#f4bc5c}
.job-finding-list q{font-weight:700}
.job-posted{text-align:center}
.job-posted .passport-seal{margin-bottom:1rem}

/* ---- Dawn (light theme) ---- */
html[data-theme="light"] .jobs-field{background:radial-gradient(120% 90% at 50% 110%,#e7ecff 0%,#f5f7fb 60%)}
html[data-theme="light"] .job-row h3 a,html[data-theme="light"] .job-tile h3 a{color:#3f37a3}
html[data-theme="light"] .job-vacancy{color:#1f7a45;border-color:rgba(31,122,69,.45)}
html[data-theme="light"] .job-vacancy i{background:#1f7a45}
html[data-theme="light"] .job-vacancy.is-future{color:var(--muted)}
html[data-theme="light"] .job-vacancy.is-future i{background:transparent}
html[data-theme="light"] .job-ring.is-ageing .job-ring-value{stroke:#8a5a00}
html[data-theme="light"] .job-status.is-published{color:#1f7a45}
html[data-theme="light"] .job-status.is-inreview,html[data-theme="light"] .job-status.is-paused,html[data-theme="light"] .job-finding-list.is-review li{color:#8a5a00}
html[data-theme="light"] .job-status.is-rejected,html[data-theme="light"] .job-status.is-takendown,html[data-theme="light"] .job-finding-list.is-blocker li,html[data-theme="light"] .job-check-list li.is-bad i{color:#b3261e}
html[data-theme="light"] .job-check-list li.is-ok i{background:#1f7a45;border-color:#1f7a45;color:#fff}
html[data-theme="light"] .job-row-art{background:linear-gradient(145deg,#dfe6ff,#eef1fb)}

@keyframes jobs-gem-breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}
@keyframes jobs-dot{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes jobs-drift{from{transform:translate(0,0)}to{transform:translate(6%,4%)}}

@media (prefers-reduced-motion:reduce){
  .jobs-gem,.jobs-blob,.job-vacancy i{animation:none}
  .job-row,.job-tile,.job-ring-value,.job-check-list i{transition:none}
  .job-row:active,.job-tile:hover{transform:none}
}