/* Web build slice 3 (docs/WEB_BUILD_PLAN.md): the pages a visitor reaches from an email or an employer link, on the Daylight shell.
   The employer page and its A to Z index, the alert receipts, and the sign-in card. Loaded after daylight.css and jobs-dl.css by
   `daylight.flow_css()`; it carries its own rules so these pages do not lean on another page group's sheet. */

/* ---------- breadcrumbs, shared ---------- */
.emp-hero .crumbs,.rcpt-stage .crumbs{display:block;line-height:1.9;margin-bottom:14px}
.emp-hero .crumbs a,.rcpt-stage .crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;color:var(--ink2)}

/* ---------- employer page ---------- */
.emp-hero{padding-bottom:36px}
.emp{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:center}
.emp>div{min-width:0}
.emp .head-mark{display:block;margin-bottom:18px}
.emp .head-mark .mark{--ms:96px;border:2px solid var(--ink);margin-bottom:18px;display:block}
.emp .live{margin-bottom:12px}
.emp .live::before{content:"";display:inline-block;width:9px;height:9px;background:var(--coral);border-radius:50%;margin-right:8px}
.emp h1{font:900 clamp(2.6rem,6vw,5rem)/.95 var(--f-d);font-stretch:62%;text-transform:uppercase;overflow-wrap:anywhere}
.emp .sub{margin-top:18px;font-size:1.1rem;max-width:34em}
.emp-indep{margin-top:10px;color:var(--ink2);font-size:.95rem;max-width:40em}
.pay-note{margin-top:10px;color:var(--ink2);font-size:.9rem}
.regcard{background:var(--base);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:24px 26px;transform:rotate(1.5deg)}
.regcard .stats{display:grid;gap:18px}
.regcard .stat{border-bottom:1.5px dashed var(--soft);padding-bottom:16px}.regcard .stat:last-child{border:0;padding-bottom:0}
.regcard .stat .n{font:800 2.4rem/1 var(--f-d);font-stretch:62%;text-transform:uppercase;overflow-wrap:anywhere}
.regcard .stat .l{margin-top:6px;font:500 .72rem/1.4 var(--f-m);letter-spacing:.07em;text-transform:uppercase;color:var(--ink2)}
.side-card.emp-reg{margin-top:22px;max-width:40em;background:var(--base);border:1.5px solid var(--ink);padding:16px 18px}
.side-card.emp-reg h3{font-size:1.05rem}
.side-card.emp-reg .tick{display:inline-grid;place-items:center;width:22px;height:22px;background:var(--lime);color:#111827;margin-right:8px;font-weight:800}
.side-card .small{margin-top:8px;font-size:.85rem;color:var(--ink2)}
.side-card a{color:var(--cobalt)}

.latest h2,.emp-two h2{font-size:clamp(1.8rem,3.6vw,3rem);overflow-wrap:anywhere}
.latest .lede,.emp-two .lede{color:var(--ink2);margin-top:12px;font-size:1.02rem;max-width:40em}
.latest ul{list-style:none;margin-top:24px;border:1.5px solid var(--rule);background:var(--base);padding:0}
.latest li{border-bottom:1px solid var(--soft)}.latest li:last-child{border-bottom:0}
a.job{display:grid;grid-template-columns:1fr auto;gap:2px 20px;align-items:center;padding:18px 22px;text-decoration:none;color:var(--ink);min-height:44px}
a.job:hover{background:var(--lav)}
a.job .jt{grid-column:1;font-weight:700;font-size:1.05rem;overflow-wrap:break-word;hyphens:auto}
a.job .jm{grid-column:1;color:var(--ink2);font-size:.88rem}
a.job .jc{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
a.job .jc .chip{min-height:0;padding:3px 8px;border:1.5px solid var(--ink);font:600 .68rem var(--f-m);background:var(--base);color:var(--ink)}
a.job .jc .chip.pay{background:var(--lime);color:#111827}
a.job .when{font:500 .72rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.mark{position:relative;flex:none;width:var(--ms,44px);height:var(--ms,44px);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;opacity:0}
.mark .mk-img.ok{opacity:1}
a.job.has-mark{grid-template-columns:auto 1fr auto;column-gap:14px}
a.job.has-mark .mark{grid-column:1;grid-row:1/span 2;align-self:center}
a.job.has-mark .jt,a.job.has-mark .jm{grid-column:2}
a.job.has-mark .jc{grid-column:3}
.latest .more{padding:16px 0;font:500 .78rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}

.emp-two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.emp-two>div{min-width:0}
.tally{list-style:none;margin-top:20px;padding:0;border:1.5px solid var(--rule);background:var(--base)}
.tally li{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--soft)}
.tally li:last-child{border:0}.tally .c{font:700 .9rem var(--f-m)}.tally .rest{color:var(--ink2)}

.related{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.related>div{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.related h3{flex:1 0 100%;font:500 .72rem/1.4 var(--f-m);letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.related a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1.5px solid var(--ink);background:var(--base);color:var(--ink);text-decoration:none}
.related a:hover{background:var(--lime);color:#111827}
.fine-print{margin:24px 0 0;font:500 .72rem/1.5 var(--f-m);letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);max-width:70em}

/* the A to Z index of a market's employers */
.role-group{display:grid;grid-template-columns:120px 1fr;gap:10px 28px;padding:18px 0;border-bottom:1px solid var(--soft)}
.role-group h2{font-size:2.2rem;line-height:1}
.city-links{display:flex;flex-wrap:wrap;gap:8px 10px}
.city-links a{display:inline-flex;gap:8px;align-items:center;min-height:44px;padding:6px 12px;border:1.5px solid var(--ink);background:var(--base);color:var(--ink);text-decoration:none}
.city-links a:hover{background:var(--lime);color:#111827}.city-links span{font:600 .72rem var(--f-m);color:var(--ink2)}

/* "Email me jobs like this" box (employer pages carry it; job pages bring their own sheet) */
.alert-box{margin-top:12px;background:var(--base);border:1.5px solid var(--ink);padding:22px 22px 18px;box-shadow:6px 6px 0 var(--ink);position:relative}
.alert-box h3{font-size:1.4rem}
.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 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 .btn{white-space:nowrap;min-height:48px}
.alert-box .afine{margin-top:10px;font-size:.8rem;color:var(--ink2)}
.alert-box .afine a,.alert-box .again a{color:var(--cobalt);font-weight:600}
.alert-box .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert-box .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.alert-box.sent{border-left:6px solid var(--lime)}.alert-box.err{border-left:6px solid var(--coral)}
.alert-box .again{margin-top:10px;font-size:.86rem}

/* ---------- the alert receipts ---------- */
.rcpt-stage{background:var(--lime);color:#111827;padding:48px 0 80px;border-bottom:1.5px solid var(--rule)}
.rc-wrap{max-width:560px;margin:0 auto;filter:drop-shadow(8px 8px 0 #111827)}
.rc{background:#FFFDF6;color:#111827;font:500 .95rem/1.55 var(--f-m);padding:30px 28px 52px;position:relative;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/20px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/20px 100%;
  animation:rc-print .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes rc-print{from{transform:translateY(-30px);opacity:0;clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.rc .rc-hd{text-align:center;border-bottom:2px dashed #111827;padding-bottom:14px;margin-bottom:18px;color:#111827}
.rc .crumbs{display:none}
.rc h1{font:900 clamp(2rem,6vw,3rem)/.98 var(--f-d);font-stretch:62%;text-transform:uppercase;margin:0}
.rc .sub{font-family:var(--f-m);font-size:.9rem;margin-top:12px;color:#111827}
.rc .stampy{position:absolute;right:14px;top:16px;border:4px solid #111827;padding:2px 10px;font:900 1.3rem var(--f-d);font-stretch:62%;text-transform:uppercase;transform:rotate(11deg);background:var(--lime);animation:rc-thud .5s .9s cubic-bezier(.3,1.6,.5,1) both}
.rc .stampy.off{background:var(--sand)}
@keyframes rc-thud{from{transform:rotate(11deg) scale(2.4);opacity:0}}
.rc .kv{margin-top:18px;border-top:2px dashed #111827;padding-top:12px}
.rc .kv>div{display:flex;justify-content:space-between;gap:14px;padding:6px 0}
.rc .kv dt{text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;padding-top:3px;flex:none}
.rc .kv dd{margin:0;text-align:right;font-weight:600;overflow-wrap:anywhere}
.rc a{color:#111827;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:10px 2px}
.rc ul{list-style:none;padding:0}
.rc .btn{background:var(--lime);color:#111827;border:2px solid #111827;text-decoration:none;min-height:48px}
@media(prefers-reduced-motion:reduce){.rc,.rc .stampy{animation:none}}

/* ---------- sign in ---------- */
.door-stage{background:var(--lav);color:#111827;padding:48px 0 72px;border-bottom:1.5px solid var(--rule)}
.door-stage .split{display:grid;grid-template-columns:6fr 5fr;gap:56px;align-items:center}
.door-big{font:900 clamp(3rem,8vw,6rem)/.95 var(--f-d);font-stretch:62%;text-transform:uppercase;margin:12px 0 22px}
.door-big span{background:#111827;color:var(--lav);padding:0 .08em}
.bubble{background:var(--lav);color:#111827;padding:16px 20px;border:1.5px solid #111827;font-weight:600;max-width:340px;box-shadow:5px 5px 0 #111827}
.door-stage .door{background:var(--base);color:var(--ink);border:1.5px solid var(--ink);box-shadow:10px 10px 0 #111827;padding:34px;max-width:560px}
.door-stage .door-stage-only{display:none}
.door.me-page>*{max-width:none}
.door.me-page h1{font:900 clamp(2.2rem,5vw,3rem)/1 var(--f-d);font-stretch:62%;text-transform:uppercase}
.door.me-page h1.state{font-size:clamp(1.8rem,4vw,2.4rem)}
.door.me-page p{margin-top:14px}
.door.me-page .me-form{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.door.me-page input[type=email]{font:500 16px var(--f-d);padding:14px;border:1.5px solid var(--ink);background:var(--canvas);color:var(--ink);min-height:48px;border-radius:0}
.door.me-page .btn{justify-content:center;min-height:48px;background:var(--lav);color:#111827}
.door.me-page .state-box{border:1.5px solid var(--ink);border-radius:0;background:var(--canvas);padding:18px 20px}
.door.me-page .state-email{border-radius:0;border:1.5px solid var(--soft);font-family:var(--f-m);overflow-wrap:anywhere}
.door.me-page .afine,.door.me-page .aerr{font-size:.85rem}
.door.me-page .aerr{color:#B42318;font-weight:600}
.door.me-page a{color:var(--cobalt)}

@media(max-width:1000px){
  .emp,.emp-two,.related,.door-stage .split{grid-template-columns:1fr;gap:26px}
  .regcard{transform:none}
  .role-group{grid-template-columns:1fr}
}
@media(max-width:700px){
  .emp .head-mark .mark{--ms:72px}
  .regcard{padding:20px 18px}
  .rc{padding:24px 18px 44px}.rc .stampy{right:8px;font-size:1.1rem}
  .door-stage .door{padding:24px 20px}
  a.job{padding:16px}
}

/* ---------- the employer page: claim band and the claimed mark ---------- */
.cband{background:var(--lime);color:#111827;border-top:1.5px solid var(--rule);border-bottom:1.5px solid var(--rule);padding:28px 0}
.cband-in{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.cband h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-top:6px}.cband p{margin-top:6px;max-width:44em}
.cband .mono{color:#111827}.cband-btns{display:grid;gap:10px}
.cband .btn.ghost{color:#111827;box-shadow:inset 0 0 0 1.5px #111827;background:transparent}
.claimed{margin-top:18px;max-width:40em}
.claimstamp{display:inline-block;font:800 .95rem var(--f-d);font-stretch:66%;text-transform:uppercase;border:3px solid var(--cobalt);color:var(--cobalt);padding:3px 10px;transform:rotate(-3deg)}
.claimed-desc{margin-top:12px;font-size:1.05rem}
.claimed-links{margin-top:8px;display:flex;flex-wrap:wrap;gap:10px 18px}.claimed-links a{color:var(--cobalt);font-weight:600;overflow-wrap:anywhere}
@media(max-width:1000px){.cband-in{grid-template-columns:1fr}.cband .btn{justify-content:center}}

/* the sign-in page needs no "Sign in" link in the header on a phone: it is the page, and the header row would run past the screen */
@media(max-width:480px){[data-page="web-me"] .nav .me .me-in{display:none}}
/* release 3 (mobile audit E): on a phone the pay chip sits under the title, so the title keeps the whole row */
@media(max-width:560px){a.job{grid-template-columns:1fr}a.job .jc{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap;align-items:center;margin-top:6px}}