/* SCRUB VALLEY staff console: app.css (page builder, BRIEF.md 4.7)
 *
 * Screen placement on top of brand.css: widths, alignment and spacing, with brand.css tokens only.
 * No colour, no font, no new look: every component class and its look live in brand.css (DESIGN-SPEC.md 0).
 *
 * Contents
 *   1 jobs list (spec 5)       2 job page frame (spec 4.8, 7)       3 dialogs (spec 3.7, 14.2)
 *   4 step 1 requirements (spec 8)      5 step 2 candidates (spec 9)      6 step 3 questions (spec 10)
 *   7 step 4 client file (spec 11)
 */

/* 1 jobs list (spec 5) ----------------------------------------------------------------------------------------- */
/* Job takes the rest of the row; the other columns keep a steady width so the rows read as one list */
.page[data-view="jobs"] .table th:nth-child(2) { width: 16%; }                         /* City */
.page[data-view="jobs"] .table th:nth-child(3) { width: 250px; }                       /* Step */
.page[data-view="jobs"] .table th:nth-child(4) { width: 210px; }                       /* Status */
.page[data-view="jobs"] .table th:nth-child(5) { width: 160px; text-align: right; }    /* Last change: numbers sit right */
.page[data-view="jobs"] .table td:nth-child(3),
.page[data-view="jobs"] .table td.num { white-space: nowrap; }
.page[data-view="jobs"] .table td .skeleton--row { width: 100%; }

/* 2 job page frame (spec 4.8, 7) ------------------------------------------------------------------------------- */
/* the job head while the job loads: back link, a title bar and a meta line in the place the text will take */
.job-head > [data-skeleton] { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.job-head > [data-skeleton] .skeleton--title { width: 40%; }
.job-head > [data-skeleton] .skeleton--line { width: 28%; }

/* 3 dialogs (spec 3.7, 14.2) ----------------------------------------------------------------------------------- */
/* Keyboard shortcuts: the keys on the left, what they do and where on the right */
.shortcuts dt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.shortcuts dd > .text-mut { display: block; }

/* 4 step 1 requirements (spec 8) ------------------------------------------------------------------------------- */
/* the panel has no top padding (each section brings its own): a task panel or an alert at its top keeps the
   section rhythm, and the "Left out of matching" list sits a step under the last section */
.refine__panel > .task, .refine__panel > .alert { margin-top: var(--sp-6); }
.refine__panel > .disclosure, .refine__panel > .jd-panel { margin-top: var(--sp-4); }
/* ship W3 (M-04): the client points, closed, once for the whole job; a requirement with one shows a small flag */
.open-points { box-shadow: none; border: 1px solid var(--c-border); }
.open-point { padding: var(--sp-2) 0; border-top: 1px solid var(--c-border); }
.open-point:first-child { border-top: 0; }
.req-item__flag { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--sp-2); font-size: var(--fs-12); font-weight: 700; color: var(--blue-600); vertical-align: 1px; }
/* loading the view (8.14): three bars in the panel */
.refine__panel[aria-busy="true"] { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-6); }
/* toasts stay bottom right (spec 3.8) but above the Refine footer, so a "deleted, Undo" toast never covers
   Save and Save and match: page padding, the footer (two paddings and a button) and a gap */
.app:has(.page--s1) ~ .toasts { bottom: calc(var(--sp-6) + var(--sp-4) * 2 + var(--hit) + var(--sp-3)); }
/* contract editors (spec 8.16): under a requirement's title one line holds its type, route and group; its options,
   the reading of its years and its open notes stack under that line, all in the requirement's own column */
.req-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.req-item__meta > .select { flex: 0 1 15rem; }
/* fix-ui: the years-policy rows (Internships count, Training posts count...) line up as one two-column grid */
.req-item__meta--choice { display: grid; grid-template-columns: minmax(0, 18rem) minmax(10rem, 15rem); align-items: center; gap: var(--sp-2) var(--sp-3); }
.req-item__meta--choice > .select { width: 100%; }
@media (max-width: 767px) { .req-item__meta--choice { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); } }
.req-item__main > .field, .req-item__main > .stack, .req-item__main > ul { margin-top: var(--sp-2); }
.req-item__alts .add-row { max-width: 36rem; }
#s1-routes > .req-list, #s1-open-points .alert__body > ul + ul { margin-top: var(--sp-2); }

/* 5 step 2 candidates (spec 9) --------------------------------------------------------------------------------- */
/* loading the view (9.6): under the column bar, five bars with the table's side padding */
.cand-table[aria-busy="true"] > .skeleton { margin: var(--sp-2) var(--sp-4); }
.cand-table[aria-busy="true"] > .skeleton:last-child { margin-bottom: var(--sp-4); }
/* the search in numbers (9.1, CONTRACT E.1): one wrapping row of badges under the head line */
#s2-counts { margin: 0; padding: 0; list-style: none; }
/* WP4: no badges and no grade cell live in the row head any more; the panel carries them */
.notfit-row ul, .req-check__item ul { margin: var(--sp-1) 0 0; padding: 0; list-style: none; }
/* quick decisions on the row head (owner 4 Oct): approve/hold/reject without opening the row */
/* fix-ui (6 Oct): a bordered 32 px circle, so an undecided button reads as a button (the phone keeps its 44 px) */
.quick-decide { width: 32px; height: 32px; border: 1px solid var(--c-border-ui); border-radius: 50%; }
.quick-decide .ic { width: 16px; height: 16px; }
.quick-decide--approve[aria-pressed="true"] { background: var(--green-100); border-color: var(--green-600); color: var(--green-600); box-shadow: inset 0 0 0 1px var(--green-600); }
.quick-decide--hold[aria-pressed="true"] { background: var(--amber-100); border-color: var(--amber); color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.quick-decide--reject[aria-pressed="true"] { background: var(--red-100); border-color: var(--red); color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
/* WP4 calm screens (owner, 5 Oct): the per-row chips strip and the lead fill-gaps form are
   gone; only the unknowns list of the open panel keeps the question rules below */
.cf-question { padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border); }
.cf-question:last-child { border-bottom: 0; }
.cf-item__label { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-13); font-weight: 600; color: var(--ink); }
.cf-question__ar { font-family: var(--font-ar); line-height: var(--lh-ar); }
.cf-question .chip-row { margin-top: var(--sp-1); }
/* release check 6 Oct: a chip wrapped in a tooltip holder (Step 1 job titles) may shrink to the row, so a long
   title ends in an ellipsis instead of widening the page at 390 px (O-10) */
.chip-row > .has-tip { min-width: 0; max-width: 100%; }
/* the sourcing panel (9.8, CONTRACT E.4, G, H.7, H.8): three layers, the CV queue and the LinkedIn leads */
#s2-sourcing .src-layers { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
#s2-sourcing .src-layer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-4); align-items: start; padding: var(--sp-3) 0; border-top: 1px solid var(--c-border); }
#s2-sourcing .src-layer:first-child { border-top: 0; }
#s2-sourcing .src-layer > .cluster { justify-content: flex-end; }
#s2-sourcing .src-item { padding: var(--sp-3) 0; border-top: 1px solid var(--c-border); }
#s2-sourcing .src-item ul { margin: var(--sp-1) 0 0; padding: 0; list-style: none; }
#s2-sourcing .src-item .cluster { margin-top: var(--sp-2); }
#s2-sourcing .src-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
#s2-sourcing .src-form .input, #s2-sourcing .src-form .select { width: auto; min-width: 10rem; flex: 0 1 auto; }
#s2-sourcing .src-form .textarea { width: 100%; min-height: 5rem; }
#s2-sourcing pre { white-space: pre-wrap; margin: var(--sp-1) 0 0; font: inherit; }
#dlg-linkedin .textarea { min-height: 5rem; }
.po-more { margin-top: var(--sp-3); }

/* 6 step 3 questions (spec 10) --------------------------------------------------------------------------------- */
/* loading the view (10.4): three bars inside the people card, with the head's side padding */
.people > .skeleton { margin: var(--sp-3) var(--sp-4); }
.people > .skeleton:last-child { margin-bottom: var(--sp-4); }
/* claims and staff checks, the answer source and the history (10.6): placed in the panel's own rhythm */
.qpanel > .card ul, .qcard .alert__list { margin: 0; padding: 0; list-style: none; }
.qcard > .cluster { margin-top: var(--sp-3); }
.qcard > .cluster > .input { width: 9rem; flex: 0 0 auto; }

/* 7 step 4 client file (spec 11) ------------------------------------------------------------------------------- */
/* Nothing to place beyond brand.css: every Step 4 component class (the build grid, check cells, tabs,
   previews, the result line, downloads, the approval row) is brand.css 21 and 22, sized for the page.
   The loading skeleton (11.7) stacks skeleton cards in .build-grid, which brand.css already lays out. */
/* who goes in the file (11.2a, CONTRACT I.3): every reason under its name, a step in from the name */
#s4-selection ul { margin: 0; padding: 0; list-style: none; }
#s4-selection ul ul, .table td > ul { margin-top: var(--sp-1); padding-left: var(--sp-4); list-style: disc; }

/* the Step 3 LinkedIn candidate cards (owner, 5 Oct 2026) */
.s3lead { border: 1px solid var(--c-border); border-radius: var(--r); margin-bottom: var(--sp-3); background: var(--white); }
.s3lead__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); cursor: pointer; }
.s3lead__head:hover { background: var(--zebra); }
.s3lead__body { padding: var(--sp-2) var(--sp-4) var(--sp-4); border-top: 1px solid var(--c-border); display: grid; gap: var(--sp-3); }
.s3q { display: grid; gap: var(--sp-1); padding: var(--sp-2) 0; border-top: 1px dashed var(--c-border); }
.s3q__row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.s3q__tools { display: inline-flex; gap: var(--sp-1); }

/* 5 Oct owner: the pasted advert beside its translation (Step 1) — WP4 pass: brand tokens
   and the 8px rhythm only, same panel */
.jd-panel__text { white-space: pre-wrap; max-height: 320px; overflow: auto; margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs); background: var(--zebra); }
.jd-map { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.jd-map li { border-left: 3px solid var(--line); padding-left: var(--sp-3); }
.jd-map p { margin: 2px 0 0; }

/* Step 4 (ship W3): why a person is not ready, closed under the Ready badge */
.s4-why { margin-top: var(--sp-1); }
.s4-why__list { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); list-style: disc; }
.s4-why__list li + li { margin-top: 2px; }
/* Step 3 approved LinkedIn people (ship W3): the server's questions, read only, and the form link */
.s3q-list { margin: 0; padding-left: var(--sp-5); list-style: decimal; display: grid; gap: var(--sp-2); }
.s3q-list > .s3q { display: list-item; border-top: 0; padding: 0; }
.s3q__ar { font-family: var(--font-ar); line-height: var(--lh-ar); }
.s3lead__title { flex: 1 1 200px; min-width: 0; }
.s3lead__link { flex: 1 1 320px; min-width: 0; }
#s2-sourcing .src-layer__extra { grid-column: 1 / -1; }
#po-num { width: 7rem; }