/* On-screen keyboard chrome (see js/osk.js). Two fixed panels skin the vendored
   simple-keyboard (its base css ships in /vendor/simple-keyboard/css): a bottom
   overlay for text and an anchored popover numpad. Sits ABOVE the welcome/lock
   layer (2000) because the activation gate is exactly where a keyboardless till
   needs to type; every scrim and modal lives far below. */

.osk-panel {
  position: fixed;
  z-index: 2600;
  display: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.osk-panel.osk-open { display: block; }

.osk-text {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface-2);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.14);
  animation: osk-up 0.16s ease-out;
}
.osk-text .osk-kb {
  max-width: 1150px;
  margin: 0 auto;
}
@keyframes osk-up {
  from { transform: translateY(30%); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}

.osk-pad {
  width: 248px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  padding: 8px;
  animation: osk-pop 0.12s ease-out;
}
@keyframes osk-pop {
  from { transform: scale(0.96); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}

/* The Esc-chain proxy is a real button so the chain can click it, but it must
   never be seen or tabbed into. */
.osk-esc-proxy {
  position: fixed;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ---- simple-keyboard skin, on the app tokens ---- */

.osk-theme.hg-theme-default {
  background: transparent;
  padding: 0;
  font-family: inherit;
}
.osk-theme.hg-theme-default .hg-button {
  height: 52px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
  box-shadow: none;
  cursor: pointer;
}
.osk-theme.hg-theme-default .hg-button:active {
  background: var(--accent-bg);
  border-color: var(--accent);
  transform: translateY(1px);
}
.osk-theme.hg-theme-default .hg-row { margin-bottom: 6px; }
.osk-theme.hg-theme-default .hg-row:last-child { margin-bottom: 0; }
.osk-theme.hg-theme-default .hg-row .hg-button { margin-right: 6px; }
.osk-theme.hg-theme-default .hg-row .hg-button:last-child { margin-right: 0; }

/* Function keys read as chrome, not letters. */
.osk-theme .hg-button.hg-functionBtn {
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 15px;
}
.osk-theme .hg-button[data-skbtn="{enter}"] {
  background: var(--accent);
  border-color: var(--accent-700);
  color: #fff;
  flex-grow: 2;
}
.osk-theme .hg-button[data-skbtn="{bksp}"] { flex-grow: 2; }
.osk-theme .hg-button[data-skbtn="{shift}"] { flex-grow: 2; }
.osk-theme .hg-button[data-skbtn="{space}"] { flex-grow: 14; }
.osk-theme .hg-button[data-skbtn="{lang}"] {
  flex-grow: 2;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--info);
}
.osk-theme .hg-button[data-skbtn="{hide}"] { flex-grow: 2; }

/* Numpad: big square digits, calm function keys. */
.osk-numpad.hg-theme-default .hg-button {
  height: 56px;
  font-size: 20px;
  font-weight: 600;
}
.osk-numpad .hg-button[data-skbtn="{enter}"] { font-size: 18px; }
.osk-numpad .hg-button[data-skbtn="{hide}"] { font-size: 15px; }

/* ---- the app gives up the space, it is not covered ----
   The text keyboard used to float OVER the layout and rely on scrolling the
   focused field back into view. That only works where something scrolls: the
   POS checkout pins its note field and CREATE ORDER to the bottom of a
   full-height flex pane, so they simply sat underneath it. Instead the shell
   SHRINKS by the keyboard's height (--osk-h, measured and set by osk.js), and
   every pane inside reflows and scrolls on its own — the app never extends
   under the keyboard, so no field can hide there.

   Full-screen modal scrims are positioned against the VIEWPORT, not the shell,
   so they are lifted at runtime by osk.js (liftOverlays) instead of being
   listed here — a hardcoded list goes stale the moment someone adds a modal. */
body.osk-open .app {
  height: calc(100vh - var(--osk-h, 0px));
  min-height: 0;
}

/* Bottom-right stacks (toasts, online-order queue) climb above the keyboard. */
body.osk-open .toast-stack,
body.osk-open .toast-wrap,
body.osk-open .confq {
  bottom: calc(var(--osk-h, 0px) + 16px);
}

/* Phone-narrow screens are Android/iOS tablets with a system keyboard in every
   realistic deployment, but if the overlay does open there, let it breathe. */
@media (max-width: 720px) {
  .osk-text { padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .osk-theme.hg-theme-default .hg-button { height: 44px; font-size: 15px; }
}