/*! Up-shell v1.0.0 | login.css
 * De stijl van de Up-poort: de gedeelde inlogpagina van de Up-apps. Gehost op
 * https://www.upscailed.nl/up/v1/login.css en gegenereerd uit de code van de
 * UpScailed-website (src/up-shell/login.css plus src/lib/up-shell.ts). Contract:
 * werkbrief "Up-shell (De Lijn)", 2026-09-01; de DOM-structuur en de klassenamen
 * zijn bindend. v1 is bevroren: wat een app kan breken wordt v2.
 *
 * <link rel="stylesheet" href="https://www.upscailed.nl/up/v1/login.css">
 * <main class="up-poort">
 *   <div class="up-poort-wordmark"></div>
 *   <section class="up-poort-kaart">
 *     <p class="up-poort-eyebrow">Up/Actions</p>
 *     <h1 class="up-poort-titel">Inloggen</h1>
 *     <a class="up-poort-knop up-poort-knop-primair" href="...">Inloggen met UpScailed</a>
 *     <div class="up-poort-of">of met je Up/Actions-account</div>
 *     <form class="up-poort-form"> ...velden (up-poort-veld) en knop (up-poort-knop)... </form>
 *     <p class="up-poort-fout" hidden></p>
 *   </section>
 * </main>
 */
@font-face{font-family:"Inter";font-style:normal;font-weight:700 800;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

body:has(.up-poort){margin:0;background:#FAF8F4}

.up-poort{box-sizing:border-box;min-height:100vh;min-height:100dvh;margin:0;padding:40px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background-color:#FAF8F4;background-image:radial-gradient(900px 520px at 12% -12%,#FFEDE6 0,rgba(255,237,230,0) 62%);background-repeat:no-repeat;color:#16181D;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.up-poort *,.up-poort *::before,.up-poort *::after{box-sizing:border-box}
.up-poort [hidden]{display:none!important}

/* De officiele wordmark UP/SCA(puntloze i)LED (patroon UpscailedLogo.astro v2.0) op een lege div:
   de letters staan in ::before (de slash coral via een tekst-gradient), het coral puntje
   op de puntloze i is een achtergrond van de div, de draaiende refresh-cirkel is ::after.
   De maten zijn afgestemd op Inter 800; het systeemlettertype is de terugval. */
.up-poort-wordmark{position:relative;display:inline-flex;align-items:baseline;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1;color:#16181D;white-space:nowrap;padding-right:.5em;user-select:none;-webkit-user-select:none;background-image:radial-gradient(circle closest-side,#FF5B3E 0 98%,rgba(255,91,62,0) 100%);background-repeat:no-repeat;background-size:.22em .22em;background-position:3.694em .06em}
.up-poort-wordmark::before{content:"UP/SCA\0131 LED";padding-right:.04em;margin-right:-.04em;background-image:linear-gradient(90deg,#16181D 1.31em,#FF5B3E 1.31em,#FF5B3E 1.69em,#16181D 1.69em);-webkit-background-clip:text;background-clip:text;color:transparent}
.up-poort-wordmark::after{content:"";position:absolute;right:.02em;top:-.15em;width:.5em;height:.5em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5B3E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E") center/contain no-repeat;animation:up-poort-spin 4s linear infinite}
@keyframes up-poort-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.up-poort-wordmark::after{animation:none}}

.up-poort-kaart{width:100%;max-width:380px;margin:0;padding:28px 26px;background:#fff;border:1px solid #E9E3D9;border-radius:16px;box-shadow:0 20px 40px -30px rgba(25,27,32,.35)}
.up-poort-eyebrow{margin:0 0 6px;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:#7A7F8A}
.up-poort-titel{margin:0 0 18px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:#16181D}

.up-poort-knop{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin:0;padding:0 16px;border:1px solid #E3DCD1;border-radius:10px;background:#fff;color:#16181D;font:inherit;font-size:14.5px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.up-poort-knop:hover{background:#F6F3EE;border-color:#D2CCC0}
.up-poort-knop svg{width:18px;height:18px;flex:none}
.up-poort-knop-primair{background:#FF5B3E;border-color:#FF5B3E;color:#fff;font-weight:700}
.up-poort-knop-primair:hover{background:#E8452C;border-color:#E8452C}
.up-poort-knop:focus-visible,.up-poort-veld:focus-visible{outline:2px solid #FF5B3E;outline-offset:2px}
.up-poort-knop[disabled],.up-poort-knop[aria-disabled=true]{opacity:.6;pointer-events:none}

.up-poort-of{display:flex;align-items:center;gap:10px;margin:16px 0;color:#9AA0AB;font-size:12.5px;white-space:nowrap}
.up-poort-of::before,.up-poort-of::after{content:"";flex:1;height:1px;background:#E9E3D9}

.up-poort-form{display:flex;flex-direction:column;gap:12px;margin:0}
.up-poort-form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:#3A3F47}
.up-poort-veld{display:block;width:100%;height:44px;margin:0;padding:0 12px;border:1px solid #E3DCD1;border-radius:10px;background:#fff;color:#16181D;font:inherit;font-size:15px;line-height:1.2;transition:border-color .15s ease,box-shadow .15s ease}
.up-poort-veld::placeholder{color:#9AA0AB}
.up-poort-veld:focus{border-color:#FF5B3E;box-shadow:0 0 0 4px rgba(255,91,62,.1);outline:0}
.up-poort-form .up-poort-knop{margin-top:4px}

.up-poort-fout{margin:14px 0 0;padding:10px 12px;border:1px solid rgba(220,38,38,.18);border-radius:10px;background:rgba(220,38,38,.06);color:#B91C1C;font-size:13px;line-height:1.5}

.up-poort-kaart a:not(.up-poort-knop){color:#464C57;text-decoration:underline;text-underline-offset:2px}
.up-poort-kaart a:not(.up-poort-knop):hover{color:#16181D}