/* Qoinomics Education – inlogscherm in de huisstijl van de voorpagina (1-11-2026).
   Real People. Real Economy. · Deep teal #103A38 · Ivory #F5F1E9 · Orange #FF7417 · Sage #A5B5A1 · Charcoal #202726 · Montserrat.
   Geladen NA education-auth.css en qn-edu.css; geldt alleen op de inlogschermen (body.auth-mode). */
body.auth-mode{background:#F5F1E9;font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;color:#202726;margin:0}
body.auth-mode > header{display:none}
body.auth-mode main{max-width:none;padding:0;margin:0}
body.auth-mode .auth-layout{display:flex;min-height:100vh;min-height:100dvh;border:0;border-radius:0;box-shadow:none;background:#F5F1E9;grid-template-columns:none}

/* menu links */
body.auth-mode .auth-menu{flex:0 0 290px;position:sticky;top:0;height:100vh;height:100dvh;background:#fff;box-shadow:1px 0 0 #DDD5C6;display:flex;flex-direction:column;gap:32px;padding:34px 28px;box-sizing:border-box;overflow:auto;z-index:2}
body.auth-mode .am-brand{display:flex;flex-direction:column;gap:10px;color:#103A38;text-decoration:none}
body.auth-mode .am-brand img{width:110px;height:110px;object-fit:contain;display:block}
body.auth-mode .am-name{font:800 26px/1.05 Montserrat,sans-serif;letter-spacing:-.01em}
body.auth-mode .am-name b{color:#C2500A;font-weight:800}
body.auth-mode .am-slogan{font:600 11px Montserrat,sans-serif;letter-spacing:.24em;color:#4A5250}
body.auth-mode .am-nav{display:flex;flex-direction:column;gap:2px}
body.auth-mode .am-nav button,body.auth-mode .am-nav a{display:flex;align-items:center;min-height:52px;padding:0 14px;border:0;background:transparent;color:#103A38;font:600 16px Montserrat,sans-serif;text-align:left;text-decoration:none;cursor:pointer;border-radius:0}
body.auth-mode .am-nav button:hover,body.auth-mode .am-nav a:hover{background:#F5F1E9}
body.auth-mode .am-nav .on{background:#FF7417;color:#202726}
body.auth-mode .am-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
body.auth-mode .am-home{display:flex;align-items:center;justify-content:center;min-height:48px;color:#103A38;text-decoration:none;font-weight:600;box-shadow:inset 0 0 0 2px #103A38}
body.auth-mode .am-home:hover{background:#F5F1E9}
body.auth-mode .am-foot > span{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.5;color:#4A5250}
body.auth-mode .am-foot > span svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px}
body.auth-mode a:focus-visible,body.auth-mode button:focus-visible,body.auth-mode input:focus-visible{outline:3px solid #FF7417;outline-offset:2px}

/* het verhaal: de schoolfilm (of de getekende stad) */
body.auth-mode .auth-story{flex:1 1 420px;min-width:0;position:relative;background:#103A38;color:#fff;padding:48px 52px;display:flex;flex-direction:column;overflow:hidden;font-family:Montserrat,sans-serif}
body.auth-mode .story-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;z-index:0}
body.auth-mode .auth-story.has-video{background:#202726;justify-content:flex-end}
body.auth-mode .auth-story.has-video .story-video{opacity:1}
body.auth-mode .auth-story.has-video::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(32,39,38,.05) 35%,rgba(32,39,38,.85) 100%)}
body.auth-mode .auth-story.has-video .story-city,body.auth-mode .auth-story.has-video .story-bottom{display:none}
body.auth-mode .auth-story > *:not(.story-video){position:relative;z-index:1}
body.auth-mode .story-tag{align-self:flex-start;color:#fff;background:rgba(32,39,38,.6);padding:7px 12px;font-size:12px;font-weight:700;letter-spacing:.1em}
body.auth-mode .story-tag > span{background:#A5B5A1}
body.auth-mode .auth-story h2{font:800 clamp(40px,4.4vw,64px)/1 Montserrat,sans-serif;letter-spacing:-.02em;margin-top:18px}
body.auth-mode .auth-story h2 em{color:#FF7417}
body.auth-mode .auth-story > p{color:#F5F1E9;font-size:17px;line-height:1.6;max-width:40ch}
body.auth-mode .city-note{font-family:Montserrat,sans-serif}

/* het inlogvak */
body.auth-mode .auth-panel{flex:0 1 540px;min-width:0;background:#fff;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:56px 48px;box-sizing:border-box;font-family:Montserrat,sans-serif}
body.auth-mode .auth-wide .auth-panel{flex-basis:620px}
body.auth-mode .auth-eyebrow{color:#C2500A;font-size:13px;font-weight:700;letter-spacing:.12em}
body.auth-mode .auth-panel h1{font:800 clamp(34px,3vw,44px)/1.05 Montserrat,sans-serif;color:#103A38;letter-spacing:-.015em}
body.auth-mode .auth-description{color:#4A5250;font-size:16px}
body.auth-mode .auth-switch{background:#ECE6DA;border:0;border-radius:0;padding:4px}
body.auth-mode .auth-switch button{border-radius:0;min-height:46px;font:600 15px Montserrat,sans-serif;color:#4A5250}
body.auth-mode .auth-switch button.on{background:#fff;color:#103A38;box-shadow:none}
body.auth-mode .auth-panel label{color:#202726;font-size:14px;font-weight:600}
body.auth-mode .auth-panel input:not([type=checkbox]){border:2px solid #DDD5C6;border-radius:0;min-height:52px;font:500 16px Montserrat,sans-serif;color:#202726}
body.auth-mode .auth-panel input:not([type=checkbox]):focus{border-color:#103A38;box-shadow:none}
/* (qn-edu.css zet elke .btn met !important op navy; hier winnen we dat terug voor de inlogschermen) */
body.auth-mode .auth-panel .btn.auth-primary{background:#FF7417 !important;border-color:#FF7417 !important;color:#202726 !important;border-radius:0 !important;min-height:56px;font:700 16px Montserrat,sans-serif !important;text-transform:none !important;letter-spacing:0 !important}
body.auth-mode .auth-panel .btn.auth-primary:hover{background:#ff8a3d !important;border-color:#ff8a3d !important}
body.auth-mode .auth-panel .btn.auth-primary:disabled{background:#f4c7a6 !important;border-color:#f4c7a6 !important;color:#4A5250 !important}
body.auth-mode .auth-panel .btn.ghost{background:#fff !important;color:#103A38 !important;border-color:#103A38 !important;text-transform:none !important;letter-spacing:0 !important;font:600 15px Montserrat,sans-serif !important}
body.auth-mode .auth-panel .lnk,body.auth-mode .auth-form-meta .lnk{color:#103A38}
body.auth-mode .auth-footer{color:#4A5250;font-size:13px}
body.auth-mode .auth-bottom{display:none}

/* tablet en telefoon: het menu als balk bovenaan, de film als band, het inlogvak eronder */
@media (max-width:960px){
  body.auth-mode .auth-layout{flex-direction:column}
  body.auth-mode .auth-menu{position:sticky;top:0;height:auto;flex:none;flex-direction:row;align-items:center;gap:12px;padding:10px 16px}
  body.auth-mode .am-brand{flex-direction:row;align-items:center;gap:10px}
  body.auth-mode .am-brand img{width:44px;height:44px}
  body.auth-mode .am-name{font-size:17px}
  body.auth-mode .am-name br{display:none}
  body.auth-mode .am-slogan,body.auth-mode .am-foot{display:none}
  body.auth-mode .am-nav{flex-direction:row;margin-left:auto}
  body.auth-mode .am-nav button,body.auth-mode .am-nav a{min-height:44px;font-size:14px;padding:0 10px}
  body.auth-mode .am-nav a{display:none}
  body.auth-mode .auth-story{flex:none;min-height:44vh;padding:28px 22px}
  body.auth-mode .auth-panel{flex:none;padding:36px 22px}
}
@media (max-width:600px){ body.auth-mode .am-nav button:not(.on){display:none} }
@media (prefers-reduced-motion:reduce){ body.auth-mode .story-video{display:none} }