/* Recruitment portal: applicant and nominator pages.
   Identity: graphite ink on white, one instrument-yellow signal. The signature element is the graduated
   scale (a measuring ruler) that shows where the applicant is in the form and in the selection process.
   Type: Beiruti, self-hosted. */

@font-face{font-family:"Beiruti";font-style:normal;font-weight:200 900;font-display:swap;src:url("/assets/fonts/beiruti-arabic.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Beiruti";font-style:normal;font-weight:200 900;font-display:swap;src:url("/assets/fonts/beiruti-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --font:"Beiruti","Noto Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  --paper:#FFFFFF;
  --ground:#F2F3F1;
  --ground-2:#E7E9E6;
  --ink:#15171A;
  --ink-2:#4B5158;
  --ink-3:#646A71;
  --rule:#E1E3E0;
  --rule-2:#CDD1CD;
  --edge:#8B9197;
  --signal:#F6B40E;
  --signal-hi:#FFC536;
  --signal-edge:#C98F00;
  --signal-tint:#FFF4D1;
  --signal-ink:#5E4300;
  --on-signal:#15171A;
  --ok:#1D7348;   --ok-bg:#E4F2EA;
  --warn:#8F4A00; --warn-bg:#FDEFD9;
  --bad:#B42318;  --bad-bg:#FCEAE8;
  --shadow-pop:0 18px 48px rgba(16,18,20,.16),0 2px 6px rgba(16,18,20,.08);
  --r-s:4px; --r-m:8px; --r-l:14px;
  --bar-h:60px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#1A1C1F; --ground:#111315; --ground-2:#24272B;
    --ink:#F1F2F3; --ink-2:#B4BAC1; --ink-3:#8D949C;
    --rule:#2C3035; --rule-2:#41464C; --edge:#6A7179;
    --signal-tint:#3A2F10; --signal-ink:#FFD566; --signal-edge:#F6B40E;
    --ok:#6FD39E; --ok-bg:#12321F; --warn:#FFB866; --warn-bg:#3A2610; --bad:#FF8A80; --bad-bg:#3D1714;
    --shadow-pop:0 18px 48px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17.5px;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
h1,h2,h3{text-wrap:balance;font-weight:750;line-height:1.3}
h1{font-size:clamp(27px,6.4vw,36px)}
h2{font-size:clamp(21px,4.8vw,25px)}
h3{font-size:18.5px;line-height:1.45}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
[tabindex="-1"]:focus{outline:none}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:760px;margin-inline:auto;padding-inline:20px}
.num{font-variant-numeric:tabular-nums}
.lead{max-width:60ch;color:var(--ink-2);font-size:19px;line-height:1.75}
.hint{font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.hint.center{text-align:center}
.loading{display:grid;place-items:center;min-height:50vh;color:var(--ink-2)}

/* ---------- top bar ---------- */
.appbar{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--bar-h)}
.appbar .wrap,.appbar .wrap-wide{max-width:1180px}
.brand{display:inline-flex;align-items:center;gap:11px;min-width:0;color:var(--ink);font-size:16.5px;font-weight:700;line-height:1.2;text-decoration:none}
.brand svg{flex:none;width:32px;height:32px}
.brand small{display:block;color:var(--ink-3);font-size:13px;font-weight:500}
.bar-end{display:flex;align-items:center;gap:10px;min-width:0}
.save{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);font-size:14px;white-space:nowrap}
.save i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.save.is-busy i{background:var(--ink-3)}
.save.is-error i{background:var(--warn)}
.tchip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--rule-2);border-radius:999px;color:var(--ink);font-size:15px;font-weight:650}
.tchip svg{width:16px;height:16px;color:var(--ink-2)}
.tchip b{direction:ltr;font-weight:700;font-variant-numeric:tabular-nums}
.tchip.low{border-color:var(--warn);background:var(--warn-bg);color:var(--warn)}
.tchip.low svg{color:var(--warn)}

/* ---------- the graduated scale ---------- */
.progress{padding:2px 0 12px}
.scale{display:flex;height:16px;margin-top:4px}
.scale .seg{position:relative;flex:1;color:var(--rule-2);border-inline-start:1.5px solid currentColor;
  background:repeating-linear-gradient(to left,currentColor 0 1px,transparent 1px 25%) left bottom/100% 6px no-repeat}
.scale .seg:last-child{border-inline-end:1.5px solid currentColor}
.scale .seg::after{content:"";position:absolute;inset-inline:-1.5px;bottom:-5px;height:3px;background:currentColor}
.scale .seg.done{color:var(--ink)}
.scale .seg.now{color:var(--ink)}
.scale .seg.now::after{height:5px;bottom:-6px;background:var(--signal);box-shadow:inset 0 -1px 0 var(--signal-edge)}
.progress-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:13px;color:var(--ink-2);font-size:15px;line-height:1.4}
.progress-label b{color:var(--ink);font-weight:700}
.progress-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- layout with the desktop rail ---------- */
.layout{width:100%}
.rail{display:none}
main{padding-block:28px 48px}
body.has-bar main{padding-bottom:128px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border:1px solid transparent;border-radius:var(--r-m);background:none;font-size:17px;font-weight:650;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn svg{flex:none;width:19px;height:19px}
.btn-primary{background:var(--signal);border-color:var(--signal-edge);color:var(--on-signal)}
.btn-primary:hover{background:var(--signal-hi)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-ghost{background:var(--paper);border-color:var(--edge);color:var(--ink)}
.btn-ghost:hover{background:var(--ground)}
.btn.sm{min-height:44px;padding:0 16px;font-size:15.5px}
.btn.xs{min-height:36px;padding:0 12px;border-radius:6px;font-size:14px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible,.link-btn:focus-visible,.icon-btn:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px}
.link-btn{padding:6px 2px;border:0;background:none;color:var(--ink);font-size:15px;font-weight:650;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.link-btn.danger{color:var(--bad)}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--rule-2);border-radius:var(--r-m);background:var(--paper);color:var(--ink-2);cursor:pointer}
.icon-btn:hover{border-color:var(--edge);color:var(--ink)}
.icon-btn svg{width:19px;height:19px}

/* ---------- step head and sections ---------- */
.step-head{display:grid;gap:10px;margin-bottom:22px}
.step-no{color:var(--ink-3);font-size:15px;font-weight:600}
.sheet{display:grid}
.sect{display:grid;gap:18px;padding-block:26px;border-top:1px solid var(--rule)}
.sect:first-child{padding-top:6px;border-top:0}
.sect.tight{gap:0}
.sect > h3{font-size:19px}
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 14px}
.field{grid-column:1/-1;display:grid;gap:8px;align-content:start;min-width:0}
.field.half{grid-column:span 1}
.lbl{color:var(--ink);font-size:16.5px;font-weight:650;line-height:1.5}
.opt-tag{margin-inline-start:5px;color:var(--ink-3);font-size:15px;font-weight:450}

/* ---------- inputs ---------- */
.in{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--edge);border-radius:var(--r-m);background:var(--paper);color:var(--ink);font-size:17px;line-height:1.45;transition:border-color .15s,box-shadow .15s}
.in:hover{border-color:var(--ink-2)}
.in:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--signal)}
.in::placeholder{color:var(--ink-3);opacity:1}
.in:disabled{background:var(--ground);border-color:var(--rule-2);color:var(--ink-2)}
.in[dir="ltr"]{text-align:right}
textarea.in{min-height:104px;line-height:1.65;resize:vertical}
select.in{appearance:none;-webkit-appearance:none;padding-inline-end:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858b92' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 14px center;background-size:18px}
.mono{letter-spacing:.06em;font-variant-numeric:tabular-nums}
input[type="date"].in{min-height:52px}

/* choices: short options read as a segmented control; the selected one turns ink */
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.opt{position:relative;display:block;min-width:0}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt span{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;min-height:50px;padding:10px 12px;border:1px solid var(--rule-2);border-radius:var(--r-m);background:var(--paper);color:var(--ink);font-size:16.5px;line-height:1.35;text-align:center;transition:background-color .12s,border-color .12s,color .12s}
.opt:hover span{border-color:var(--edge)}
.opt input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:650}
.opt input:focus-visible + span{outline:2.5px solid var(--ink);outline-offset:2px}
.opt input:disabled{cursor:default}
.opt input:disabled + span{opacity:.55}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .opt span{min-height:44px;padding:8px 16px;border-radius:999px}
.chips .opt input:checked + span::before{content:"";width:15px;height:15px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.check{display:flex;align-items:flex-start;gap:12px;font-size:16.5px;line-height:1.65;cursor:pointer}
.check input{flex:none;width:22px;height:22px;margin:3px 0 0;accent-color:var(--ink);cursor:pointer}

/* self-assessment: one joined five-step scale per skill */
.lk{display:grid;gap:22px}
.lk-row{display:grid;gap:10px;min-width:0}
.lk-q{font-size:16.5px;font-weight:550;line-height:1.55}
.lk-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--rule-2);border-radius:var(--r-m);overflow:hidden;background:var(--paper)}
.lk-scale .opt span{min-height:46px;padding:6px 2px;border:0;border-inline-start:1px solid var(--rule-2);border-radius:0;font-size:14px}
.lk-scale .opt:first-child span{border-inline-start:0}
.lk-scale .opt input:checked + span{border-color:var(--ink)}
.lk-scale .opt input:focus-visible + span{outline-offset:-4px;outline-color:var(--signal)}
.lk-legend{display:flex;justify-content:space-between;color:var(--ink-3);font-size:13.5px}

/* ---------- errors, banners, toast ---------- */
.has-err .in{border-color:var(--bad)}
.has-err .opt span,.has-err .lk-scale{border-color:var(--bad)}
.has-err > .lbl,.has-err > .lk-q,.has-err .lk-q{color:var(--bad)}
.err{display:flex;align-items:flex-start;gap:6px;color:var(--bad);font-size:15px;font-weight:550;line-height:1.5}
.err::before{content:"";flex:none;width:6px;height:6px;margin-top:9px;border-radius:50%;background:currentColor}
.banner{padding:13px 16px;border-radius:var(--r-m);font-size:16px;font-weight:550;line-height:1.6}
.banner.err-b{margin-bottom:16px;background:var(--bad-bg);color:var(--bad)}
.banner.ok-b{background:var(--ok-bg);color:var(--ok)}
.banner.warn-b{background:var(--warn-bg);color:var(--warn)}
.banner a{color:inherit;font-weight:700}
.toast{position:fixed;inset-inline:16px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:60;max-width:520px;margin-inline:auto;padding:13px 18px;border-radius:var(--r-m);background:var(--ink);color:var(--paper);font-size:15.5px;font-weight:550;text-align:center;box-shadow:var(--shadow-pop)}

/* ---------- repeated groups and the nomination card ---------- */
.rep{display:grid;gap:12px}
.rep-item{display:grid;gap:14px;padding:16px;border:1px solid var(--rule);border-radius:var(--r-l);background:var(--ground)}
.rep-item .in{background:var(--paper)}
.rep-head{display:flex;align-items:center;justify-content:space-between}
.nomcard{display:grid;gap:2px;padding:18px 20px;border:1px solid var(--rule);border-inline-start:4px solid var(--ink);border-radius:var(--r-m);background:var(--ground)}
.nomcard .who{font-size:19px;font-weight:700}

/* ---------- uploads ---------- */
.slots{gap:12px}
.slot{display:grid;gap:14px;padding:16px;border:1px solid var(--rule-2);border-radius:var(--r-l);background:var(--paper)}
.slot.is-done{border-color:var(--rule)}
.slot.has-err{border-color:var(--bad)}
.slot-top{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:start;gap:12px}
.slot-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-m);background:var(--ground);color:var(--ink-2)}
.slot-ic svg{width:22px;height:22px}
.slot.is-done .slot-ic{background:var(--ok-bg);color:var(--ok)}
.slot-top > div{display:grid;gap:2px;min-width:0}
.slot-top .hint{font-size:14px}
.badge{flex:none;padding:3px 10px;border-radius:999px;font-size:13.5px;font-weight:650;line-height:1.5;white-space:nowrap}
.badge.req{background:var(--signal-tint);color:var(--signal-ink)}
.badge.optl{background:var(--ground);color:var(--ink-2)}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick label.btn{position:relative;flex:1 1 140px}
.pick label.btn:focus-within{outline:2.5px solid var(--ink);outline-offset:2px}
/* the camera button opens the camera on phones and tablets only; computers would just show the file picker again */
@media (hover:hover) and (pointer:fine){.pick .cam{display:none}}
.flist{display:grid;gap:10px}
.fitem{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px;border-radius:var(--r-m);background:var(--ground)}
.fitem .acts{display:flex;gap:6px}
.thumb{display:grid;place-items:center;width:52px;height:52px;object-fit:cover;border-radius:6px;background:var(--paper);color:var(--ink-2);font-size:12px;font-weight:700;letter-spacing:.04em}
.fmeta{min-width:0}
.fname{overflow:hidden;font-size:15px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;unicode-bidi:plaintext;text-align:right}
.fsize{color:var(--ink-2);font-size:13.5px}
.count{text-align:left}
.fitem.is-err{background:var(--bad-bg)}
.fitem.is-err .fsize{color:var(--bad)}
.upbar{height:4px;margin-top:7px;overflow:hidden;border-radius:2px;background:var(--rule)}
.upbar i{display:block;width:0;height:100%;background:var(--ink);transition:width .2s}
.count-hint{color:var(--ink-3);font-size:14px}

/* ---------- the short test ---------- */
.test-intro{display:grid;gap:18px}
.facts-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;border:1px solid var(--rule-2);border-radius:var(--r-l);overflow:hidden}
.facts-row li{display:grid;gap:0;justify-items:center;padding:16px 8px;border-inline-start:1px solid var(--rule-2);text-align:center}
.facts-row li:first-child{border-inline-start:0}
.facts-row b{font-size:34px;font-weight:750;line-height:1.1;font-variant-numeric:proportional-nums}
.facts-row span{color:var(--ink-2);font-size:14.5px;line-height:1.4}
.test-bar{position:sticky;top:calc(var(--bar-h) + 74px);z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;padding:10px 14px;border:1px solid var(--rule);border-radius:var(--r-m);background:var(--paper);color:var(--ink-2);font-size:15.5px}
.test-bar b{color:var(--ink)}
.test-bar .timer{direction:ltr;color:var(--ink);font-size:18px;font-weight:750;font-variant-numeric:tabular-nums}
.q{display:grid;gap:12px;padding-block:22px;border-top:1px solid var(--rule)}
.q:first-of-type{border-top:0}
.qn{color:var(--ink-3);font-size:14.5px;font-weight:650;font-variant-numeric:tabular-nums}
.qt{font-size:18px;font-weight:650;line-height:1.6}
.ans{display:grid;gap:8px}
.ans .opt span{justify-content:flex-start;gap:12px;min-height:54px;padding:12px 14px;text-align:start;font-size:16.5px}
.ans .opt span::before{content:"";flex:none;width:20px;height:20px;border:2px solid var(--edge);border-radius:50%;background:var(--paper)}
.ans .opt input:checked + span{background:var(--signal-tint);border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-weight:600}
.ans .opt input:checked + span::before{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 4px var(--paper)}
.finish{display:grid;gap:12px;padding-block:22px 4px;border-top:1px solid var(--rule)}
.row-btns{display:flex;flex-wrap:wrap;gap:10px}
.row-btns .btn{flex:1 1 150px}
.row-btns.center{justify-content:center;width:100%;max-width:440px}
.confirm .row-btns .btn{flex-basis:200px}

/* ---------- review ---------- */
.summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;margin:0;padding:18px 20px;border-radius:var(--r-l);background:var(--ground);font-size:16px}
.summary dt{color:var(--ink-2)}
.summary dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.checklist{display:grid;margin:0;padding:0;list-style:none}
.rv-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding-block:14px;border-top:1px solid var(--rule)}
.rv-row:first-child{border-top:0}
.rv-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ground);color:var(--ink-2);font-size:14px;font-weight:700}
.rv-row.ok .rv-num{background:var(--ink);color:var(--paper)}
.rv-t{font-weight:600}
.state{padding:3px 10px;border-radius:999px;font-size:14px;font-weight:650;white-space:nowrap}
.state.ok{background:var(--ok-bg);color:var(--ok)}
.state.bad{background:var(--bad-bg);color:var(--bad)}
.captcha{display:grid;justify-items:center;padding-block:6px}

/* ---------- confirmation and the code label ---------- */
.confirm{display:grid;justify-items:center;gap:16px;padding-block:28px 8px;text-align:center}
.confirm .lead{margin-inline:auto}
.done-ic{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--ink);color:var(--signal)}
.done-ic.warn{background:var(--warn-bg);color:var(--warn)}
.done-ic svg{width:36px;height:36px}
.label{display:grid;gap:2px;justify-items:center;min-width:250px;padding:14px 26px 16px;border:1.5px solid var(--ink);border-radius:var(--r-m);background:var(--paper);
  background-image:repeating-linear-gradient(to left,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 10px);background-size:100% 5px;background-repeat:no-repeat;background-position:bottom}
.label small{color:var(--ink-3);font-size:13.5px;font-weight:600}
.label b{direction:ltr;font-size:31px;font-weight:750;letter-spacing:.06em;line-height:1.25;font-variant-numeric:tabular-nums}
.next{width:100%;max-width:600px;margin-top:10px;padding:22px 20px;border:1px solid var(--rule);border-radius:var(--r-l);text-align:start}
.next h2{font-size:19px;margin-bottom:14px}

/* ---------- landing: the job posting ---------- */
.landing main{padding:0}
.hero{padding-block:36px 8px}
.hero-grid{display:grid;gap:28px;grid-template-areas:"head" "entry" "facts"}
.hero-head{grid-area:head}
.hero-grid > .entry{grid-area:entry}
.hero-grid > .jobfacts{grid-area:facts}
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--ink-2);font-size:15.5px;font-weight:600}
.tag{display:inline-flex;align-items:center;padding:3px 12px;border-radius:var(--r-s);background:var(--signal);color:var(--on-signal);font-size:14.5px;font-weight:750}
.hero h1{margin-top:16px;font-size:clamp(34px,8.6vw,58px);font-weight:800;line-height:1.12;letter-spacing:-.005em}
.hero h1 .sub{display:block;margin-top:8px;color:var(--ink-2);font-size:.5em;font-weight:600;line-height:1.3}
.hero .lead{margin-top:18px}
.jobfacts{display:grid;gap:0;border-top:1px solid var(--rule)}
.jobfacts div{display:grid;grid-template-columns:minmax(104px,auto) minmax(0,1fr);gap:16px;padding-block:13px;border-bottom:1px solid var(--rule)}
.jobfacts dt{color:var(--ink-3);font-size:15px;font-weight:600}
.jobfacts dd{font-size:17px;font-weight:550;line-height:1.6}
.entry{display:grid;gap:16px;padding:22px 20px;border:1px solid var(--rule-2);border-radius:var(--r-l);background:var(--paper)}
.entry h2{font-size:22px}
.entry .hint{margin-top:-6px}
.code-in{direction:ltr;font-size:21px;font-weight:700;letter-spacing:.12em;text-align:center!important;text-transform:uppercase;font-variant-numeric:tabular-nums}
.code-in::placeholder{letter-spacing:.08em}
.or-line{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink-2);font-size:15px}
.prep{display:grid;gap:14px;align-content:start}
.prep h2,.stages h2{font-size:20px}
.prep ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.prep li{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px;font-size:17px;font-weight:550}
.prep li span:first-child{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-m);background:var(--ground);color:var(--ink)}
.prep li svg{width:21px;height:21px}
.landing-info{display:grid;gap:36px;padding-block:36px 8px}

/* the selection process drawn on a ruler: one station per stage */
.stages{display:grid;gap:18px;align-content:start}
.stage-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none;counter-reset:st}
.stage-scale li{position:relative;display:grid;align-content:start;gap:2px;padding:30px 0 0;padding-inline-end:10px;color:var(--ink-2);font-size:14.5px;line-height:1.45}
.stage-scale li::before{content:"";position:absolute;top:10px;inset-inline:0;height:10px;border-inline-start:1.5px solid var(--rule-2);
  background:repeating-linear-gradient(to left,var(--rule-2) 0 1px,transparent 1px 25%) left bottom/100% 6px no-repeat;border-bottom:2px solid var(--rule-2)}
.stage-scale li:last-child::before{border-inline-end:1.5px solid var(--rule-2)}
.stage-scale li b{color:var(--ink);font-size:16px;font-weight:700}
.stage-scale li.here::before{border-bottom-color:var(--signal);border-bottom-width:4px;height:12px}
.stage-scale li.here::after{content:"";position:absolute;top:0;inset-inline-start:-6px;width:12px;height:12px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px var(--paper),0 0 0 4.5px var(--ink)}
.stage-scale li.passed::before{border-color:var(--ink);background-image:repeating-linear-gradient(to left,var(--ink) 0 1px,transparent 1px 25%);border-bottom-color:var(--ink)}
.privacy{display:flex;align-items:flex-start;gap:12px;margin-block:36px 28px;padding:16px 18px;border-radius:var(--r-l);background:var(--ground);color:var(--ink-2);font-size:15px;line-height:1.65}
.privacy svg{flex:none;width:22px;height:22px;margin-top:2px;color:var(--ink)}

/* ---------- nominator form ---------- */
#nomForm{display:grid;gap:18px}
.stu-list{display:grid;gap:18px}
.stu{display:grid;gap:22px;padding:20px 18px;border:1px solid var(--rule-2);border-radius:var(--r-l);background:var(--paper)}
.stu-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stu-head h3{display:flex;align-items:center;gap:10px}
.stu-head h3 span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:15px}
.panel-plain{display:grid;gap:18px;padding:20px 18px;border:1px solid var(--rule);border-radius:var(--r-l);background:var(--ground)}
.panel-plain .in{background:var(--paper)}
.panel-plain .in:disabled{background:var(--ground-2)}

/* ---------- fixed action bar ---------- */
.actionbar{position:fixed;inset-inline:0;bottom:0;z-index:40;padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid var(--rule);background:var(--paper)}
.actionbar .wrap{display:flex;gap:10px;padding-block:12px}
.actionbar .btn-primary,.actionbar .btn-dark{flex:1 1 auto}
.actionbar .btn-ghost{flex:0 0 auto}

/* ---------- wider screens ---------- */
@media (min-width:720px){
  .wrap{padding-inline:32px}
  main{padding-block:40px 56px}
  .sect{padding-block:30px}
  .entry{padding:28px 28px 26px}
  .stu,.panel-plain{padding:26px 26px}
  .landing-info{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px;padding-top:48px}
}
@media (min-width:1100px){
  .appbar .bar{min-height:68px}
  :root{--bar-h:68px}
  .layout.has-rail{display:grid;grid-template-columns:280px minmax(0,1fr);gap:64px;max-width:1180px;margin-inline:auto;padding-inline:32px}
  .layout.has-rail main .wrap{max-width:740px;margin-inline:0;padding-inline:0}
  .layout.has-rail .rail{display:block;position:sticky;top:calc(var(--bar-h) + 40px);align-self:start;padding-top:40px}
  .layout.has-rail ~ .actionbar .wrap{max-width:1180px;padding-inline:calc(32px + 280px + 64px) 32px}
  .layout.has-rail ~ .actionbar .wrap > div,.actionbar .wrap{justify-content:flex-start}
  .actionbar .btn-primary{flex:0 0 auto;min-width:240px;margin-inline-start:auto}
  .actionbar .btn-ghost{min-width:150px}
  .actionbar .wrap{max-width:740px}
  .appbar .progress{display:none}
  .step-head .step-no{display:block}
  .test-bar{top:calc(var(--bar-h) + 12px)}
  .hero{padding-block:64px 24px}
  .hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(360px,1fr);grid-template-areas:"head entry" "facts entry";column-gap:72px;row-gap:8px;align-items:start}
  .hero-grid .entry{position:sticky;top:calc(var(--bar-h) + 28px)}
  .landing .wrap{max-width:1180px}
}
@media (max-width:1099.98px){
  .step-head .step-no{display:none}
}
@media (max-width:420px){
  .wrap{padding-inline:16px}
  .lk-scale .opt span{font-size:13px}
  .stage-scale li{font-size:13.5px}
  .stage-scale li b{font-size:15px}
  .label b{font-size:26px}
}

/* the vertical scale in the desktop rail */
.rail-job{color:var(--ink-3);font-size:14.5px;font-weight:600;line-height:1.5}
.rail-title{margin-top:4px;font-size:19px;font-weight:750;line-height:1.4}
.vscale{position:relative;display:grid;margin:26px 0 0;padding:0;list-style:none}
.vscale li{position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding-inline-start:30px;color:var(--ink-3);font-size:16px;font-weight:550}
.vscale li::before{content:"";position:absolute;inset-block:0;inset-inline-start:7px;width:2px;background:var(--rule-2)}
.vscale li:first-child::before{top:50%}
.vscale li:last-child::before{bottom:50%}
.vscale li::after{content:"";position:absolute;top:calc(50% - 1px);inset-inline-start:7px;width:12px;height:2px;background:var(--rule-2)}
.vscale li.done{color:var(--ink-2)}
.vscale li.done::before,.vscale li.done::after,.vscale li.now::before{background:var(--ink)}
.vscale li.now{color:var(--ink);font-weight:750}
.vscale li.now::after{top:calc(50% - 7px);inset-inline-start:1px;width:14px;height:14px;border-radius:3px;background:var(--signal);box-shadow:0 0 0 2px var(--ink)}
.vscale .ix{min-width:20px;color:inherit;font-size:14px;font-variant-numeric:tabular-nums}
.rail-note{display:grid;gap:4px;margin-top:28px;padding-top:18px;border-top:1px solid var(--rule);color:var(--ink-2);font-size:14.5px;line-height:1.6}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.appbar,.actionbar,.toast,.rail{display:none!important}}

/* ---------- brand mark ---------- */
.mark .mk-tile{fill:var(--ink)}
.mark .mk-line{stroke:var(--paper)}
.mark .mk-hot{stroke:var(--signal)}

@media (max-width:559.98px){
  .stage-scale{grid-template-columns:minmax(0,1fr)}
  .stage-scale li{grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:10px;padding:10px 0;padding-inline-start:34px;font-size:15px}
  .stage-scale li::before{top:0;bottom:0;height:auto;inset-inline-start:7px;inset-inline-end:auto;width:12px;border-inline-start:2px solid var(--rule-2);border-inline-end:0;border-bottom:0;background:linear-gradient(var(--rule-2),var(--rule-2)) right 0 top 50%/12px 2px no-repeat}
  .stage-scale li:last-child::before{border-inline-end:0;bottom:50%}
  .stage-scale li:first-child::before{top:50%}
  .stage-scale li.here::before{border-bottom:0;height:auto;background:linear-gradient(var(--signal),var(--signal)) right 0 top 50%/12px 4px no-repeat}
  .stage-scale li.here::after{top:calc(50% - 6px);inset-inline-start:2px}
  .stage-scale li.passed::before{border-inline-start-color:var(--ink);background:linear-gradient(var(--ink),var(--ink)) right 0 top 50%/12px 2px no-repeat}
  .stage-scale li b{font-size:16px}
}

@media (max-width:480px){.bar:has(.tchip) .brand small{display:none}}
.narrow .appbar .wrap{max-width:760px}