/* ==========================================================================
   devdash.css — herbruikbare mini-site shell voor IVTO-ontwikkeldashboards.
   Bedoeld voor pagina's die head.php in 'bare'-modus gebruiken: eigen,
   geisoleerde layout binnen het IVTO-raamwerk. Bevat de zelf-gehoste fonts,
   de IVTO-miniheader en de skip-link. De inhoudelijke stijl van een specifiek
   dashboard staat in een eigen content-CSS (bv. dashboard-hbo.css).
   ========================================================================== */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap;}
@font-face{font-family:"Manrope";src:url("../fonts/manrope.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}

.skip-link{position:absolute;left:-9999px;top:0;background:#0D1828;color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;top:0;}

/* IVTO-miniheader: klein, sticky, met logo, context en weg-terug naar de publicatie */
.devdash-topbar{position:sticky;top:0;z-index:50;background:#0D1828;border-bottom:1px solid rgba(192,150,58,.22);}
.devdash-topbar__inner{max-width:1080px;margin:0 auto;padding:0 24px;min-height:52px;display:flex;align-items:center;gap:16px;}
.devdash-topbar__brand{display:inline-flex;align-items:center;flex:none;}
.devdash-topbar__brand img{height:22px;width:auto;display:block;}
.devdash-topbar__sep{width:1px;height:22px;background:rgba(243,238,228,.18);flex:none;}
.devdash-topbar__ctx{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.05em;color:rgba(243,238,228,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.devdash-topbar__back{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;font-family:"Manrope",system-ui,sans-serif;font-size:13.5px;font-weight:600;color:#E3C593;text-decoration:none;padding:7px 13px;border:1px solid rgba(192,150,58,.32);border-radius:999px;transition:background .18s,border-color .18s;}
.devdash-topbar__back:hover{background:rgba(192,150,58,.12);border-color:rgba(192,150,58,.55);}
.devdash-topbar__back svg{width:14px;height:14px;flex:none;}
.devdash-topbar__inner .share-btn{flex:none;display:inline-flex;align-items:center;gap:6px;font-family:"Manrope",system-ui,sans-serif;font-size:13px;font-weight:600;color:rgba(243,238,228,.6);background:transparent;border:0;border-radius:8px;padding:6px 10px;cursor:pointer;transition:color .18s,background .18s;}
.devdash-topbar__inner .share-btn:hover,.devdash-topbar__inner .share-btn:focus-visible{color:#E3C593;background:rgba(192,150,58,.12);}
.devdash-topbar__inner .share-btn svg{width:15px;height:15px;flex:none;}
.devdash-topbar__inner .share-btn.is-copied{color:#E3C593;}
@media(max-width:560px){.devdash-topbar__inner .share-btn .share-btn__label{display:none;}.devdash-topbar__inner .share-btn{padding:8px;}}
@media (max-width:640px){
  .devdash-topbar__ctx{display:none;}
  .devdash-topbar__back span{display:none;}
  .devdash-topbar__back{padding:8px;}
}