/* Styles for the two real public pages (Find jobs and the job page). The shared look is in pages.css and pieces.css.
   Nothing here is inline in the pages: the pages carry a strict policy that allows no inline style. */
.fj-head{padding:48px 0 8px}
.fj-head p{font-size:19px;color:var(--mut);margin-top:14px;max-width:40ch}
.fj-count{margin:26px 0 12px;color:var(--mut);font-size:17px}
.fj-empty{padding:36px;border-radius:24px;background:var(--card);box-shadow:var(--lift);margin-top:18px}
.fj-empty h2{font-size:26px;margin-bottom:8px}
.fj-empty p{color:var(--mut);margin-bottom:18px;max-width:46ch;font-size:18px}
.fj-empty .btn{margin-right:10px;margin-bottom:6px}
.fj-tell{margin:64px 0 8px;padding:40px;border-radius:24px;background:var(--ink);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.fj-tell h2{font-size:clamp(26px,3vw,36px);color:#fff;max-width:20ch;line-height:1.1}
.fj-tell p{color:#d9d0c4;font-size:18px;margin-top:8px;max-width:40ch}
@media(max-width:760px){.fj-tell{padding:28px 22px}}

/* the search bar is a plain form: a box, two lists and a button */
.fj-bar{position:sticky;top:72px;z-index:15;background:rgba(248,240,228,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:14px 0;border-bottom:1px solid var(--line)}
.fj-bar .in{display:grid;gap:12px;align-items:end}
.fj-bar .in{grid-template-columns:1.3fr 1fr 1fr auto}
.fj-bar .fld{display:block}
.fj-bar .lab{display:block;font-size:16px;font-weight:400;color:var(--mut);margin-bottom:8px}
.fj-bar input[type=search],.fj-bar .sel{display:block;width:100%;min-height:50px;padding:10px 14px;border:0;border-radius:10px;background:#fff;box-shadow:0 4px 12px rgba(60,40,20,.10);font:inherit;font-size:16px;color:var(--ink);outline:0}
.fj-bar .sel{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6354' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px 16px}
.fj-bar input[type=search]:focus,.fj-bar .sel:focus-visible{box-shadow:0 4px 12px rgba(60,40,20,.10),0 0 0 2px var(--ink)}
.fj-bar .sub{min-height:50px}
@media(max-width:900px){.fj-bar{position:static;backdrop-filter:none;-webkit-backdrop-filter:none}.fj-bar .in{grid-template-columns:1fr}}

/* the job table */
.rt .jt{display:inline}
@media(max-width:760px){.rt .jt{display:inline-flex;align-items:center;min-height:44px}}
.rt .jt:hover b{text-decoration:underline;text-underline-offset:3px}
.rt .clip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.rt.jobs td{overflow-wrap:anywhere}
.rt .fl{display:inline-block;width:24px;height:18px;margin-right:8px;border-radius:3px;object-fit:cover;vertical-align:-3px;box-shadow:0 1px 4px rgba(60,40,20,.25)}
.rt.jobs td:nth-child(2) .fl+*{vertical-align:middle}
.rt.jobs.pct{--c1:30%;--c2:27%;--c3:25%;--c4:18%}

/* the job page */
.jt1{margin-top:14px;overflow-wrap:anywhere}
.jobcols{margin-top:34px}
.must{overflow-wrap:anywhere}
.facts dd,.ticks li,.steps b{overflow-wrap:anywhere}
.big{font-size:18px;overflow-wrap:anywhere}
.gap{margin-bottom:16px}
.note{font-size:17px;color:var(--mut);margin-top:14px}
.ul{text-decoration:underline;text-underline-offset:3px}
.btn.full{width:100%}

/* the Apply form (#031): native lists, no script needed */
.fld select{display:block;width:100%;min-height:50px;padding:12px 40px 12px 14px;border:1px solid var(--fld-edge,#928570);border-radius:10px;background:var(--fld-fill,#faf5ec);font:inherit;font-size:17px;color:var(--ink);outline:0;appearance:none;-webkit-appearance:none;max-width:100%;
  background:var(--fld-fill,#faf5ec) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6354' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px 16px}
.fld select:focus-visible{border-color:var(--fld-focus,#a8560a);box-shadow:0 0 0 1px var(--fld-focus,#a8560a)}
.fld.bad select{border-color:#a3231b;box-shadow:0 0 0 1px #a3231b,0 0 0 4px rgba(163,35,27,.14)}
.chkbad{display:block}
.agebox{padding:16px 20px;border-radius:12px;background:var(--soft);margin-bottom:6px;font-size:18px;font-weight:500}
.fcard2 .done{display:block;box-shadow:none;background:none}
.apply-note{color:var(--mut);font-size:16px;margin-top:6px;text-align:center}
/* On a phone the fixed WhatsApp button is only its icon on the Apply form, so it never covers a label or an error (found by the #031 tester). */
@media(max-width:760px){.applypage .wa{width:48px;padding:0;justify-content:center;gap:0;font-size:0}}

/* #044: the title of a status page (not a match, closed, applied, choose a job, request received) is the page h1; it looks as the h2 did. */
.done h1{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;line-height:1.1;margin-bottom:12px;font-weight:600!important}
/* ---- #043 public wording and small facts (own block; keep when merging) ---- */
.jobintro{font-size:19px;color:var(--mut);margin-top:16px;max-width:60ch;overflow-wrap:anywhere}
/* Pay and benefits: a small neutral dot, not a tick (a tick reads as "confirmed") */
.ticks.plainmark li::before{width:8px;height:8px;margin:11px 9px 0 9px;background:var(--mut);background-image:none;opacity:.7}
.fj-closedhead{font-size:26px;margin:44px 0 4px}
.fj-noopen{font-size:18px;color:var(--mut);margin:8px 0 0}
.fj-closedhead + .rt-wrap{margin-top:14px}
.fj-tell h2{text-wrap:balance}
.nowrap{white-space:nowrap}
/* #049: the CV box. The whole box is the tap area (the real input covers it); its pill is at least 44px tall. */
body .file{font-size:17px}
.file .fbtn{display:inline-flex;align-items:center;min-height:44px}
.cvnote{font-weight:500}
.datehint{display:block;font-size:16px;color:var(--mut);margin-top:6px}