/* YoCodex — letters, kleuren, bovenbalk en knoppen. Gedeeld door yocodex.com, account/beheer, Cardex en de Grader. */
@font-face{font-family:'Bricolage';font-weight:600;font-display:swap;src:url('/assets/fonts/bricolage-600-lat.woff2') format('woff2')}
@font-face{font-family:'Bricolage';font-weight:800;font-display:swap;src:url('/assets/fonts/bricolage-800-lat.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:400;font-display:swap;src:url('/assets/fonts/archivo-400-normal-lat.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:600;font-display:swap;src:url('/assets/fonts/archivo-600-normal-lat.woff2') format('woff2')}
@font-face{font-family:'PlexMono';font-weight:500;font-display:swap;src:url('/assets/fonts/plexmono-500-normal-lat.woff2') format('woff2')}

:root{
  --ycx-bg:#F6F4EF; --ycx-vlak:#FFFFFF; --ycx-vlak2:#FBFAF7;
  --ycx-inkt:#15151A; --ycx-tekst:#2E2D31; --ycx-zacht:#6E6B64; --ycx-licht:#9A968D;
  --ycx-lijn:#E5E1D8; --ycx-lijn2:#D3CEC3;
  --ycx-accent:#D23B24; --ycx-accent-zacht:#FCEDEA;
  --ycx-ok:#1E7A4C; --ycx-ok-zacht:#E7F4ED; --ycx-fout:#B42318; --ycx-fout-zacht:#FDECEA;
  --ycx-r:10px; --ycx-schaduw:0 1px 2px rgba(21,21,26,.05),0 4px 16px rgba(21,21,26,.05);
  --ycx-kop:'Bricolage',system-ui,sans-serif; --ycx-body:'Archivo',system-ui,sans-serif; --ycx-mono:'PlexMono',ui-monospace,monospace;
}
/* ---- bovenbalk (ook gebruikt door shell.js in Cardex en de Grader) ---- */
.ycx-top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(150%) blur(10px);-webkit-backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--ycx-lijn);font-family:var(--ycx-body)}
.ycx-top-in{max-width:1200px;margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;gap:28px}
.ycx-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ycx-inkt);font:800 19px/1 var(--ycx-kop);letter-spacing:-.01em;flex:none}
.ycx-mark{width:26px;height:26px}
.ycx-nav{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.ycx-nav::-webkit-scrollbar{display:none}
.ycx-nav a{padding:7px 12px;border-radius:8px;text-decoration:none;color:var(--ycx-zacht);font-size:15px;white-space:nowrap}
.ycx-nav a:hover{color:var(--ycx-inkt);background:var(--ycx-vlak2)}
.ycx-nav a.aan{color:var(--ycx-inkt);background:var(--ycx-bg);font-weight:600}
.ycx-acc{flex:none;position:relative}
.ycx-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border:1px solid var(--ycx-lijn);border-radius:999px;font-size:14px;font-weight:600;color:var(--ycx-inkt);background:var(--ycx-vlak)}
.ycx-menu summary::-webkit-details-marker{display:none}
.ycx-menu summary::before{content:attr(data-letter);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ycx-inkt);color:#fff;font-size:12px}
.ycx-menu summary:not([data-letter])::before{content:"";background:var(--ycx-lijn2)}
.ycx-menu>div{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:var(--ycx-vlak);border:1px solid var(--ycx-lijn);border-radius:var(--ycx-r);box-shadow:var(--ycx-schaduw);padding:6px;display:flex;flex-direction:column}
.ycx-menu>div a,.ycx-menu>div button{display:block;text-align:left;padding:9px 12px;border-radius:7px;text-decoration:none;color:var(--ycx-tekst);font:inherit;font-size:14px;background:none;border:0;cursor:pointer;width:100%}
.ycx-menu>div a:hover,.ycx-menu>div button:hover{background:var(--ycx-bg)}
.ycx-menu form{margin:0;border-top:1px solid var(--ycx-lijn);margin-top:4px;padding-top:4px}

/* ---- knoppen ---- */
.ycx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:8px;border:1px solid var(--ycx-inkt);background:var(--ycx-inkt);color:#fff;font:600 15px/1 var(--ycx-body);text-decoration:none;cursor:pointer}
.ycx-btn:hover{background:#2B2B33}
.ycx-btn.sm{min-height:34px;padding:0 13px;font-size:14px}
.ycx-btn.licht{background:var(--ycx-vlak);color:var(--ycx-inkt);border-color:var(--ycx-lijn2)}
.ycx-btn.licht:hover{border-color:var(--ycx-inkt)}
.ycx-btn.accent{background:var(--ycx-accent);border-color:var(--ycx-accent)}
.ycx-btn.vol{width:100%}

/* ---- knoppen ---- */
.ycx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:8px;border:1px solid var(--ycx-inkt);background:var(--ycx-inkt);color:#fff;font:600 15px/1 var(--ycx-body);text-decoration:none;cursor:pointer}
.ycx-btn:hover{background:#2B2B33}
.ycx-btn.sm{min-height:34px;padding:0 13px;font-size:14px}
.ycx-btn.licht{background:var(--ycx-vlak);color:var(--ycx-inkt);border-color:var(--ycx-lijn2)}
.ycx-btn.licht:hover{border-color:var(--ycx-inkt)}
.ycx-btn.accent{background:var(--ycx-accent);border-color:var(--ycx-accent)}
.ycx-btn.vol{width:100%}

/* ---- ingebed in Cardex en de Grader: hun eigen kop wordt het tweede niveau onder de YoCodex-balk ---- */
html.ycx-ingebed body{padding-top:0}
.ycx-top{font-size:16px;line-height:1.4}
.ycx-top *{box-sizing:border-box}
.ycx-top a{text-decoration:none}

/* Grader */
html.ycx-app-grading{--sans:'Archivo',system-ui,sans-serif;--accent:#D23B24;--accent-dark:#B02E1A;--accent-soft:rgba(210,59,36,.07);
  --bg:#F6F4EF;--surface2:#F6F4EF;--line:#E5E1D8;--line-strong:#D3CEC3;--text:#15151A;--muted:#6E6B64}
html.ycx-app-grading .topbar{top:60px;background:#FFFFFF}
html.ycx-app-grading .topbar .brand,html.ycx-app-grading .topbar .who{display:none}
html.ycx-app-grading .topbar-inner{height:48px;max-width:1200px}
html.ycx-app-grading .app{max-width:1200px}
html.ycx-app-grading h1{font-family:'Bricolage',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em}
@media (max-width:899px){html.ycx-app-grading .topbar{display:none}}

/* Cardex */
html.ycx-app-cardex{--bg:#F6F4EF;--bg2:#EFECE5;--paneel:#FFFFFF;--paneel2:#FBFAF7;--paneel3:#F3F0EA;--tx:#15151A;--tx2:#4A4842;--tx3:#7C7970}
html.ycx-app-cardex header.top{top:60px}
html.ycx-app-cardex header.top .logo,html.ycx-app-cardex header.top .themaknop,html.ycx-app-cardex header.top a[href$="/logout.php"]{display:none}
html.ycx-app-cardex header.top .inner{height:auto;min-height:52px;padding-top:6px;padding-bottom:6px}
html.ycx-app-cardex .ycx-top-in{max-width:1560px;padding:0 26px}
html.ycx-app-cardex body::before{display:none}
html.ycx-app-cardex body{background:var(--bg)}
@media (max-width:640px){html.ycx-app-cardex header.top{top:0}}

@media (max-width:640px){
  .ycx-top-in,html.ycx-app-cardex .ycx-top-in{padding:0 12px;gap:10px}
  .ycx-brand span{display:none}
  .ycx-nav a{padding:7px 10px;font-size:14px}
  .ycx-menu summary{padding:4px;gap:0;font-size:0}
  .ycx-menu summary::before{font-size:12px}
}