/* Curator app — aanvullingen op style.css (mockups v2, ongewijzigd overgenomen).
   Alleen wat de mockups als plaatje tonen en de app als echt formulier nodig heeft. */
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-var.woff2) format("woff2");font-weight:100 800;font-display:swap}

/* echte invoervelden in de stijl van .input */
input.input{width:100%;outline:none;-webkit-appearance:none;appearance:none}
input.input:focus-visible,input.input:focus{border-color:var(--music);box-shadow:0 0 0 3px color-mix(in srgb,var(--music) 25%,transparent)}
input.input::placeholder{color:var(--ink-2)}
/* gebruikersnaam: zichtbaar (voor de wachtwoordmanager), niet te wijzigen */
input.input[readonly]{color:var(--ink-2);background:transparent;cursor:default}
input.input[readonly]:focus{border-color:var(--line);box-shadow:none}
input.codefield{height:60px;font:700 30px/1 var(--display);letter-spacing:.5em;text-align:center;padding-left:calc(16px + .5em);margin-bottom:18px}

/* knoppen en links: zichtbare focus, geel = waar je bent */
.btn,.tabs a,.check{cursor:pointer}
.btn:focus-visible,.tabs a:focus-visible,a.btn:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
form{margin:0}

/* "Remember this device": echte checkbox achter het gele vakje uit de mockup */
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check .box svg{width:18px;height:18px}
.check input:not(:checked)+.box{background:transparent;border:2px solid var(--glass-line)}
.check input:not(:checked)+.box svg{visibility:hidden}
.check input:focus-visible+.box{outline:3px solid var(--yellow);outline-offset:2px}
.check .t,.check .a{display:block}

/* meldingen: één regel, geen eigen kleur buiten het palet */
.msg{font-size:15px;line-height:1.4;padding:12px 14px;border-radius:14px;background:var(--line);margin-bottom:14px}
.msg.error{border-left:4px solid var(--yellow)}

/* setup */
.qr{display:grid;place-items:center;background:#fff;border-radius:18px;padding:14px;width:max-content;margin:0 auto 12px}
.qr img{width:200px;height:200px;image-rendering:pixelated}
.keyline{font-size:14px;color:var(--ink-2);margin-bottom:16px;overflow-wrap:anywhere}
.key{font:500 14px/1.4 "JetBrains Mono",ui-monospace,monospace;color:var(--ink);letter-spacing:.04em}
.auth .panel.setup{max-height:none}

/* lege tabbladen */
.empty{padding:28px 22px}
.empty .big{font:700 28px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink-2)}

/* instellingen */
h2.first{margin-top:0}
.dev form{flex:none}
.card>.a{color:var(--ink-2);font-size:15px}

/* alleen voor schermlezers */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* lange setup-pagina mag scrollen */
@media (max-width:899px){.auth{min-height:100dvh}}