/* The page's own. Everything about steps — .form-steps, .form-step,
   .form-card, .form-actions — comes from style.css, shared with the property
   and roommate wizards; only what this form has that they do not is here. */
/* No width of its own: .breadcrumb--wizard, .page-hero--wizard, .form-steps-row
   and .listing-form .form-card/.form-actions are all capped at 900 and centred
   by one rule in style.css, which is what makes the three wizards one column. */
.workers-form{margin-bottom:0}
/* A pill that goes somewhere says so; one ahead of where you are does not. */
.form-steps .form-step.active{cursor:pointer}
/* The fields are the site's own (.field / .field-grid-2 / .field-input, shared
   with the property and roommate forms), so what is left here is only the
   rhythm around them: the first thing under a title sits where the title's own
   margin puts it — the shared .field adds its 30px ABOVE every field — and the
   second half of a merged step is a rule and a heading. */
.workers-form .form-card-title + .field,
.workers-form .form-card-title + .field-grid-2{margin-top:0}
.form-card-head{display:grid;gap:6px}
.form-card-head--second{margin-top:34px;padding-top:26px;border-top:1px solid var(--line-soft)}
.form-card-head .form-card-title{margin:0}
.form-card-head + .field-grid-2,
.form-card-head + .upload-preview{margin-top:22px}
.form-card-note{margin:0;font-size:13px;line-height:1.5;color:var(--ink-3)}
/* A grid cell's automatic minimum is its content's, and an <input> brings an
   intrinsic width of ~190px: two of them in the salary pill pushed the cell to
   460px inside a 320px card on a phone. */
.workers-form .field-grid-2>.field{min-width:0}
.workers-form .field-input--split input{text-align:left}
.worker-salary-agreement{position:relative;display:inline-flex;align-items:center;gap:8px;width:max-content;margin-top:10px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink-2);font-size:13px;font-weight:700;cursor:pointer;transition:border-color .18s,background .18s,color .18s}
.worker-salary-agreement input{position:absolute;opacity:0;pointer-events:none}
.worker-salary-agreement i{flex:none;font-size:17px;color:var(--ink-3);transition:color .18s}
/* Ticked it is the tint and the accent text, with no outline of its own. The border stays in the box, transparent,
   so ticking does not move the pill by a pixel. */
.worker-salary-agreement:has(input:checked){border-color:transparent;background:color-mix(in srgb,var(--accent) 7%,var(--white));color:var(--accent)}
.worker-salary-agreement:has(input:checked) i{color:var(--accent)}
.worker-salary-agreement .worker-agree-on{display:none}
.worker-salary-agreement:has(input:checked) .worker-agree-off{display:none}
.worker-salary-agreement:has(input:checked) .worker-agree-on{display:inline-block}
.worker-life-note{display:flex;align-items:flex-start;gap:9px;margin:22px 0 0;padding:12px 14px;border:1px solid var(--line-soft);border-radius:12px;background:var(--paper);color:var(--ink-2);font-size:13.5px;line-height:1.55}
.worker-life-note i{flex:none;margin-top:2px;font-size:17px;color:var(--ink-3)}
.worker-life-note>span{min-width:0}
.worker-life-note strong{color:var(--ink)}
.worker-life-note a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.worker-life-note--ok{border-color:color-mix(in srgb,var(--ok) 30%,transparent);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.worker-life-note--ok i{color:var(--ok)}