/* Eigen schermtoetsenbord en keuzelijst (zie public/js/toetsenbord.js). Alleen actief in de app op een groot scherm. */
.si-tb {
    /* Op sta-hoogte: op een staand 75"-scherm zit het midden van het toetsenbord rond 55% van boven. */
    position: fixed; left: 50%; top: 46vh; transform: translateX(-50%); z-index: 2147483000;
    width: min(520px, calc(100vw - 32px));
    display: none; padding: 10px; gap: 6px; flex-direction: column; border-radius: 18px;
    background: rgba(20, 24, 48, .97); box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
    font-family: inherit; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.si-tb.si-tb-open { display: flex; }
.si-tb-rij { display: flex; gap: 6px; justify-content: center; }
.si-tb-toets {
    flex: 1 1 0; min-width: 0; max-width: 46px; min-height: 50px; border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: 1.25rem; font-weight: 600; line-height: 1;
    cursor: pointer; padding: 0 3px; white-space: nowrap; overflow: hidden;
}
.si-tb-toets:active { background: rgba(255, 255, 255, .32); }
.si-tb-functie { background: rgba(255, 255, 255, .07); font-size: .95rem; }
.si-tb-breed { flex-grow: 1.4; max-width: 68px; }
.si-tb-spatie { flex-grow: 4; max-width: 190px; font-size: .95rem; }
.si-tb-aan { background: var(--si-accent, #6c63ff); }
.si-tb-enter { flex-grow: 2.4; max-width: 110px; background: var(--si-accent, #6c63ff); font-size: .95rem; }
.si-tb-klein { font-size: .7em; margin-left: 3px; }
.si-tb-cijfers { width: min(280px, calc(100vw - 32px)); }
.si-tb-cijfers .si-tb-toets { max-width: none; min-height: 54px; }
/* Gemarkeerde velden zijn readonly; toch duidelijk laten zien welk veld actief is. */
[data-si-toets]:focus { outline: 3px solid var(--si-accent, #6c63ff); outline-offset: 2px; }


.si-keuzelijst {
    position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .55); padding: 24px;
}
.si-keuzelijst-vak {
    display: flex; flex-direction: column; gap: 14px; width: min(560px, 100%); max-height: 80vh; overflow-y: auto;
    padding: 22px; border-radius: 22px; background: rgba(28, 32, 64, .98);
}
.si-keuzelijst-optie {
    min-height: 88px; border: 2px solid rgba(255, 255, 255, .25); border-radius: 18px; background: rgba(255, 255, 255, .08);
    color: #fff; font: inherit; font-size: 1.8rem; font-weight: 600; cursor: pointer;
}
.si-keuzelijst-optie.si-tb-aan { border-color: var(--si-accent, #6c63ff); }
.si-keuze-vlak { position: absolute; z-index: 5; cursor: pointer; }
/* Pagina schuift omhoog als een veld achter het toetsenbord valt (toetsenbord.js). */
body { transition: transform .15s; }

/* /instellingen: eigen scrollvlak tussen kop en voet. De site zet overflow:hidden op alle elementen,
   waardoor de onderste keuzes anders buiten beeld vallen. */
.si-inst {
    position: fixed; top: 100px; bottom: 150px; left: 0; right: 0; z-index: 2;
    max-width: 760px; margin: 0 auto !important; padding: 0 16px 40px !important; box-sizing: border-box;
    overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.si-inst * { overflow: visible; }
.si-inst .si-keuze { overflow: hidden; }
.si-inst-terug {
    position: fixed; top: 24px; left: 24px; z-index: 5; width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.8rem;
    background: rgba(255, 255, 255, .12); text-decoration: none;
}
.si-inst-terug:hover, .si-inst-terug:active { color: #fff; background: rgba(255, 255, 255, .25); }