/*
 * On-screen keyboard for the kiosk. Sized in rem so it scales with the
 * fluid :root font-size (phone → 55" wall), styled to match the gold theme.
 */
.osk {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 110%);
    width: 100%;
    max-width: none;
    z-index: 1000;
    padding: .5rem .6rem 1rem;
    /* Translucent panel: the screen behind shows through, a blur keeps keys legible. */
    background: linear-gradient(180deg, rgba(255, 253, 248, .72) 0%, rgba(243, 233, 214, .72) 100%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(224, 210, 181, .6);
    border-bottom: 0;
    border-radius: var(--radius, 1.4rem) var(--radius, 1.4rem) 0 0;
    box-shadow: 0 -1.2rem 3rem -1rem rgba(120, 86, 24, .28);
    transition: transform .22s ease;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.osk.osk-open {
    transform: translate(-50%, 0);
}

/* Numeric pad is narrower and centred. */
.osk.osk-num {
    max-width: 20rem;
}

.osk-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .25rem;
}

.osk-hide {
    border: 0;
    background: transparent;
    color: var(--gold, #9A6A1E);
    font-size: 1.1rem;
    line-height: 1;
    padding: .3rem .6rem;
    cursor: pointer;
    border-radius: .6rem;
}

.osk-keys {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.osk-row {
    display: flex;
    justify-content: center;
    gap: .4rem;
}

.osk-key {
    flex: 1 1 auto;
    min-width: 2.2rem;
    min-height: 3.2rem;
    padding: 0 .4rem;
    font-family: var(--font-body, "Public Sans", system-ui, sans-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink, #2A2520);
    background: rgba(255, 254, 251, .82);
    border: 1px solid rgba(224, 210, 181, .7);
    border-radius: .7rem;
    box-shadow: 0 .15rem 0 rgba(120, 86, 24, .12);
    cursor: pointer;
    transition: transform .05s ease, background .12s ease;
}

.osk-key:active {
    transform: translateY(.12rem);
    background: var(--bg-2, #F3E9D6);
    box-shadow: none;
}

/* Function keys (backspace, shift, done) get a tinted look. */
.osk-key.osk-fn {
    color: var(--gold-2, #7E531A);
    background: rgba(251, 243, 226, .82);
    flex-grow: 0;
    min-width: 3.4rem;
}

.osk-key.osk-on {
    color: #fff;
    background: var(--gold, #9A6A1E);
    border-color: var(--gold, #9A6A1E);
}

.osk-key.osk-space {
    flex: 6 1 auto;
    letter-spacing: .15em;
    color: var(--muted, #A99A80);
    text-transform: lowercase;
    font-size: .95rem;
}

.osk-key.osk-done {
    color: #fff;
    background: linear-gradient(180deg, var(--gold, #9A6A1E), var(--gold-2, #7E531A));
    border-color: var(--gold-2, #7E531A);
    min-width: 5rem;
}

/* On the numeric pad, keys are square-ish and roomy. It's a 3-across grid, so
 * every key takes an equal column — including backspace and Done, which as
 * function keys would otherwise refuse to grow and leave the last row ragged.
 * (Declared after those rules so it wins on equal specificity.) */
.osk-num .osk-key {
    flex: 1 1 0;
    min-width: 0;
    min-height: 3.8rem;
    font-size: 1.4rem;
}

/* --------------------------------------------- side dock (split screen)
 * On a wide landscape kiosk, opt-in pages (body.osk-split — the register
 * screen) dock the keyboard to the right half instead of the bottom, so the
 * form stays beside the keys at full height rather than being squeezed above
 * them. Portrait and small screens keep the bottom sheet; dock() in
 * keyboard.js picks between the two and toggles these classes. */
.osk.osk-side {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    min-width: 26rem;
    max-width: 46rem;
    height: 100%;
    transform: translate(110%, 0);
    display: flex;
    flex-direction: column;
    justify-content: safe center;   /* eye level in a tall panel, but never centred off both ends */
    padding: 1rem 1.2rem;
    border: 1px solid rgba(224, 210, 181, .6);
    border-right: 0;
    border-radius: var(--radius, 1.4rem) 0 0 var(--radius, 1.4rem);
    box-shadow: -1.2rem 0 3rem -1rem rgba(120, 86, 24, .28);
}

.osk.osk-side.osk-open {
    transform: translate(0, 0);
}

/* The panel keeps one width across both layouts so the form beside it never
 * jumps when focus moves from Name (text) to Phone (numeric) — only the keys
 * inside change, and the number pad just centres. */
.osk.osk-side.osk-num {
    max-width: 46rem;
}

.osk-side.osk-num .osk-keys {
    width: 100%;
    max-width: 22rem;
    max-height: 26rem;
    margin: 0 auto;
}

/* Bar rides with the keys (the panel is full height, so pinning it to the top
 * corner would strand it far above them). */
.osk-side .osk-bar {
    margin-bottom: .6rem;
    padding-right: .2rem;
}

/* A bare chevron is a poor target on a touch wall — give it a pill with real
 * padding, and point it at the form it slides back toward. */
.osk-side .osk-hide {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.6rem;
    padding: .4rem 1.1rem;
    font-size: 1rem;
    background: rgba(255, 254, 251, .7);
    border: 1px solid rgba(224, 210, 181, .7);
    border-radius: 99px;
}

.osk-side .osk-hide i {
    transform: rotate(90deg);
}

/* Fill the tall panel: rows share the height instead of leaving the keys
 * marooned in the middle of it. The cap keeps keys roughly square at the
 * panel's width — past it they'd stretch into deep slabs on a 4K wall — and
 * the block just re-centres in whatever height is left over. */
.osk-side .osk-keys {
    flex: 1 1 auto;
    max-height: 24rem;
}

.osk-side .osk-row {
    flex: 1 1 0;
}

.osk-side .osk-key {
    min-height: 3.8rem;   /* floor for short screens, where rows can't grow */
}

.osk-side.osk-num .osk-key {
    min-height: 4.4rem;
}

/* Shell gives up the right half rather than the bottom strip. Higher
 * specificity than the bottom-sheet rule below, so padding-bottom is dropped. */
body.osk-active.osk-side-active .kiosk-shell {
    padding-bottom: 0;
    padding-right: var(--osk-w, 0px);
    transition: padding-right .22s ease;
}

/* Height is the scarce resource once the keyboard is up on a screen that was
 * already short (1366x768 and friends, or any phone): drop the decorative hero
 * so the fields and the Continue button keep their full size instead of making
 * fit.js shrink the whole form to fit them in. Applies to both dock modes —
 * the bottom sheet costs even more height than the side panel. The register
 * screen autofocuses its first field, so this compaction is already in place
 * on arrival; nothing collapses under the visitor. */
@media (max-height: 900px) {
    body.osk-split.osk-active .eyebrow,
    body.osk-split.osk-active .diamond,
    body.osk-split.osk-active .reg-perks {
        display: none;
    }

    body.osk-split.osk-active .lead {
        margin-bottom: .6rem;
    }
}

/* When the on-screen keyboard is up, shrink the whole app shell by exactly the
 * keyboard's live-measured height (--osk-h, published by keyboard.js). Because
 * the shell is a fixed-height flex column, .kiosk-main then ends right at the
 * keyboard's top edge and the form re-centres in the space that's left — the
 * keyboard can never overlap a field, and nothing has to scroll. */
body.osk-active .kiosk-shell {
    padding-bottom: var(--osk-h, 0px);
}

/* Belt and braces: nothing on the kiosk scrolls (fit.js shrinks the UI until
 * each screen fits), so no scrollbar should ever be able to appear — not even
 * the momentary one a mid-layout reflow can produce. */
body.kiosk,
body.kiosk .kiosk-main {
    scrollbar-width: none;      /* Firefox / modern Chromium */
    -ms-overflow-style: none;   /* legacy Edge */
}
body.kiosk::-webkit-scrollbar,
body.kiosk .kiosk-main::-webkit-scrollbar { /* Chromium (the kiosk browser) */
    width: 0;
    height: 0;
    display: none;
}

@media (max-width: 480px) {
    .osk-key { min-height: 2.9rem; font-size: 1rem; }
}