/* The kiosk on-screen keyboard, paired with Views/Shared/_OnScreenKeyboard.cshtml.

   Lifted out of site.css when the café ordering kiosks arrived: they need the keyboard but not
   the rest of the portal's styling, and dragging all of site.css onto a page that already has
   cafe/menu.css would have meant two stylesheets fighting over the same elements. Both pages
   link this file; nothing else changed.

   The var() calls carry fallbacks: --ink and --brand are declared in site.css, which the café
   kiosk deliberately does not load, and a bare var() with nothing behind it renders the keyboard
   as invisible keys on an invisible bar. */

.osk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    background: var(--ink, #2b2f36); padding: 12px clamp(8px, 2vw, 40px) 18px;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 -6px 24px rgba(0,0,0,.35);
}
.osk.hidden { display: none; }
.osk-row { display: flex; gap: 10px; justify-content: center; }
.osk-key {
    flex: 1 1 0; max-width: 120px; min-height: 74px;
    font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 700;
    border: none; border-radius: 12px;
    background: #ffffff; color: var(--ink, #2b2f36); cursor: pointer;
    box-shadow: 0 3px 0 rgba(0,0,0,.28); user-select: none;
}
.osk-key:active { transform: translateY(3px); box-shadow: none; background: #dfe6ee; }
.osk-key.osk-special { background: #55677a; color: #fff; }
.osk-key.osk-wide { max-width: 190px; }
.osk-key.osk-special.active { background: var(--brand, #cf760e); }
.osk-key.osk-space { flex: 6 1 0; max-width: none; }
.osk-key.osk-done { flex: 2 1 0; max-width: none; background: var(--brand, #cf760e); color: #fff; }

body.osk-open .page { padding-bottom: 46vh; }

/* When a page takes the bottom-right key over as its confirm button — the café kiosk does — it
   stops being a grey "dismiss" and starts looking like the end of the transaction. */
.osk-key.osk-confirm { background: #1f8a44; color: #fff; }
.osk-key.osk-confirm:active { background: #187037; }
.osk-key.osk-confirm.osk-busy { background: #2c4634; color: #cfe0d5; }

/* The page's extra key, on the end of the number row — diagonally opposite the confirm key, so
   the two decisions are nowhere near each other. Amber against the confirm key's green: they get
   pressed without being read, so they must not look alike.

   Both action keys take a fixed basis rather than a share of their row: they sit on rows with
   different numbers of keys, so any flex ratio makes them different widths, which is what they
   were. The rest of each row absorbs the difference. */
.osk-key.osk-backkey,
.osk-key.osk-done.osk-confirm { flex: 0 0 var(--osk-action-width, clamp(200px, 24vw, 460px)); max-width: none; }
.osk-key.osk-backkey { font-size: clamp(.95rem, 1.4vw, 1.2rem); }
.osk-key.osk-change { background: #cf760e; color: #fff; }
.osk-key.osk-change:active { background: #a95c07; }