/* i-Reserve Identity Hub — auth screens
 * Design tokens + auth component CSS extracted verbatim from
 * docs/design/Identity Hub.dc.html (section "02 · IDENTITY").
 * Dark-mode (.dk block) is applied via prefers-color-scheme. */

:root{--ff:'Hanken Grotesk',system-ui,sans-serif;--fm:'JetBrains Mono',ui-monospace,monospace;--ink:#171c1a;--ink2:#4b554f;--ink3:#828c84;--line:#e7ebe6;--line2:#eef2ee;--bg:#f6f8f4;--card:#ffffff;--green:#67b516;--green6:#4f8c16;--green7:#42760f;--greenSoft:#eef6e2;--greenInk:#3c7110;--blue:#1667b5;--blueSoft:#e8f0fa;--blueInk:#13568f;--amberSoft:#fdf0d8;--amberInk:#9a5d09;--greySoft:#f0f1ee;--greyInk:#6b756d;--redSoft:#fcecea;--redInk:#b23b2c;--rad:13px}

/* Dark tokens. Expliciete keuze (data-theme="dark") wint; systeem-dark geldt
   als fallback wanneer er geen expliciete keuze is (o.a. no-JS). */
[data-theme="dark"]{--ink:#eef3ec;--ink2:#aab4ac;--ink3:#7b857d;--line:#272c27;--line2:#1e221d;--bg:#0d100e;--card:#161a16;--greenSoft:#1d2916;--greenInk:#9fd45f;--blueSoft:#15243a;--blueInk:#7db4ed;--amberSoft:#332408;--amberInk:#e0a64a;--greySoft:#1f231e;--greyInk:#9aa49c;--redSoft:#341c18;--redInk:#ef8378}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){--ink:#eef3ec;--ink2:#aab4ac;--ink3:#7b857d;--line:#272c27;--line2:#1e221d;--bg:#0d100e;--card:#161a16;--greenSoft:#1d2916;--greenInk:#9fd45f;--blueSoft:#15243a;--blueInk:#7db4ed;--amberSoft:#332408;--amberInk:#e0a64a;--greySoft:#1f231e;--greyInk:#9aa49c;--redSoft:#341c18;--redInk:#ef8378}
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--ff);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}

/* ── Full-viewport split layout (page-level adaptation of .screen/.bSplit) ── */
.auth-screen{position:relative;min-height:100vh;display:flex;background:var(--card)}
.bSplit{display:flex;width:100%;min-height:100vh}

.bPanel{width:430px;flex:none;position:relative;overflow:hidden;color:#fff;padding:46px 42px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(158deg,#0f5896 0%,#1773b2 44%,#5aa334 118%)}
.blob{position:absolute;border-radius:50%}
.b1{width:300px;height:300px;right:-110px;top:-90px;background:rgba(255,255,255,.10)}
.b2{width:190px;height:190px;left:-70px;bottom:40px;background:rgba(255,255,255,.07)}
.wm{font:800 23px var(--ff);letter-spacing:-.01em;position:relative;z-index:1}
.wm-id{font:600 13px var(--ff);vertical-align:middle;margin-left:7px;background:rgba(255,255,255,.20);padding:3px 8px;border-radius:7px}
/* Teqa-ID knockout-lockup (wit) op het blauw-groene paneel. */
.wm-logo{height:42px;width:auto;max-width:78%;position:relative;z-index:1;display:block}
/* Merk-lockup als terug-link naar de product-site: geen link-decoratie, erft kleur. */
.brand-home{display:inline-block;text-decoration:none;color:inherit;position:relative;z-index:1;cursor:pointer}
.brand-home:hover{opacity:.9}
/* Product-kiezer op de master-login: rij app-icoontjes bovenin het merk-paneel
   (multi-branding, IRES-13637). Elk icoon linkt naar de merk-eigen login. */
.app-rail{position:relative;z-index:1;margin:22px 0 0}
.app-rail-lbl{font:600 11px var(--ff);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.66);margin:0 0 10px}
.app-rail-row{display:flex;flex-wrap:wrap;gap:12px}
.app-ico{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .12s,background .12s,box-shadow .12s}
.app-ico:hover{background:rgba(255,255,255,.24);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.app-ico img{width:38px;height:38px;object-fit:contain;display:block}
.pH{font:800 31px/1.16 var(--ff);letter-spacing:-.02em;margin:0 0 14px;max-width:310px;position:relative;z-index:1}
.pSub{font:400 15px/1.5 var(--ff);color:rgba(255,255,255,.86);max-width:300px;margin:0 0 26px;position:relative;z-index:1}
.feat{display:flex;flex-direction:column;gap:13px;position:relative;z-index:1}
.frow{display:flex;align-items:center;gap:11px;font:500 14px var(--ff);color:rgba(255,255,255,.96)}
.fchk{width:23px;height:23px;border-radius:50%;background:rgba(255,255,255,.20);display:flex;align-items:center;justify-content:center;flex:none}
.envc{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.20);border-radius:11px;padding:12px 14px;position:relative;z-index:1}
.monow{font:500 13px var(--fm);color:#fff}
.sdot{width:9px;height:9px;border-radius:50%;background:#aef07a;box-shadow:0 0 0 3px rgba(174,240,122,.25);flex:none}
.envlbl{font:600 11px var(--ff);color:rgba(255,255,255,.7);margin-left:auto;letter-spacing:.04em;text-transform:uppercase}

.bForm{flex:1;display:flex;align-items:center;justify-content:center;background:var(--card);position:relative;padding:40px 24px}
.bcard{width:362px;max-width:100%;position:relative}
.burl{position:absolute;top:26px;right:32px;font:500 12px var(--fm);color:var(--ink3);z-index:2}
.logo{height:38px;width:auto;display:block}
.h1{font:700 27px/1.12 var(--ff);color:var(--ink);letter-spacing:-.02em;margin:20px 0 7px}
.sub{font:400 15px/1.45 var(--ff);color:var(--ink3);margin:0 0 22px}

/* ── Social-login buttons ── */
.pstack{display:flex;flex-direction:column;gap:10px}
.prow{flex-direction:row}
.pbtn-ico{flex:1;gap:0}
.pbtn{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;height:46px;border:1px solid var(--line);border-radius:11px;background:var(--card);font:600 14.5px var(--ff);color:var(--ink);cursor:pointer;text-decoration:none}
.pbtn[disabled]{opacity:.55;cursor:not-allowed}
.pbtn .soon{margin-left:auto;font:600 11px var(--ff);color:var(--ink3);background:var(--greySoft);padding:2px 8px;border-radius:999px;letter-spacing:.02em}
.ico{width:19px;height:19px;flex:none;background:center/contain no-repeat;display:inline-block}
.ico-google{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E")}
.ico-ms{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Crect x='1' y='1' width='10' height='10' fill='%23F25022'/%3E%3Crect x='12' y='1' width='10' height='10' fill='%237FBA00'/%3E%3Crect x='1' y='12' width='10' height='10' fill='%2300A4EF'/%3E%3Crect x='12' y='12' width='10' height='10' fill='%23FFB900'/%3E%3C/svg%3E")}
.ico-apple{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23000' d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E")}
.ico-linkedin{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='4' fill='%230A66C2'/%3E%3Cpath fill='%23fff' d='M7.2 9.6H4.8V19h2.4V9.6zM6 5.2A1.4 1.4 0 1 0 6 8a1.4 1.4 0 0 0 0-2.8zM19.2 19v-5.1c0-2.6-1.4-3.8-3.2-3.8-1.5 0-2.1.8-2.5 1.4V9.6H11.1V19h2.4v-5.2c0-1.1.7-1.6 1.4-1.6.7 0 1.3.5 1.3 1.6V19h3z'/%3E%3C/svg%3E")}
[data-theme="dark"] .ico-apple{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23fff' d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E")}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .ico-apple{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23fff' d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E")}
}
/* Container rechtsboven: taal-switcher + licht/donker-toggle */
.topright{position:fixed;top:18px;right:20px;z-index:20;display:flex;align-items:center;gap:10px}
/* Licht/donker-toggle (rechtsboven) */
.theme-toggle{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink2);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.theme-toggle:hover{color:var(--ink);border-color:var(--ink3)}
.theme-toggle .moon{display:none}
.theme-toggle .sun{display:block}
[data-theme="dark"] .theme-toggle .moon{display:block}
[data-theme="dark"] .theme-toggle .sun{display:none}

/* ── Taal-switcher (flag-dropdown, pure <details>) ── */
.langsw{position:relative;display:inline-block}
.langsw>summary{list-style:none;cursor:pointer}
.langsw>summary::-webkit-details-marker{display:none}
.langsw .langsw-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink2);font:600 13px var(--ff);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.langsw .langsw-btn:hover{color:var(--ink);border-color:var(--ink3)}
.langsw .langsw-cur{font-weight:600}
.langsw[open] .langsw-caret{transform:rotate(180deg)}
.langsw .langsw-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:5px;min-width:180px;max-height:60vh;overflow:auto;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.langsw .langsw-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;color:var(--ink2);text-decoration:none;white-space:nowrap;font:500 13.5px var(--ff)}
.langsw .langsw-opt:hover{background:var(--bg);color:var(--ink);text-decoration:none}
.langsw .langsw-opt-on{background:var(--green6);color:#fff}
.langsw .langsw-opt-on:hover{background:var(--green6);color:#fff}
.langsw .langsw-flag{font-size:16px;line-height:1}

.divider{display:flex;align-items:center;gap:13px;margin:20px 0;color:var(--ink3);font:500 12.5px var(--ff);white-space:nowrap}
.hr{height:1px;background:var(--line);flex:1}

/* ── Form fields ── */
.field{margin-bottom:14px}
.lbl{display:block;font:600 12.5px var(--ff);color:var(--ink2);margin-bottom:6px}
.inp{width:100%;height:46px;border:1px solid var(--line);border-radius:11px;padding:0 14px;font:400 15px var(--ff);color:var(--ink);background:var(--card)}
.inp::placeholder{color:var(--ink3)}
.inp:focus,.inp-foc{outline:none;border-color:var(--green6);box-shadow:0 0 0 3px rgba(79,140,22,.15)}
.inp-err{border-color:#d9442f;box-shadow:0 0 0 3px rgba(217,68,47,.13)}
.err{font:500 12.5px var(--ff);color:#c23a28;margin-top:6px;display:flex;align-items:center;gap:5px}
.hint{font:400 12.5px var(--ff);color:var(--ink3);margin-top:6px}
/* Password-strength meter (port van ires-core-library strength.ts) */
.pwmeter{margin-top:8px;display:flex;align-items:center;gap:10px;min-height:16px}
.pwmeter-bars{display:flex;gap:4px;flex:1}
.pwmeter-bar{flex:1;height:5px;border-radius:3px;background:var(--line);transition:background-color .15s}
.pwmeter-label{font:600 12px var(--ff);white-space:nowrap}

.cta{width:100%;height:48px;border:0;border-radius:11px;background:var(--green6);color:#fff;font:700 15px var(--ff);cursor:pointer;margin-top:4px;box-shadow:0 2px 10px rgba(79,140,22,.26)}
.cta-dis{background:var(--greySoft);color:var(--ink3);box-shadow:none;cursor:not-allowed}

.afoot{text-align:center;font:400 14px var(--ff);color:var(--ink2);margin-top:18px;padding-top:17px;border-top:1px solid var(--line2)}
.alink{color:var(--blue);font-weight:600;text-decoration:none;cursor:pointer}
.alink:hover{text-decoration:underline}
.trust{font:400 12.5px/1.4 var(--ff);color:var(--ink3);text-align:center;margin-top:15px}

.bigico{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.bigico svg{width:28px;height:28px}
.emailchip{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 8px 0 14px;border:1px solid var(--line);border-radius:10px;font:500 14px var(--ff);color:var(--ink);background:var(--bg)}

.muted{color:var(--ink3)}

/* ── Responsive: collapse brand panel on narrow viewports ── */
@media (max-width:820px){
  .bPanel{display:none}
  .bForm{padding:32px 20px}
}