/* ═══════════════════════════════════════════════════════════════════════════
   Darjah careers: design system (docs/superpowers/specs/2026-10-01-careers-candidate-journey-design.md)
   One stylesheet for all five pages. Breakpoints: phone < 720 · tablet 720–1099 · desktop ≥ 1100.
   Brand values are the designer's (hex in comments); code uses OKLCH.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --navy:oklch(28.2% .137 271);   /* #151A6B */
  --blue:oklch(50.7% .173 272);   /* #4657C6 */
  --cyan:oklch(80.8% .139 209);   /* #04D8F0 */
  --on-cyan:oklch(24% .08 271);

  --bg:oklch(100% 0 0);
  --surface:oklch(96.7% .015 270);   /* #F0F4FF */
  --chip:oklch(95.5% .016 270);
  --line:oklch(90% .012 272);
  --head:var(--navy);
  --ink:oklch(24% .05 275);
  --ink-2:oklch(47% .025 275);
  --link:var(--blue);
  --accent-ink:oklch(52% .105 209);
  --ok:oklch(50% .13 152);   --ok-bg:oklch(95% .04 152);
  --wait:oklch(52% .12 70);  --wait-bg:oklch(96% .05 85);
  --err:oklch(52% .18 25);   --err-bg:oklch(96% .03 25);
  --calm:oklch(48% .03 275); --calm-bg:oklch(95% .01 275);
  --scrim:oklch(20% .05 271 / .45);
  --shadow:0 12px 32px oklch(28% .137 271 / .10);
  --toast-bg:oklch(24% .05 275); --toast-ink:oklch(97% .01 270);
  --logo-light:block; --logo-dark:none;

  --font:'Darjah',Tahoma,'Segoe UI',system-ui,sans-serif;
  --r-sm:10px; --r:16px; --r-lg:22px;
  --wrap:1200px; --gut:16px;
  --bar-h:66px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:oklch(17% .035 271); --surface:oklch(21.5% .045 271); --chip:oklch(26% .05 271); --line:oklch(31% .045 271);
    --head:oklch(93% .03 250); --ink:oklch(94% .01 270); --ink-2:oklch(76% .02 270); --link:oklch(80% .1 245);
    --accent-ink:oklch(84% .12 209);
    --ok:oklch(78% .13 152); --ok-bg:oklch(28% .05 152);
    --wait:oklch(82% .12 80); --wait-bg:oklch(29% .05 80);
    --err:oklch(76% .14 25); --err-bg:oklch(29% .06 25);
    --calm:oklch(80% .02 270); --calm-bg:oklch(27% .03 271);
    --scrim:oklch(5% .02 271 / .6); --shadow:0 12px 32px oklch(0% 0 0 / .4);
    --toast-bg:oklch(96% .01 270); --toast-ink:oklch(24% .05 275);
    --logo-light:none; --logo-dark:block; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:oklch(17% .035 271); --surface:oklch(21.5% .045 271); --chip:oklch(26% .05 271); --line:oklch(31% .045 271);
  --head:oklch(93% .03 250); --ink:oklch(94% .01 270); --ink-2:oklch(76% .02 270); --link:oklch(80% .1 245);
  --accent-ink:oklch(84% .12 209);
  --ok:oklch(78% .13 152); --ok-bg:oklch(28% .05 152);
  --wait:oklch(82% .12 80); --wait-bg:oklch(29% .05 80);
  --err:oklch(76% .14 25); --err-bg:oklch(29% .06 25);
  --calm:oklch(80% .02 270); --calm-bg:oklch(27% .03 271);
  --scrim:oklch(5% .02 271 / .6); --shadow:0 12px 32px oklch(0% 0 0 / .4);
  --toast-bg:oklch(96% .01 270); --toast-ink:oklch(24% .05 275);
  --logo-light:none; --logo-dark:block; color-scheme:dark;
}

/* ── base ───────────────────────────────────────────────────────────────── */
[hidden]{display:none!important}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.7;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
a{color:var(--link)}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3{color:var(--head);margin:0;text-wrap:balance;line-height:1.35}
p{margin:0}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:8px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
@media (min-width:720px){:root{--gut:28px}}
@media (min-width:1100px){:root{--gut:40px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bidi{unicode-bidi:plaintext}

/* ── header ─────────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:10px;min-height:64px}
.logo{display:flex;align-items:center;flex:none;min-height:44px}
.logo img{height:36px;width:auto}
.logo .l-light{display:var(--logo-light)} .logo .l-dark{display:var(--logo-dark)}
.nav{display:none;gap:4px;margin-inline-start:24px}
.nav a{color:var(--head);text-decoration:none;font-weight:700;font-size:15px;padding:10px 16px;border-radius:999px;white-space:nowrap}
.nav a:hover{background:var(--bg)}
.nav a[aria-current="page"]{background:var(--navy);color:oklch(100% 0 0)}
:root[data-theme="dark"] .nav a[aria-current="page"]{background:var(--cyan);color:var(--on-cyan)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .nav a[aria-current="page"]{background:var(--cyan);color:var(--on-cyan)}}
.sp{flex:1}
.ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--head);flex:none}
.ic svg{width:20px;height:20px}
.ic.txt{font-size:13px;font-weight:800}
.desk-only{display:none}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--head);text-decoration:none;font-weight:700;font-size:14.5px;min-height:44px}
/* The full nav needs ~600px in English (5 links), so it shows from 1024px; an iPad keeps
   the ☰ menu (with search and theme beside it) instead of scrolling sideways. */
@media (min-width:720px){ .desk-only{display:grid} }
@media (min-width:1024px){
  .nav{display:flex}
  .phone-only{display:none!important}
}

/* ── ☰ menu (phone) ─────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s ease}
.scrim.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;top:0;inset-inline:0;z-index:41;background:var(--bg);border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:calc(env(safe-area-inset-top,0px) + 6px) var(--gut) 20px;transform:translateY(-104%);transition:transform .28s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow)}
.sheet.open{transform:none}
.sheet .top{display:flex;align-items:center;min-height:60px}
.sheet nav{display:grid;margin-top:4px}
.sheet nav a{display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:0 4px;font-size:17px;font-weight:700;color:var(--head);text-decoration:none;border-bottom:1px solid var(--line)}
.sheet nav a small{font-size:13px;font-weight:400;color:var(--ink-2)}
.lbl{font-size:12.5px;color:var(--ink-2);margin:16px 4px 8px;letter-spacing:.05em}
.pick{display:flex;gap:8px}
.pick button{flex:1;min-height:46px;border-radius:12px;background:var(--surface);font-weight:700;font-size:14.5px;color:var(--head)}
.pick button[aria-pressed="true"]{background:var(--navy);color:oklch(100% 0 0)}
:root[data-theme="dark"] .pick button[aria-pressed="true"]{background:var(--cyan);color:var(--on-cyan)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pick button[aria-pressed="true"]{background:var(--cyan);color:var(--on-cyan)}}

/* ── bottom bar (phone only) ────────────────────────────────────────────── */
.tabs{position:fixed;bottom:0;inset-inline:0;z-index:30;background:var(--bg);border-top:1px solid var(--line);
  display:flex;padding:6px 6px calc(env(safe-area-inset-bottom,0px) + 8px);transition:transform .15s ease}
.tabs a{flex:1;display:grid;justify-items:center;gap:2px;font-size:11.5px;font-weight:700;color:var(--ink-2);min-height:54px;padding-top:4px;text-decoration:none}
.tabs a span{display:grid;place-items:center;width:56px;height:30px;border-radius:999px}
.tabs a svg{width:21px;height:21px}
.tabs a[aria-current="page"]{color:var(--head)} .tabs a[aria-current="page"] span{background:var(--surface)}
body.has-tabs main{padding-bottom:calc(var(--bar-h) + 24px)}
body.typing .tabs,body.typing .applybar{transform:translateY(120%)}
@media (min-width:720px){.tabs{display:none} body.has-tabs main{padding-bottom:0}}

/* ── sticky apply bar (job page, phone) ─────────────────────────────────── */
.applybar{position:fixed;bottom:0;inset-inline:0;z-index:30;background:var(--bg);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:10px var(--gut) calc(env(safe-area-inset-bottom,0px) + 10px);transition:transform .15s ease}
.applybar .money{flex:1;min-width:0;font-size:13px;color:var(--ink-2);line-height:1.4}
.applybar .money b{display:block;color:var(--head);font-size:15px;overflow-wrap:anywhere}
.applybar .btn{flex:none;padding:0 26px}
body.has-applybar main{padding-bottom:110px}
@media (min-width:900px){.applybar{display:none} body.has-applybar main{padding-bottom:0}}

/* ── buttons, chips, badges ─────────────────────────────────────────────── */
.btn{position:relative;z-index:1;min-height:48px;padding:0 20px;border-radius:12px;font-weight:800;font-size:15px;display:inline-grid;place-items:center;text-decoration:none;white-space:nowrap}
.btn.pri{background:var(--cyan);color:var(--on-cyan)}
.btn.gh{background:var(--surface);color:var(--head)}
.btn.ol{border:1.5px solid var(--line);color:var(--head);background:var(--bg)}
.btn.block{display:grid;width:100%}
.btn[disabled]{opacity:.6;cursor:not-allowed}
@media (hover:hover){.btn.pri:hover{filter:brightness(.95)} .btn.gh:hover{filter:brightness(.97)}}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12.5px;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--chip);color:var(--ink-2);max-width:100%;overflow-wrap:anywhere}
.chip b{color:var(--head);font-weight:800}
.badge{font-size:11.5px;font-weight:800;padding:2px 10px;border-radius:999px;white-space:nowrap}
.badge--new{background:var(--cyan);color:var(--on-cyan)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;padding:4px 12px;border-radius:999px;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill--ok{color:var(--ok);background:var(--ok-bg)}
.pill--wait{color:var(--wait);background:var(--wait-bg)}
.pill--calm{color:var(--calm);background:var(--calm-bg)}

/* ── home ───────────────────────────────────────────────────────────────── */
main{display:block}
.hero{padding-block:24px 8px;display:grid;gap:20px}
.hero img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg)}
.hero h1{font-size:clamp(30px,6.4vw,58px);font-weight:800;line-height:1.25}
.hero h1 em{font-style:normal;color:var(--accent-ink)}
.hero p{color:var(--ink-2);font-size:16px;max-width:60ch}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
/* tablet portrait: the photo goes wide and short so the job list still starts on the first screen */
@media (min-width:720px) and (max-width:899px){.hero img{aspect-ratio:16/9}}
@media (min-width:900px){
  .hero{grid-template-columns:1.05fr 1fr;align-items:center;gap:56px;padding-block:56px 24px}
  .hero p{font-size:17px}
}
.sec{padding-block:36px}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.sec h2{font-size:clamp(24px,3.6vw,34px);font-weight:800}
.sub{color:var(--ink-2);font-size:14.5px;margin-top:4px}
.searchrow{display:flex;gap:8px;width:100%;max-width:520px}
.search{width:100%;min-height:50px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font-size:16px;padding:0 14px}
.search:focus{border-color:var(--cyan);outline:none}
.hdr-search{padding:0 var(--gut) 12px}
.hdr-search .search{max-width:none}

/* ── job card (namethatui/card) ─────────────────────────────────────────── */
.jobs{display:grid;gap:14px}
@media (min-width:720px){.jobs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.jobs{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.job{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0;background:var(--bg)}
.job:focus-within{outline:3px solid var(--cyan);outline-offset:2px}
.job__top{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.job h3{font-size:18px;line-height:1.45;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;unicode-bidi:plaintext;text-align:right}
.job__link{color:inherit;text-decoration:none;outline:none}
.job__link::after{content:"";position:absolute;inset:0;border-radius:var(--r);z-index:0}
.job p{color:var(--ink-2);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;unicode-bidi:plaintext;text-align:right}
.job .acts{margin-top:auto;padding-top:4px;display:flex}
.job .acts .btn{flex:1}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .job{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
  .job:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:var(--shadow)}
}
.sk{border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:10px}
.sk i{display:block;height:14px;border-radius:8px;background:var(--chip)}
.sk i.t{height:20px;width:75%} .sk i.s{width:45%} .sk i.b{height:48px;border-radius:12px;margin-top:6px}
@media (prefers-reduced-motion:no-preference){.sk i{animation:pulse 1.2s ease-in-out infinite alternate}}
@keyframes pulse{from{opacity:.55}to{opacity:1}}
.state{grid-column:1/-1;color:var(--ink-2);text-align:center;padding:32px 16px;border:1px dashed var(--line);border-radius:var(--r);display:grid;gap:12px;justify-items:center}
.state b{color:var(--head);font-size:17px}

.cards2{display:grid;gap:12px}
@media (min-width:720px){.cards2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.cards2{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:var(--surface);border-radius:var(--r);padding:20px}
.card h3{font-size:17px} .card p{margin-top:6px;color:var(--ink-2);font-size:14.5px}
.stub{color:var(--ink-2);font-size:14px;border:1px dashed var(--line);border-radius:var(--r);padding:16px;text-align:center}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{margin-top:40px;background:var(--navy);color:oklch(96% .01 270)}
:root[data-theme="dark"] .foot{background:oklch(12% .03 271)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .foot{background:oklch(12% .03 271)}}
.foot .wrap{display:grid;gap:22px;padding-block:36px}
.foot img{height:38px;width:auto}
.foot a{color:inherit}
.foot .ltr{direction:ltr;text-align:right;opacity:.88}
.foot small{opacity:.7}
@media (min-width:720px){.foot .wrap{grid-template-columns:1.2fr 1fr 1fr}}

/* ── job page ───────────────────────────────────────────────────────────── */
.crumbs{font-size:13.5px;color:var(--ink-2);padding-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.crumbs a{color:inherit;display:inline-block;padding:10px 2px}
.jp{display:grid;gap:24px;padding-block:14px 32px}
@media (min-width:900px){.jp{grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}}
.jp h1{font-size:clamp(26px,4.2vw,40px);font-weight:800;unicode-bidi:plaintext;text-align:right;overflow-wrap:anywhere}
.jp .meta{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:13px;color:var(--ink-2)}
.block{margin-top:26px}
.block h2{font-size:20px;font-weight:800;margin-bottom:10px}
.block p{color:var(--ink);text-align:start}
.block ul{margin:0;padding-inline-start:22px;display:grid;gap:8px}
.block li{text-align:start}
.block [lang="en"]{line-height:1.65}
.block li::marker{color:var(--accent-ink)}
.note{margin-top:14px;background:var(--wait-bg);color:var(--ink);border-radius:12px;padding:12px 14px;font-size:14.5px}
.note b{color:var(--wait)}
.aside{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:grid;gap:14px;background:var(--bg)}
@media (min-width:900px){.aside{position:sticky;top:88px;box-shadow:var(--shadow)}}
.facts{display:grid;gap:10px;margin:0}
.facts div{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;border-bottom:1px dashed var(--line);padding-bottom:8px}
.facts dt{color:var(--ink-2)} .facts dd{margin:0;font-weight:800;color:var(--head);text-align:left;overflow-wrap:anywhere}
.share{display:flex;gap:8px}
.share .btn{flex:1;min-height:44px;font-size:13.5px;padding:0 10px}
.closed{background:var(--calm-bg);color:var(--ink);border-radius:12px;padding:14px;font-size:14.5px}
.closed b{display:block;color:var(--head);font-size:16px;margin-bottom:2px}

/* ── forms ──────────────────────────────────────────────────────────────── */
.formwrap{display:grid;gap:24px;padding-block:20px 40px}
@media (min-width:1000px){.formwrap{grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}}
.panel{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;background:var(--bg)}
@media (min-width:720px){.panel{padding:28px}}
.form{display:grid;gap:18px;max-width:640px}
.field{display:grid;gap:6px}
.field label,.field .lab{font-weight:800;color:var(--head);font-size:15px}
.field .req{color:var(--err)}
.field .help{font-size:13px;color:var(--ink-2)}
.input,.select{width:100%;min-height:50px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font-size:16px;padding:0 14px}
.input:focus,.select:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 3px oklch(80.8% .139 209 / .25)}
.input.ltr{direction:ltr;text-align:right}
.field.bad .input,.field.bad .select{border-color:var(--err)}
.err{color:var(--err);font-size:13.5px;font-weight:700}
.row2{display:grid;gap:18px}
@media (min-width:720px){.row2{grid-template-columns:1fr 1fr}}
.drop{border:2px dashed var(--line);border-radius:var(--r);padding:22px;text-align:center;display:grid;gap:6px;justify-items:center;cursor:pointer;background:var(--surface)}
.drop:focus-within{outline:3px solid var(--cyan);outline-offset:2px}
.drop b{color:var(--head)} .drop small{color:var(--ink-2)}
.file{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.file .name{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:right}
.bar{height:6px;border-radius:6px;background:var(--chip);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;width:0;background:var(--cyan);transition:width .2s linear}
.yn{display:flex;gap:8px}
.yn label{flex:1;min-height:48px;border:1.5px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;cursor:pointer}
.yn input{accent-color:var(--navy);width:18px;height:18px}
.yn label:has(input:checked){border-color:var(--cyan);background:var(--surface)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.check input{width:20px;height:20px;margin-top:3px;accent-color:var(--navy);flex:none}
.done{text-align:center;display:grid;gap:12px;justify-items:center;padding-block:20px}
.done .tick{width:64px;height:64px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center}
.done .tick svg{width:30px;height:30px}
.summary{display:grid;gap:10px;order:-1}   /* phone/tablet: say which job first, then the form */
@media (min-width:1000px){.summary{position:sticky;top:88px;order:0}}
.summary h2{font-size:18px;unicode-bidi:plaintext;text-align:right}

/* ── track ──────────────────────────────────────────────────────────────── */
.narrow{max-width:640px;margin-inline:auto}
.otp{font-size:26px;letter-spacing:.5em;text-align:center;direction:ltr;font-weight:800}
.apps{display:grid;gap:14px}
.app{border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:12px}
.app h3{font-size:17px;unicode-bidi:plaintext;text-align:right}
.app .row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.steps{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.steps li{flex:1;display:grid;gap:6px;font-size:11.5px;color:var(--ink-2);text-align:center}
.steps li i{display:block;height:6px;border-radius:6px;background:var(--chip)}
.steps li.on i{background:var(--cyan)}
.steps li.now{color:var(--head);font-weight:800}
.app .calm{background:var(--calm-bg);border-radius:12px;padding:12px 14px;font-size:14.5px}

/* ── 404 ────────────────────────────────────────────────────────────────── */
.nf{text-align:center;display:grid;gap:14px;justify-items:center;padding-block:64px}
.nf .code{font-size:clamp(72px,16vw,140px);font-weight:800;line-height:1;color:var(--accent-ink)}

/* ── toast ──────────────────────────────────────────────────────────────── */
.toast{position:fixed;inset-inline:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 96px);max-width:480px;margin-inline:auto;z-index:60;background:var(--toast-bg);color:var(--toast-ink);
  border-radius:14px;padding:12px 16px;font-size:14px;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;pointer-events:none;text-align:center}
.toast.show{opacity:1;transform:none}
@media (min-width:720px){.toast{bottom:28px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── language ─────────────────────────────────────────────────────────── */
.lang{height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--head);
  font:inherit;font-size:14px;font-weight:800;cursor:pointer;flex:none}
.lang:hover{border-color:var(--cyan)}
.lang:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
/* English pages run left to right: the few right-aligned blocks mirror with them. */
html[dir=ltr] .job h3,html[dir=ltr] .job p,html[dir=ltr] .jp h1,html[dir=ltr] .summary h2,html[dir=ltr] .app h3,
html[dir=ltr] .input.ltr,html[dir=ltr] .file .name,html[dir=ltr] .foot .ltr{text-align:left}
html[dir=ltr] .facts dd{text-align:right}


/* ── candidate forms (apply, CV bank): moved from apply.html ─────────── */
.hp{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}
  details.more{border:1px solid var(--line);border-radius:var(--r);padding:0 16px}
  details.more summary{min-height:52px;display:flex;align-items:center;font-weight:800;color:var(--head);cursor:pointer;list-style:none}
  details.more summary::-webkit-details-marker{display:none}
  details.more summary::after{content:"+";margin-inline-start:auto;font-size:20px;color:var(--accent-ink)}
  details.more[open] summary::after{content:"−"}
  details.more .inner{display:grid;gap:18px;padding-bottom:18px}
  .radios{display:flex;gap:8px}
  .radios label{flex:1;min-height:50px;border:1.5px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;cursor:pointer}
  .radios input{accent-color:var(--navy);width:18px;height:18px}
  .radios label:has(input:checked){border-color:var(--cyan);background:var(--surface)}
  .fieldset{border:0;padding:0;margin:0;display:grid;gap:6px}
  .success-copy{display:grid;gap:10px;text-align:start;max-width:56ch;color:var(--ink-2);font-size:15px}
  .note{margin-top:4px}
  .field.bad .input,.field.bad .select,.field.bad .drop{border-color:var(--err)}
  .drop.over{border-color:var(--cyan);border-style:solid}
  .alert{border-radius:12px;padding:12px 14px;font-size:14.5px;display:grid;gap:2px}
  .alert b{font-size:15.5px}
  .alert--err{background:var(--err-bg);color:var(--ink)} .alert--err b{color:var(--err)}
  .alert--warn{background:var(--wait-bg);color:var(--ink)} .alert--warn b{color:var(--wait)}
  #f-submit[aria-busy="true"]{opacity:.75;cursor:progress}
.progress{margin-top:4px}
.dept{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.dept label{min-height:50px;border:1.5px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 14px;font-weight:700;cursor:pointer}
.dept input{accent-color:var(--navy);width:18px;height:18px}
.dept label:has(input:checked){border-color:var(--cyan);background:var(--surface)}
.remember{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:14px;color:var(--ink-2)}
.linkbtn{background:none;border:0;padding:0;color:var(--link);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;min-height:44px}
button[aria-busy="true"]{opacity:.75;cursor:progress}