/* The job page and its closed state on the Daylight shell (web build slice 2).
   Port of design/mockups/web-final/job-detail.html. Linked by routers/job_pages.py after daylight.css and jobs-dl.css.
   Scoped by data-page ("job", "job-closed") so nothing leaks onto another page. Tokens, not literals, except where the
   mockup uses one (the closed banner is always the dark card, like .hero.night). */

[data-page="job"] .sr,[data-page="job-closed"] .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.jobtop{padding:0 0 8px}
.jobbody{padding:8px 0 72px}

/* ---------- the ticket ---------- */
.ticket{display:grid;grid-template-columns:minmax(0,1fr) 230px;background:var(--base);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);margin:6px 0 40px;position:relative}
.ticket:not(:has(.r)){grid-template-columns:minmax(0,1fr)}
.ticket .l{padding:30px 34px;min-width:0}
.ticket .r{border-left:3px dashed var(--ink);background:var(--lime);color:#111827;display:grid;place-content:center;text-align:center;padding:20px}
.ticket .r b{display:block;font:800 1.9rem/1.05 var(--f-d);font-stretch:62%;text-transform:uppercase;margin-top:8px;overflow-wrap:anywhere}
.ticket:has(.r):before,.ticket:has(.r):after{content:"";position:absolute;right:208px;width:30px;height:30px;border-radius:50%;background:var(--canvas);border:2px solid var(--ink)}
.ticket:has(.r):before{top:-17px}
.ticket:has(.r):after{bottom:-17px}
.job-h1{font-size:clamp(2.2rem,4.6vw,4.6rem);line-height:.95;margin:0 0 12px;overflow-wrap:anywhere}
.ticket .sub{margin:0;font:500 .72rem/1.5 var(--f-m);letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.ticket .sub a{color:var(--cobalt);font-weight:700}
.head-mark{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.head-mark>div{min-width:0}

.apply-now{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 0}
.apply-now .btn:not(.ghost),.apply .btn:not(.ghost):not(.btn-alt){background:var(--lime);color:#111827;min-height:48px}
.apply-now .btn.ghost{min-height:48px}
.apply-now .btn:not(.ghost)::after,.apply .btn:not(.ghost)::after,.apply-bar .btn::after{content:none}
.crumbs{display:block;line-height:1.9}
.crumbs>*{display:inline}
.crumbs span{margin-left:10px}
.crumbs span::before{margin-right:10px}
.apply-multi{display:inline-flex;flex-wrap:wrap;gap:10px;vertical-align:middle}
.btn.btn-alt{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);clip-path:none;min-height:48px}
.btn.btn-alt::after{content:none}
.apply-note{margin:12px 0 0;font:500 .72rem/1.5 var(--f-m);letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.related-line{margin:18px 0 0;padding:12px 16px;background:var(--lav);border:1.5px solid var(--ink);font-size:.95rem}
.related-line a{color:var(--cobalt);font-weight:700}

/* ---------- the employer mark (interface/logo_mark.py): the letter tile is always there, the logo lies over it ---------- */
.mark{position:relative;flex:none;width:var(--ms,60px);height:var(--ms,60px);background:var(--sand);overflow:hidden;box-sizing:border-box}
.mark::before{content:"";position:absolute;inset:0;background:url(/app/tunai-icon-512.png) center/cover no-repeat;filter:grayscale(1) opacity(.45)}
.mark .mk-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:5px;box-sizing:border-box;border:1.5px solid var(--rule);opacity:0}
.mark .mk-img.ok{opacity:1}

/* ---------- tags, checker stamps ---------- */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.tags .tag{white-space:normal}
.checked{margin:0 0 26px}
.checked .chk{color:var(--ink2);margin:0 0 12px}
.stamps{display:flex;flex-wrap:wrap;gap:14px}
.stamp{font:800 1rem var(--f-d);font-stretch:66%;text-transform:uppercase;border:3px solid var(--cobalt);color:var(--cobalt);padding:6px 12px;transform:rotate(-3deg);background:var(--base)}
.stamp:nth-child(2){transform:rotate(2deg)}
.stamp:nth-child(3){transform:rotate(-1deg);border-color:var(--amber);color:var(--amber)}
@media(prefers-reduced-motion:reduce){.stamp{transform:none!important}}

/* ---------- facts ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border:1.5px solid var(--rule);background:var(--base);margin:0 0 30px}
.fact{padding:16px 20px;border-right:1.5px solid var(--rule);border-bottom:1.5px solid var(--rule);margin:0 -1.5px -1.5px 0;min-width:0}
.fact .l{font:500 .72rem/1.4 var(--f-m);letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.fact .v{margin-top:6px;font:800 1.5rem/1.05 var(--f-d);font-stretch:62%;text-transform:uppercase;overflow-wrap:anywhere}
.facts{overflow:hidden}
.fact-lock a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1.5px dashed var(--ink2);color:var(--ink2);text-decoration:none;font:600 .78rem var(--f-m);letter-spacing:.06em;text-transform:uppercase}
.fact-lock a:hover{border-color:var(--cobalt);color:var(--cobalt)}
.fact-lock .v{font:inherit;text-transform:none;display:grid;gap:8px;justify-items:start}
.fact-lock .lock-note{font:500 .95rem/1.4 var(--f-d);color:var(--ink)}
.fact-lock .lock-fine{font:500 .8rem/1.4 var(--f-d);color:var(--ink2)}

/* ---------- body ---------- */
.jobgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start}
.jobgrid>aside{position:sticky;top:86px;display:grid;gap:18px}
.stack{margin-top:40px}
.jobgrid h2{font-size:2rem;margin:0 0 14px}
ul.skills{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 6px;padding:0}
ul.skills li{display:inline-flex;align-items:center;min-height:38px;padding:6px 14px;border:1.5px solid var(--ink);background:var(--base);font:600 .78rem var(--f-m);letter-spacing:.06em;text-transform:uppercase}
.skills h2+ul+h2,.skills>h2:not(:first-child){margin-top:26px}
.excerpt{font-size:1.05rem;line-height:1.75;border-left:4px solid var(--cobalt);padding-left:20px;margin:0 0 1.1em;overflow-wrap:anywhere}
.apply-box{margin:34px 0 0;padding:22px 24px;background:var(--base);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.apply-box .mono{color:var(--ink2)}
.apply-box>.fine{margin:6px 0 0;font-size:.9rem;color:var(--ink2)}
.apply-box .apply{margin:14px 0 0}
.muted-note{font-size:.9rem;color:var(--ink2);margin:0}
.excerpt-block{max-width:none}
.fine-print{margin:14px 0 0;font:500 .72rem/1.5 var(--f-m);letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.fine-print+.fine{margin:6px 0 0;font-size:.85rem;color:var(--ink2)}

/* ---------- the side column: two controls ---------- */
.side-actions{display:grid;gap:12px;background:var(--lav);border:2px solid var(--ink);padding:22px;box-shadow:6px 6px 0 var(--ink)}
.side-actions .btn{justify-content:center;text-align:center;min-height:48px}
.side-actions .btn.ghost{background:var(--base);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* ---------- Save it. Get alerted. ---------- */
.savecard{background:var(--base);border:1.5px solid var(--ink);padding:18px 20px}
.savecard b{font:800 1.2rem var(--f-d);font-stretch:70%;text-transform:uppercase}
.savecard p{margin:6px 0 0;font-size:.9rem;color:var(--ink2)}
.savecard .sc-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.savecard .btn{min-height:44px}

/* ---------- "Email me jobs like this" (routers/job_alerts.py box_html, and the states site-pages.js swaps in) ---------- */
.alert-box{margin-top:28px;background:var(--base);border:1.5px solid var(--ink);padding:22px 22px 18px;position:relative;box-shadow:6px 6px 0 var(--ink)}
.alert-box h3{font-size:1.5rem;margin:0}
.alert-box .what{margin:8px 0 0;font-size:.95rem}
.alert-box form{margin:0}
.alert-box .row{display:flex;gap:10px;flex-wrap:wrap;padding:0;border:0;background:none;grid-template-columns:none}
.alert-box .row:hover{background:none}
.alert-box input[type=email]{flex:1 1 220px;min-width:0;font:500 16px var(--f-d);padding:12px 14px;border:1.5px solid var(--ink);background:var(--canvas);color:var(--ink);min-height:48px}
.alert-box input[type=email]:focus-visible{outline:2px solid var(--cobalt);outline-offset:1px}
.alert-box .btn{white-space:nowrap;min-height:48px}
.alert-box .afine{margin:10px 0 0;font-size:.8rem;line-height:1.5;color:var(--ink2)}
.alert-box .afine a,.alert-box .again a{color:var(--cobalt);font-weight:600}
.alert-box .aerr{margin:10px 0 0;font-size:.88rem;color:var(--coral);font-weight:600}
.alert-box .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert-box .again{margin:10px 0 0;font-size:.86rem}
.alert-box.sent{border-left:6px solid var(--cobalt)}
.alert-box.err{border-left:6px solid var(--coral)}

/* ---------- the Android bar (interface/app_bar.py): rendered for an Android browser only ---------- */
.sr-apk{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:12px;background:var(--lav);border:1.5px solid var(--ink);
  transition:opacity .25s,transform .25s,max-height .25s,margin .25s,padding .25s;max-height:140px;overflow:hidden}
.sr-apk[hidden]{display:none}
.sr-apk img{flex:none}
.sr-apk p{flex:1;margin:0;font-size:.82rem;line-height:1.35;color:var(--ink2)}
.sr-apk p b{display:block;font-size:.95rem;color:var(--ink)}
.sr-apk .btn{flex:none;padding:0 16px;min-height:44px;white-space:nowrap}
.sr-apk .btn::after{content:none}
.sr-apk p{min-width:0}
.sr-apk-x{flex:none;width:44px;height:44px;border:0;background:none;color:var(--ink2);font-size:1.4rem;line-height:1;cursor:pointer}
.sr-apk-x:hover{color:var(--ink)}
.sr-apk.gone{opacity:0;transform:translateY(-6px);max-height:0;margin:0;padding:0;border-width:0}

/* ---------- the phone's sticky Apply bar ---------- */
.apply-bar{display:none}

/* ---------- the closed state ---------- */
.closedban{background:#111827;color:#F3F0E7;border:2px solid #111827;box-shadow:8px 8px 0 var(--coral);padding:24px 28px;margin:6px 0 30px}
.closedban .mono{color:var(--coral);margin:0}
.closedban h2{font-size:clamp(2.2rem,4vw,2.8rem);color:var(--lime);margin:8px 0 10px}
.closedban p{max-width:44em;opacity:.92}
.closedban p.closed-on{opacity:1;margin:0}
.closedban .apply-now{margin-top:18px}
.closedban .btn.ghost{color:#F3F0E7;box-shadow:inset 0 0 0 1.5px #F3F0E7;background:none}
.closedban .btn.lime{background:var(--lime);color:#111827}
[data-page="job-closed"] .ticket{margin-top:0}
[data-page="job-closed"] .job-h1{text-decoration:line-through;text-decoration-thickness:4px;text-decoration-color:var(--coral)}
[data-page="job-closed"] .ticket .r{background:var(--sand);color:var(--ink)}

@media(max-width:1000px){
  .ticket{grid-template-columns:minmax(0,1fr)}
  .ticket .r{border-left:0;border-top:3px dashed var(--ink)}
  .ticket .r b{font-size:2rem}
  .ticket:has(.r):before,.ticket:has(.r):after{display:none}
  .jobgrid{grid-template-columns:minmax(0,1fr);gap:30px}
  .jobgrid>aside{position:static}
}
@media(max-width:760px){
  .jobbody{padding-bottom:0}
  .apply-bar{display:block;position:sticky;bottom:0;z-index:5;background:var(--canvas);border-top:2px solid var(--ink);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .apply-bar .btn{width:100%;justify-content:center;text-align:center;min-height:52px}
  .apply-bar .apply-multi{display:flex;flex-wrap:nowrap;gap:8px;width:100%}
  .apply-bar .apply-multi .btn{flex:1;font-size:.85rem;padding-left:8px;padding-right:8px}
}
@media(max-width:700px){
  .ticket{box-shadow:6px 6px 0 var(--ink);margin-bottom:32px}
  .ticket .l{padding:22px 20px}
  .head-mark{gap:14px}
  [data-page="job"] .apply-now,[data-page="job-closed"] .apply-now{flex-direction:column;align-items:stretch}
  .apply-now .btn,.apply-multi .btn{justify-content:center;text-align:center;min-height:52px}
  .apply-multi{display:grid;gap:10px}
  .apply-box .apply .btn{width:100%;justify-content:center;min-height:52px}
  .facts{grid-template-columns:1fr 1fr}
  .fact{padding:14px}
  .fact .v{font-size:1.3rem}
  .closedban{padding:18px}
  [data-page="job-closed"] .closedban .apply-now{flex-direction:column;align-items:stretch}
  .closedban .apply-now .btn{justify-content:center}
  .alert-box .btn{flex:1 1 100%;justify-content:center}
}

/* ---------- similar jobs (the open page) and the watch box (the closed page) ---------- */
.similar{margin-top:46px}
.similar h2{margin:0 0 12px;font:500 .78rem/1.4 var(--f-m);letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.similar .row{grid-template-columns:44px minmax(0,1fr) auto;gap:4px 12px;align-items:center;min-height:56px}
.similar .row>:nth-child(n+3){display:block}
.similar .row .lg{width:44px;height:44px;font-size:1rem}
.similar .row b{overflow-wrap:anywhere}
.watch{margin:0 0 30px;max-width:44em}
@media(max-width:700px){.similar .row{padding:12px 14px}}

/* Check your fit: a few pasted CV lines against the skills the advert names (job-fit.js) */
.fitbox{display:grid;gap:10px;background:var(--base);border:2px solid var(--ink);padding:20px 22px;margin-bottom:22px;box-shadow:6px 6px 0 var(--ink)}
.fitbox b{font:800 1.4rem/1 var(--f-d);font-stretch:62%;text-transform:uppercase}
.fitbox .fit-sub{margin:0;color:var(--ink2);font-size:.92rem}
.fitbox label{font:600 .72rem var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.fitbox textarea{width:100%;min-height:96px;max-width:100%;box-sizing:border-box;resize:vertical;font:inherit;padding:10px 12px;border:2px solid var(--ink);background:var(--canvas);color:var(--ink);overflow-wrap:anywhere}
.fitbox .btn{justify-content:center;min-height:48px}
.fitbox .fit-fine{margin:0;font-size:.82rem;color:var(--ink2)}
.fitbox .fit-out{border-top:1.5px solid var(--rule);padding-top:12px;overflow-wrap:anywhere}
.fitbox .fit-out[data-bad="1"]{color:#8a1c1c;font-weight:600}
.fitbox .fit-head{margin:0 0 6px;font-weight:700}.fitbox .fit-line{margin:6px 0}
.fitbox .fit-have{color:var(--ink)}.fitbox .fit-gap{color:var(--ink2)}
.fitbox .fit-more{display:inline-block;margin-top:8px;font-weight:600;color:var(--cobalt)}