/* Jobs host on the Daylight shell (web build slice 2, docs/WEB_BUILD_PLAN.md). Loaded after daylight.css on every jobs-host page.
   Holds only what the SHELL needs on the jobs host: the header's search box and account slot, the footer's Region control, and
   aliases for the old token names so a page not yet ported still reads in the new colours. Each page group has its own sheet
   (jobs-landing.css, jobs-search.css, ...), linked by that page's renderer. */

/* old token names (site.css / jobs.css) onto the Daylight tokens, for bodies not yet ported */
:root{--bg:var(--canvas);--surface:var(--base);--alt:var(--sand);--line:var(--rule);--muted:var(--ink2);--faint:var(--ink2);
  --blue:var(--cobalt);--blue-soft:var(--lav);--on-blue:#fff;--good:#1f7a3d;--bad:#b42318;--font-display:var(--f-d);--font-body:var(--f-d);
  --font-label:var(--f-m);--font-fig:var(--f-d);--field-bg:var(--base);--radius:0;--radius-btn:0;--ease:cubic-bezier(.2,.8,.2,1);
  --fast:.15s;--med:.25s;--body:var(--f-d)}

/* the header's search box (shown while the web search is on) and account slot */
.nav .nav-search{display:flex;align-items:stretch;border:1.5px solid var(--ink);background:var(--base);min-width:0}
.nav .nav-search input{border:0;background:transparent;color:var(--ink);font:500 .92rem var(--f-d);padding:9px 12px;width:clamp(130px,14vw,220px);min-width:0}
.nav .nav-search button{border:0;border-left:1.5px solid var(--ink);background:var(--ink);color:var(--canvas);font:700 .72rem var(--f-m);letter-spacing:.08em;text-transform:uppercase;padding:0 12px;cursor:pointer}
.nav .me{display:inline-flex;align-items:center;gap:8px;font:600 .9rem var(--f-d)}
.nav .me a,.nav .me button{color:var(--ink);text-decoration:none;font:inherit;background:none;border:0;cursor:pointer;padding:12px 4px}
.nav .me a:hover,.nav .me button:hover{color:var(--cobalt)}
@media(max-width:1000px){.nav .nav-search{display:none}.nav .wrap{gap:8px}}

/* the footer's Region control */
.foot .region{background:none;border:0;border-bottom:1.5px solid currentColor;color:var(--ink);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:6px 0;min-height:44px}
.foot .region::after{content:" \25BE"}
.foot .regionbox{margin-top:10px;display:grid;gap:6px;max-width:260px}
.foot .regionbox[hidden]{display:none}
.foot .regionbox select{font:500 .95rem var(--f-d);padding:10px 12px;border:1.5px solid var(--ink);background:var(--base);color:var(--ink)}
.foot .fine,.foot .region-line{font-size:.8rem}

/* the email boxes (a job, an employer, a hub's weekly note): label, input, button in one .row. On a phone daylight.css folds a list
   .row to two columns and hides everything after the second child, which hid the button of every alert box. */
.alert-box .row > :nth-child(n+3){display:inline-flex}