/* boldthin.gs/work-with-us (WORK-WITH-US-PHASE1-2026-10-26, healer:21f6817a). Extras on top of affiliates.css (same tokens, faces,
   light/dark and chrome): the roles board, a role's ad, the application form. Every state of the form (word counters, the chosen file,
   errors, the senior-only question, the sent state) has its space reserved, so nothing moves when it changes (CLS 0). */

/* wider reading column: contents rail + column, the form lives in the column (it is too long for a sticky side card) */
.wwu-doc{grid-template-columns:190px minmax(0,1fr)}
@media(max-width:1100px){.wwu-doc{grid-template-columns:minmax(0,1fr)}}
.wwu-h1{font-size:clamp(2.6rem,7.4vw,6.4rem)}
.wwu-role-hero{min-height:clamp(440px,66svh,680px)}
.kicker a{text-decoration:none;color:var(--grey)}.kicker a:hover{color:var(--fg)}

/* the roles board */
.wwu-roles-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.wwu-roles-list li{background:var(--bg);display:flex}
.wwu-card-role{display:flex;flex-direction:column;gap:8px;flex:1;min-height:100%;padding:24px;color:var(--fg);text-decoration:none;transition:background-color .25s ease}
.wwu-card-role:hover{background:var(--bg2)}
.wwu-card-role h3{font-size:1.375rem;line-height:1.15}
.wwu-meta{font-size:.75rem;color:var(--grey)}
.wwu-pay{font-weight:500;color:var(--sig);max-width:none}
.wwu-sum{font-size:.9375rem;color:var(--grey);max-width:none}
.wwu-more{margin-top:auto;padding-top:6px;font-size:.9375rem;font-weight:500}
@media(prefers-reduced-motion:reduce){.wwu-card-role{transition:none}}
@media(max-width:820px){.wwu-roles-list{grid-template-columns:1fr}}

/* a role's ad */
.wwu-sub{margin:28px 0 8px;font-size:1.25rem}
.wwu-list{margin:0;padding-left:1.2em;max-width:42rem;color:rgba(var(--fg-rgb),.82)}
.wwu-list li{margin:6px 0}
.col p+p{margin-top:12px}

/* the form: a full-width card in the column. Form-layout standard: one field shape, one single-line label above each field, even rhythm. */
.wwu-card{position:relative}
.wwu-role{margin:0 0 14px;font-size:.9375rem}
.wwu-role a{margin-left:8px;color:var(--grey);font-size:.8125rem}
.wwu-prompts{max-width:44rem;margin:0 0 22px;padding:16px 18px;border:1px solid var(--line);border-radius:8px;font-size:.9375rem;color:rgba(var(--fg-rgb),.82)}
.wwu-prompts p+p,.wwu-prompts ol+p{margin-top:10px}
.wwu-pk{font-size:.75rem;color:var(--grey)}
.wwu-prompts ol{margin:10px 0 0;padding-left:1.4em}
.wwu-prompts li{margin:8px 0}
.wwu-prompts .opt{color:var(--grey);font-size:.8125rem}
.wwu-form{display:grid;gap:0;max-width:44rem}
.wwu-form>*{margin-top:8px}
.wwu-form input[type=text],.wwu-form input[type=email],.wwu-form input[type=tel],.wwu-form input[type=url],.wwu-form input[type=file],.wwu-form select,.wwu-form textarea{width:100%;border:1px solid var(--line2);border-radius:8px;background:var(--bg);color:var(--fg);font:400 1rem var(--sans)}
.wwu-form input[type=text],.wwu-form input[type=email],.wwu-form input[type=tel],.wwu-form input[type=url],.wwu-form input[type=file],.wwu-form select{min-height:50px;padding:0 14px}
.wwu-form input[type=file]{padding:10px 14px;font-size:.9375rem}
.wwu-form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}
.wwu-form textarea{padding:12px 14px;min-height:9.5rem;resize:vertical;line-height:1.5}
.wwu-form [aria-invalid=true]{border-color:var(--fg)}
.wwu-form>label{margin-top:14px}
.wwu-form>label,.wwu-qh label{font-size:.75rem;line-height:1.6;font-family:var(--mono);color:var(--grey)}
.wwu-form input:disabled,.wwu-form select:disabled,.wwu-form textarea:disabled{opacity:.6}
.wwu-form .hp{display:none}
.wwu-q{display:grid;gap:8px}
.wwu-form>.wwu-q{margin-top:14px}
.wwu-qh{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.wwu-qh label{min-width:0}
.wwu-count{flex:none;font-size:.75rem;line-height:1.6;color:var(--grey)}
.wwu-count[data-over]{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
/* WORK-WITH-US-FILE-DROP-2026-10-27 (healer:208a6efc): the CV + cover letter drop zone, the Nancy Spains portal DropZone (client-portal-kit
   portal.css .pt-dz) in this page's tokens. The zone has a fixed min-height and only its colours and text change; the two slot rows and
   the swap button are always rendered, so choosing, swapping, removing and the error state never move anything (CLS 0). */
.wwu-form>.wwu-fl{margin-top:14px;font-size:.75rem;line-height:1.6;color:var(--grey)}
.wwu-dz{position:relative;display:grid;justify-items:center;align-content:center;text-align:center;gap:6px;min-height:188px;padding:28px 20px 24px;border:2px dashed var(--line2);border-radius:12px;background:var(--bg);cursor:pointer;transition:border-color .2s cubic-bezier(.22,.61,.36,1),background-color .2s cubic-bezier(.22,.61,.36,1)}
.wwu-form>.wwu-dz{margin-top:8px;font:400 1rem/1.4 var(--sans);color:var(--fg)}
.wwu-dz input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.wwu-dz-ico{color:var(--grey);transition:transform .25s cubic-bezier(.22,.61,.36,1),color .2s ease}
.wwu-dz-t{font-weight:500;font-size:1.0625rem;max-width:30ch}
.wwu-dz-h{font-size:.8125rem;color:var(--grey);max-width:34ch}
.wwu-dz:hover{border-color:var(--fg)}
.wwu-dz:hover .wwu-dz-ico{color:var(--fg)}
.wwu-dz[data-over="1"]{border-color:var(--sig);background:var(--bg2)}
.wwu-dz[data-over="1"] .wwu-dz-ico{color:var(--sig);transform:translateY(4px)}
.wwu-dz[data-error="1"]{border-color:var(--fg);border-style:solid}
.wwu-dz:focus-within{outline:2px solid var(--fg);outline-offset:3px}
.wwu-files{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.wwu-form>.wwu-files{margin-top:10px}
.wwu-file{display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto auto;align-items:center;gap:12px;min-height:52px;padding:8px 8px 8px 14px;background:var(--bg)}
.wwu-file-k{font-size:.75rem;color:var(--grey)}
.wwu-file-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9375rem;color:var(--grey);transition:color .2s ease}
.wwu-file[data-has="1"] .wwu-file-n{color:var(--fg);font-weight:500}
.wwu-file-s{font-size:.75rem;color:var(--grey);white-space:nowrap}
.wwu-file-x{min-height:36px;padding:0 12px;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--fg);font:500 .8125rem var(--sans);cursor:pointer;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.wwu-file[data-has="1"] .wwu-file-x{opacity:1;visibility:visible;transition:opacity .2s ease}
.wwu-file-x:hover{border-color:var(--fg)}
.wwu-swap{justify-self:start;min-height:36px;margin-top:6px;padding:0;border:0;background:none;color:var(--grey);font-size:.75rem;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line2);cursor:pointer;transition:opacity .2s ease}
.wwu-swap:hover{color:var(--fg)}
.wwu-swap:disabled{opacity:0;cursor:default}
.wwu-form>.wwu-swap{margin-top:6px}
@media(max-width:520px){.wwu-file{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}.wwu-file-k{grid-column:1/-1}.wwu-file-s{display:none}}
@media(prefers-reduced-motion:reduce){.wwu-dz,.wwu-dz-ico,.wwu-file-n,.wwu-file-x,.wwu-swap{transition:none}}
.wwu-form>.btn{margin-top:20px;max-width:22rem}
.wwu-form>.msg{min-height:2.8em;margin-top:8px}
/* sent: the confirmation fades in over the form, which keeps its space (the card never changes height) */
.wwu-done{position:absolute;left:24px;right:24px;top:96px;opacity:0;pointer-events:none;transition:opacity .35s ease}
.wwu-done[hidden]{display:block;visibility:hidden}
.wwu-card.is-sent .wwu-done{opacity:1;visibility:visible;pointer-events:auto}
.wwu-card.is-sent .wwu-form{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
@media(prefers-reduced-motion:reduce){.wwu-done,.wwu-card.is-sent .wwu-form{transition:none}}
.wwu-card .fine{max-width:44rem}
.wwu-card.is-sent .wwu-prompts,.wwu-card.is-sent .wwu-role{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
@media(prefers-reduced-motion:reduce){.wwu-card.is-sent .wwu-prompts,.wwu-card.is-sent .wwu-role{transition:none}}

/* WORK-WITH-US-PHASE3-PAGE-2026-10-26 (healer:24dbe919): the candidate interview page. The card holds four panes (loading, form, done,
   problem) stacked in ONE grid cell: the card is as tall as the tallest pane and a pane change only fades, so nothing moves. The
   card keeps a 24rem floor so loading, thanks and problem all share one height; the form grows it below the fold (measured CLS 0 at 320-1280). */
.wwi-hero{min-height:clamp(300px,42svh,420px)}
.wwi-card{display:grid;min-height:24rem}
.wwi-pane{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;align-content:start}
.wwi-card[data-pane="loading"] [data-pane-for="loading"],.wwi-card[data-pane="form"] [data-pane-for="form"],.wwi-card[data-pane="done"] [data-pane-for="done"],.wwi-card[data-pane="problem"] [data-pane-for="problem"]{opacity:1;visibility:visible;transition:opacity .3s ease .12s,visibility 0s}
.wwi-pane>p{max-width:44rem}.wwi-pane>p+h2,.wwi-pane>h2+p{margin-top:12px}
.wwi-wait{color:var(--grey)}
.wwi-call{display:flex;align-items:center;gap:12px;margin-top:20px;font-family:var(--sans);font-size:.9375rem;color:var(--fg);line-height:1.4}
.wwi-call input{width:20px;height:20px;flex:none;accent-color:currentColor}
.wwu-form>.wwi-call{margin-top:20px}
.wwi-form #wwi-fields{display:grid;gap:14px;margin-top:0}
.wwi-fine{margin-top:12px}
@media(prefers-reduced-motion:reduce){.wwi-pane,.wwi-card[data-pane] .wwi-pane{transition:none}}
.wwi-doc{grid-template-columns:minmax(0,1fr)}
.wwu-form>label.wwi-call{font-family:var(--sans);font-size:.9375rem;line-height:1.4;color:var(--fg);margin-top:20px}