/* IT Quiz Challenge — Route Map design tokens and shared parts */
:root{
  --ground:#E9E6DD; --paper:#FAF8F3; --ink:#14171A; --ink2:#4C4F52; --rule:#DCD7CA; --rule2:#C4BEAF; --hover:#F0EDE5;
  --tech:#DA291C; --net:#007A3D; --eng:#0057B8;
  --sa:#F0AB00; --sb:#9B5A1A; --sc:#7C8389;
  --tc:var(--tech);
  --display:'Archivo','Arial Narrow',sans-serif;
  --body:'Archivo','IBM Plex Sans Arabic','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
  --glide:cubic-bezier(.65,0,.35,1);
}
html[lang="ar"]{
  --display:'IBM Plex Sans Arabic','Archivo',sans-serif;
  --body:'IBM Plex Sans Arabic','Archivo',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--eng);outline-offset:3px}

.display{font-family:var(--display);font-stretch:78%;font-weight:800;letter-spacing:-.012em;line-height:.92}
html[lang="ar"] .display{font-weight:700;letter-spacing:0;line-height:1.15}

.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-weight:600;font-size:15px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand svg{flex:none}
html[dir="rtl"] .mirror{transform:scaleX(-1)}

.lang{min-width:76px;height:40px;padding:0 12px;border:2px solid var(--ink);background:transparent;font-weight:700;font-size:15px;transition:background .15s,transform .12s var(--ease)}
.lang:hover{background:var(--hover)} .lang:active{transform:scale(.95)}
.lang .ar{font-family:'IBM Plex Sans Arabic',sans-serif}
.lang .en{font-family:'Archivo',sans-serif}

.btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:58px;padding:0 20px;
  border:2px solid var(--ink);border-radius:0;background:var(--ink);color:var(--paper);
  font-family:var(--display);font-stretch:88%;font-weight:700;font-size:20px;
  transition:transform .12s var(--ease),background .15s,color .15s,border-color .15s}
a.btn{text-decoration:none}
.btn:hover{background:#2B2F33}
.btn:active{transform:scale(.98)}
.btn .arr{transition:transform .25s var(--ease);flex:none}
.btn:hover .arr{transform:translateX(4px)}
html[dir="rtl"] .btn .arr{transform:scaleX(-1)}
html[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(4px)}
.btn[disabled]{background:transparent;color:#77797B;border-color:var(--rule2);cursor:not-allowed;transform:none}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--hover)}
.btn.small{min-height:44px;font-size:16px;padding:0 14px;width:auto}

.swatch{display:inline-block;height:10px;width:30px;border-radius:5px;background:var(--c,var(--tc));flex:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
}