/* Worker questionnaire. Builds on ds + site: same choices, same stepper.
   Only the pieces the participant form doesn't have live here: the
   availability grid, the experience scale, and "What's this?" notes. */
.apply .q{gap:22px}
.q-label{font-weight:600;color:var(--ink);margin:0 0 10px}
.q-label + .q-hint{margin:-6px 0 10px}
.apply [data-group] > .q-hint{margin-bottom:10px}
.apply .choices.stack .choice span{min-height:52px}
.progress-dots--long{max-width:460px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* "What's this?" */
.xchoices{align-items:start}
.xchoice{display:grid;gap:4px}
.why{font-size:.88rem;color:var(--text-muted)}
.why summary{display:inline-flex;align-items:center;gap:.4em;cursor:pointer;color:var(--accent);font-weight:600;list-style:none;padding:2px 4px;border-radius:6px}
.why summary::-webkit-details-marker{display:none}
.why summary::after{content:"+";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--bg-soft);font-size:.9rem;line-height:1;transition:transform .3s var(--ease)}
.why[open] summary::after{transform:rotate(45deg);background:var(--orange-200)}
.why p{margin:4px 4px 2px;max-width:48ch;line-height:1.5}

/* availability: days down, times across */
.agrid{display:grid;grid-template-columns:56px repeat(4,minmax(0,1fr));gap:8px;align-items:center}
.ag-h{font-size:.86rem;font-weight:600;color:var(--ink);text-align:center;line-height:1.2}
.ag-h small{display:block;font-weight:400;color:var(--text-muted);font-size:.76rem;margin-top:2px}
.ag-d{font-weight:600;color:var(--ink)}
.ag-c{position:relative;display:block}
.ag-c input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ag-c > span{display:grid;place-items:center;height:46px;border-radius:12px;background:#fff;border:1.5px solid var(--line);transition:background .2s,border-color .2s}
.ag-c > span::before{content:"";width:18px;height:18px;border-radius:6px;border:1.5px solid var(--violet-300);background:#fff;transition:background .2s,border-color .2s}
.ag-c input:hover + span{border-color:var(--violet-300)}
.ag-c input:checked + span{background:var(--violet-100);border-color:var(--accent)}
.ag-c input:checked + span::before{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.ag-c input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
[data-invalid=true] .ag-c > span{border-color:#f3b5ae}

/* experience: one row per need, four levels */
.scale-key{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem;color:var(--text-muted);padding:12px 16px;border-radius:14px;background:var(--bg-soft)}
.scale-key b{color:var(--ink);font-weight:600;margin-right:.3em}
.xgrid{display:grid}
.xrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.xrow:first-child{border-top:0;padding-top:4px}
.xq{min-width:0}
.xl{display:block;font-weight:600;color:var(--ink);line-height:1.3}
.xscale{flex-wrap:nowrap;gap:6px}
.xscale .choice span{min-height:40px;padding:.5em .9em;font-size:.9rem;gap:.5em}
.xscale .choice span::before{width:14px;height:14px}
.xrow > .err{grid-column:1/-1}

@media (max-width:760px){
  .xrow{grid-template-columns:1fr}
  .xscale{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .xscale .choice span{justify-content:center;padding:.5em .3em;font-size:.84rem}
  .xscale .choice span::before{display:none}
  .agrid{grid-template-columns:40px repeat(4,minmax(0,1fr));gap:5px}
  .ag-h small{display:none}
  .ag-h{font-size:.76rem}
  .ag-c > span{height:42px}
}
@media (prefers-reduced-motion:reduce){ .why summary::after{transition:none} }