/* Hiring forms: the one-question-at-a-time public form (/c/<username>) and the dashboard builder. */
.cformpage{position:relative;min-height:calc(100dvh - 60px)}
.tf{position:relative;min-height:calc(100dvh - 60px);display:flex;flex-direction:column}
.tf::before{content:"";position:absolute;inset:0 0 auto;height:420px;pointer-events:none;
  background:linear-gradient(180deg,#F2F4F7,transparent);opacity:.7}
.tf-bar{position:sticky;top:60px;height:4px;background:var(--sunk);z-index:2}
.tf-bar i{display:block;height:100%;background:var(--accent);border-radius:0 4px 4px 0;transition:width .45s var(--ease,ease)}
.tf-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:48px max(16px,env(safe-area-inset-left,0px)) 96px}
.tf-step{width:min(680px,100%);display:flex;flex-direction:column;gap:22px;animation:tfUp .45s var(--ease,ease) both}
.tf-step.back{animation-name:tfDown}
@keyframes tfUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes tfDown{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.tf-step{animation:none}.tf-bar i{transition:none}}
.tf-step .skl{display:block;height:16px;border-radius:6px;background:var(--sunk)}

.tf-intro{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.tf-intro h1{font-size:clamp(34px,6vw,54px);letter-spacing:-.02em}
.tf-intro .prose{font-size:18px;color:var(--muted);white-space:pre-line;max-width:56ch}
.tf-mark{width:56px;height:56px;font-size:21px;border-radius:14px}
.tf-meta{font-size:13px}
.tf-pf{width:100%;max-width:560px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.tf-pf-h{display:flex;align-items:center;gap:12px}
.tf-pf-h>div{display:flex;flex-direction:column;min-width:0}
.tf-pf-h span{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-pf dl{display:flex;flex-direction:column;margin:0;border-top:1px solid var(--line)}
.tf-pf dl>div{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.tf-pf dt{color:var(--muted)}
.tf-pf dd{margin:0;overflow-wrap:anywhere}
.tf-pf .linkbtn{font-size:13px}
.tf-pf-note{font-size:13px}
@media (max-width:560px){.tf-pf dl>div{grid-template-columns:minmax(0,1fr) auto}.tf-pf dt{grid-column:1/-1}}

.tf-q{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline}
.tf-n{color:var(--accent);font-size:15px;display:inline-flex;gap:4px;align-items:baseline}
.tf-q h2{font-size:clamp(22px,3.6vw,30px);font-weight:600;letter-spacing:-.01em;line-height:1.2}
.tf-help{grid-column:2;font-size:15px}
.tf-a{padding-left:clamp(0px,4vw,38px);display:flex;flex-direction:column;gap:12px}
.tf-ok{display:flex;align-items:center;gap:14px;padding-left:clamp(0px,4vw,38px);flex-wrap:wrap}
.tf-intro .tf-ok{padding-left:0;margin-top:8px}
.tf-hint{font-size:13px}
.tf-hint b{font-weight:600;color:var(--ink)}

.tf .tf-in{border:0;border-bottom:2px solid var(--line);border-radius:0;background:transparent;padding:10px 2px;font-size:clamp(20px,3vw,26px);box-shadow:none}
.tf .tf-in:focus{border-bottom-color:var(--accent);box-shadow:none}
.tf textarea.tf-in{min-height:0;resize:none;field-sizing:content;max-height:40vh}
.tf .tf-in::placeholder{color:var(--muted);opacity:.6}
.tf-err{color:var(--danger);font-weight:600;font-size:14px;padding-left:clamp(0px,4vw,38px);margin-top:-8px}
.tf-err.shake{animation:tfShake .35s}
@keyframes tfShake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.tf-opts{display:flex;flex-direction:column;gap:8px;max-width:440px}
.tf-opt{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:17px;transition:border-color .15s,background .15s,transform .15s}
.tf-opt:hover{border-color:var(--muted)}
.tf-opt:active{transform:scale(.99)}
.tf-opt kbd{font-family:var(--f-mono);font-size:12px;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;border:1px solid var(--line);color:var(--muted);flex:none}
.tf-opt[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.tf-opt[aria-pressed=true] kbd{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tf-other{margin-top:4px}

.tf-pick{display:flex;flex-direction:column;gap:10px;max-width:520px}
.tf-chips{display:flex;flex-wrap:wrap;gap:6px}
.tf-chips:empty{display:none}
.tf-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 6px 5px 12px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;font-size:14px;animation:tfPop .2s var(--ease,ease) both}
.tf-chip button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:16px;line-height:1;width:22px;height:22px;border-radius:50%;opacity:.7}
.tf-chip button:hover{opacity:1;background:rgba(127,127,127,.25)}
@keyframes tfPop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.tf-sug{display:flex;flex-wrap:wrap;gap:6px}
.tf-sugi{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:14px}
.tf-sugi:hover,.tf-sugi.on{border-color:var(--accent);background:var(--accent-soft)}
.tf-sugi.add{border-style:dashed;font-weight:600}
.tf-none{font-size:14px}

.tf-links{display:flex;flex-direction:column;gap:6px;max-width:560px}
.tf-a>.btn{align-self:flex-start}
.tf-contact{display:flex;flex-direction:column;gap:6px;max-width:520px}
.tf-crow{display:grid;grid-template-columns:110px 1fr;align-items:end;gap:12px}
.tf-crow span{font-size:14px;font-weight:600;color:var(--muted);padding-bottom:12px}
.tf .tf-crow .tf-in{font-size:20px}

.tf-arrows{display:flex;gap:8px;margin-bottom:-6px;min-height:40px}
.tf-arrows .btn{width:46px;height:40px;padding:0;border-radius:12px;color:var(--muted)}
.tf-arrows .btn:hover{color:var(--ink)}
.tf-arrows svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tf-made{position:fixed;left:max(20px,env(safe-area-inset-left,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);z-index:5}
.tf-made .rec{transform:scale(.75);margin:-2px}

.tf-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.tf-uname{display:flex;align-items:baseline;gap:4px;max-width:520px;border-bottom:2px solid var(--line)}
.tf-uname:focus-within{border-bottom-color:var(--accent)}
.tf .tf-uname .tf-in{border:0;flex:1;min-width:0}
.tf-uname .mono{font-size:15px;white-space:nowrap}
.tf-tick.mail{background:var(--accent-soft);color:var(--accent)}
.tf-tick.mail svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tf-done h1{font-size:clamp(28px,4.6vw,40px)}
.tf-tick{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:32px;background:var(--a1-soft);color:var(--a1);animation:tfPop .5s var(--ease,ease) both}
.tf-nudge{width:min(520px,100%);text-align:left;display:flex;flex-direction:column;gap:12px;margin-top:10px;border-top:3px solid var(--accent)}
.tf-nudge h3{font-size:22px}
.tf-nudge ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
@media (max-width:560px){
  .tf-stage{align-items:flex-start;padding-top:36px}
  .tf-q{grid-template-columns:1fr}.tf-help{grid-column:1}
  .tf-crow{grid-template-columns:1fr;gap:0}.tf-crow span{padding-bottom:0}
  .tf-made{display:none}
}

/* builder */
.fb{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.fb-side{grid-column:2;grid-row:1;position:sticky;top:80px}
.fb-main{grid-column:1;grid-row:1}
.fb .cardlink{max-width:none}
.fq{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.fq-head{display:flex;align-items:center;gap:10px}
.fq-tools{margin-left:auto;display:flex;gap:2px;align-items:center}
.fq-tools .btn{padding:4px 9px}
.fq-tools .x{border:0;background:transparent;cursor:pointer;font-size:20px;color:var(--muted);width:32px;height:32px;border-radius:6px}
.fq-tools .x:hover{background:var(--sunk);color:var(--ink)}
.fq-grid{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:10px}
.fq-flags,.fq-ch{gap:8px 18px}
.fq-flags:empty{display:none}
.fq-must{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.fq-fixed{gap:8px}
.fq-fixed .fq-q,.fq-grid .fq-q{font-weight:600;padding:2px 0}
.fq-grid .fq-q{align-self:center}
@media (max-width:560px){.fq-head{flex-wrap:wrap}}
.fq-opts{display:flex;flex-wrap:wrap;gap:6px;min-height:34px;align-items:center}
.fq-addopt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:4px}
@media (max-width:900px){.fb{grid-template-columns:1fr}.fb-side{grid-column:1;position:static}.fb-main{grid-row:2}}
@media (max-width:560px){.fq-grid{grid-template-columns:1fr}}

/* Applicants as cards (public/applicants.js) */
.apcard{position:relative;cursor:default;transition:opacity .35s,filter .35s}
.apcard .eav{cursor:default}
.apcard .ename a{color:inherit;text-decoration:none}
.apcard .ename a:hover h3{text-decoration:underline;text-underline-offset:3px}
.apno{width:34px;padding:0;justify-content:center;font-size:15px;color:var(--muted)}
.apno:hover{color:var(--danger);border-color:var(--danger)}
.apmeta{padding:10px 16px 0;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apqa{margin:10px 16px 16px;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.apqa summary{cursor:pointer;font-size:13px;font-weight:600}
.apqa .qa{margin-top:10px}
.apcard>.apmeta:last-child{padding-bottom:16px}
.apx{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.apx path{fill:none;stroke:var(--danger);stroke-width:.7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.apcard.crossing .apx path,.apcard.out .apx path{opacity:.85;stroke-dashoffset:0}
.apcard.crossing .apx path{transition:stroke-dashoffset .35s cubic-bezier(.6,0,.3,1),opacity .1s}
.apcard.crossing .apx path+path{transition-delay:.2s}
.apcard.out{opacity:.55;filter:grayscale(.7)}
.apcard.out .apx path{opacity:.6}
.apcard.out .apno{color:var(--ink)}
@media (prefers-reduced-motion: reduce){.apcard.crossing .apx path{transition:none}}

/* Applicants tab: forms and job posts as job-board cards; inside one, what you posted on the left, applicants on the right. */
.aprow{font:inherit;color:inherit}
.aprow .side .pay{white-space:nowrap}
button.back{background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.jobgrid.apdetail{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.apdetail .egrid.apgrid{grid-template-columns:1fr}
.apside-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.apside-h h3{font-size:17px}
.apside-h .muted{font-size:13px}
.apqs{margin:8px 0 0;padding-left:20px;display:grid;gap:6px;font-size:14.5px}
@media (min-width:1300px){.apdetail .egrid.apgrid{grid-template-columns:repeat(auto-fill,minmax(440px,1fr))}}
@media (max-width:900px){.jobgrid.apdetail{grid-template-columns:1fr}}
/* Applicants paging: search, show and sort above, page buttons and per page below. */
.aptools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.aptools>*{flex:1 1 130px;min-width:0}
.aptools .grow{flex:2 1 220px}
.appager{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px;font-size:13px}
.apnums{gap:4px}
.apnums .btn.on{background:var(--ink);color:var(--bg);border-color:transparent}
.apnums .btn[disabled]{opacity:.4;cursor:default}
.apper{display:flex;align-items:center;gap:8px}
.apper select{width:auto}
/* Job page side card: a peek at the newest applicants for the job's owner. */
.peek-h{display:flex;flex-direction:column;gap:4px}
.peek-h .muted{font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.peek{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);overflow:hidden}
.peek-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
.peek-row+.peek-row{border-top:1px solid var(--line)}
.peek-row:hover{background:var(--surface)}
.peek-row .mark{border-radius:50%}
.peek-id{min-width:0;flex:1;display:flex;flex-direction:column}
.peek-id b{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peek-id .muted{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peek-when{flex:none;font-size:12px}
.peek-empty{border:1px dashed var(--line);border-radius:var(--r);padding:16px;text-align:center;font-size:14px}
.apfaces{display:flex}
.apfaces .mark{border-radius:50%;border:2px solid var(--surface);margin-left:-8px;width:28px;height:28px;font-size:11px}
.apfaces .mark:first-child{margin-left:0}
/* Hiring form tab: switch between its applicants and the builder. */
.fvseg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--surface);margin-bottom:20px}
.fvseg button{border:0;background:none;padding:7px 14px;border-radius:999px;font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.fvseg button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.fvseg .mono{font-size:12px;opacity:.75}

/* Claimable forms (forms.js): the "claim it" card on a form nobody has claimed yet, and the done modal. */
.tf .mark.avimg.tf-mark{object-fit:cover}
.claimcard{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));width:330px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 2px 6px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.1);padding:18px;z-index:40;animation:ccIn .5s var(--ease,ease) both}
@keyframes ccIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.claimcard .close{top:10px;right:10px;width:30px;height:30px;font-size:16px}
.claimcard .mark{width:44px;height:44px;border-radius:12px;font-size:17px;flex:none;object-fit:cover}
.cc-who{display:flex;gap:12px;align-items:flex-start;padding-right:24px}
.cc-who h3{font-size:17px;margin:0 0 4px}
.cc-who p{font-size:14px;line-height:1.45;margin:0}
.cc-perks{list-style:none;margin:14px 0;padding:0;display:grid;gap:6px;font-size:13.5px}
.cc-perks li{position:relative;padding-left:20px;overflow-wrap:anywhere}
.cc-perks li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.claimcard>.btn{width:100%}
.claim-min{padding:0;width:auto;border-radius:999px}
.claim-min button{display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;background:none;border:0;font:inherit;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer}
.claim-min .mark{width:32px;height:32px;border-radius:999px;font-size:13px}
.claim-ok{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0}
.claim-ok .muted{max-width:42ch}
.claim-link{padding:10px 14px;border-radius:10px;background:var(--sunk);font-size:14px;margin:4px 0 8px;overflow-wrap:anywhere}
@media (max-width:560px){
  .claimcard{left:12px;right:12px;width:auto;max-width:none;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:14px}
  .claimcard .cc-perks{display:none}
  .claimcard .cc-who{margin-bottom:12px}
  .claim-min{left:auto}
  body.has-claim .tf-stage{padding-bottom:200px}
}
@media (prefers-reduced-motion:reduce){.claimcard{animation:none}}
/* Unclaimed hiring forms (X outreach): their X post, and the way in for editors who land on the preview. */
.tf-xcta{max-width:460px;width:100%;text-align:left;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.tf-xcta h3{font-size:17px}
.tf-xcta p{font-size:14px;margin:0 0 4px}
.tf-xcta .btn svg{width:16px;height:16px;margin-right:8px;fill:currentColor}
.tf-asapp{font-size:14px;margin-top:18px}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* The same forms on the job board: Apply opens the form, their X post sits under it. */

/* Import from X on the intro of a hiring form or job application (signed-out applicants). */
.tf-ximp-btn{display:inline-flex;align-items:center;gap:8px}
.tf-ximp{width:min(460px,100%);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px 16px;margin-top:6px}
.tf-ximp-box{display:flex;flex-direction:column;gap:8px}
.tf-ximp-h{display:flex;align-items:center;gap:8px;font-size:15px}
.tf-ximp-box>p.muted{font-size:14px}
.tf-ximp-row{display:flex;gap:10px;align-items:center}
.tf .tf-ximp .tf-in{flex:1;min-width:0;font-size:17px;padding:8px 2px}
.tf-ximp .tf-err{padding-left:0;margin-top:0}
.tf-ximp-done{display:flex;align-items:center;gap:12px}
.tf-ximp-done>div{flex:1;display:flex;flex-direction:column;gap:2px;font-size:14px;min-width:0}
.tf-ximp-done img,.tf-ximp-x{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover}
.tf-ximp-x{display:grid;place-items:center;background:var(--sunk)}
.tf-ximp-done .linkbtn{font-size:13px;flex:none}
@media (max-width:420px){.tf-ximp-row{flex-direction:column;align-items:stretch}}
.jobside .tf-xcta{margin-top:12px;max-width:none}

/* Premium editors are priority applicants: listed first, with a gold ring. */
.apcard.pri{box-shadow:0 0 0 1.5px var(--gold),var(--shadow)}