/* The way to add a job (plan 10 Phase 3): one field for the posting or its link, a file, reading, and refusals. */
.hq-job{display:block;position:relative;color:var(--text);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:22px 24px;transition:background .15s}
.hq-job.is-compact{padding:14px 16px;border-radius:12px}
.hq-job [hidden]{display:none!important}
.hq-job.is-over{outline:2px dashed var(--primary);outline-offset:4px;background:var(--tint)}
.hq-job .hq-job-label{display:block;margin:0;font-size:0;line-height:0;color:transparent}
.hq-job .hq-job-field{display:block;width:100%;box-sizing:border-box;margin:0;min-height:124px;padding:14px 16px;border:2px solid color-mix(in srgb,var(--primary) 32%,var(--line));border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:16px;line-height:1.5;resize:vertical}
.hq-job.is-compact .hq-job-field{min-height:84px;font-size:15px}
.hq-job .hq-job-field:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}
.hq-job .hq-job-field::placeholder{color:var(--muted)}
.hq-job .hq-job-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.hq-job .hq-job-or{color:var(--muted);font-size:14px}
.hq-job .hq-job-limits{color:var(--muted)}
.hq-job .hq-job-add{margin-left:auto}
.hq-job .hq-job-add:disabled{opacity:.55;cursor:not-allowed}
.hq-job .hq-job-privacy{margin:12px 0 0;color:var(--muted)}
.hq-job .hq-job-note{margin:0 0 10px;color:var(--muted)}
.hq-job .hq-job-message{margin:0 0 10px;font-weight:600}
.hq-job .hq-job-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hq-job .link{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--text);text-decoration:underline;cursor:pointer}
/* Reading */
.hq-job .hq-job-what{margin:0 0 12px;font-size:16px;overflow-wrap:anywhere}
.hq-job .hq-job-steps{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:0 0 12px;padding:0}
.hq-job .hq-job-steps li{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.hq-job .hq-job-steps li.is-now,.hq-job .hq-job-steps li.is-done{color:var(--text)}
.hq-job .hq-job-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.hq-job li.is-now .hq-job-dot{background:var(--primary);border-color:var(--primary);color:#fff}
.hq-job li.is-done .hq-job-dot{border-color:transparent;background:color-mix(in srgb,var(--success) 16%,var(--surface));color:var(--success)}
.hq-job .hq-job-bar{height:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.hq-job .hq-job-bar span{display:block;height:100%;width:0;background:var(--primary);border-radius:3px;transition:width .9s linear}
.hq-job .hq-job-foot{display:flex;align-items:center;gap:12px;margin-top:12px;color:var(--muted)}
.hq-job .hq-job-cancel{margin-left:auto}
/* Something that cannot be used */
.hq-job .hq-job-problem{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;border:1px solid #f0d49b;background:#fff8ea;border-radius:12px;padding:18px 20px}
body.dark .hq-job .hq-job-problem{background:#2c2618;border-color:#5b4a22}
.hq-job .hq-job-sign{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#9a5b00;background:var(--surface);border:1px solid #f0d49b}
.hq-job .hq-job-problem-title{display:block;font-size:20px;margin:2px 0 4px}
.hq-job.is-compact .hq-job-problem-title{font-size:16px}
.hq-job .hq-job-problem p{margin:0;overflow-wrap:anywhere}
.hq-job .hq-job-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:12px}
@media(prefers-reduced-motion:reduce){.hq-job .hq-job-bar span,.hq-job{transition:none}}
@media(max-width:640px){
 .hq-job{padding:16px}
 .hq-job .hq-job-add{margin-left:0;width:100%}
 .hq-job .hq-job-limits{flex-basis:100%}
 .hq-job .hq-job-foot{flex-wrap:wrap}
 .hq-job .hq-job-cancel{margin-left:0}
}
/* Review 11 (U24): a visible hint under the field. */
.hq-job .hq-job-hint{margin:8px 2px 0;font-weight:600;color:#a5233c}
body.dark .hq-job .hq-job-hint{color:#ff9aae}