/* CC-2026-083 REQ-UI-044: the station's on-screen keyboard (osk.js) - docked at the bottom over the page while a field
   has focus; the page gets room under it so the field can scroll into view. Theme colours only. */
.osk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; display: none;
       padding: 8px max(8px, calc((100vw - 1400px) / 2)) 10px; gap: 8px; flex-direction: column;
       background: var(--rz-panel-background-color); border-top: 1px solid var(--rz-border-color);
       box-shadow: 0 -6px 24px rgba(0, 0, 0, .35); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.osk--open { display: flex; }
.osk__row { display: flex; gap: 8px; justify-content: center; }
.osk__key { flex: 1 1 0; min-width: 0; height: 60px; border-radius: 8px; border: 1px solid var(--rz-border-color);
            background: var(--rz-body-background-color); color: var(--rz-text-color);
            font: 600 24px/1 var(--cw-sans, system-ui, sans-serif); cursor: pointer; padding: 0; }
.osk__key:active { background: var(--rz-primary); color: var(--rz-on-primary); }
.osk__key--fn { font-size: 20px; color: var(--rz-text-secondary-color); }
.osk__key--space { flex: 5 1 0; }
.osk__key--bksp, .osk__key--shift, .osk__key--enter, .osk__key--sym, .osk__key--abc, .osk__key--lang { flex: 1.5 1 0; }
.osk__key--tonos { font-size: 34px; color: var(--rz-text-color); }
.osk__key--enter { background: var(--rz-primary); color: var(--rz-on-primary); border-color: transparent; }
.osk__key--on { border-color: var(--rz-primary); color: var(--rz-primary); }
.osk__key--lock { box-shadow: inset 0 -4px 0 var(--rz-primary); }
.osk--num { padding-left: max(8px, calc((100vw - 520px) / 2)); padding-right: max(8px, calc((100vw - 520px) / 2)); }
.osk--num .osk__key { height: 64px; font-size: 28px; }

/* room under the page for the keyboard: the field it serves can always scroll above it */
html.osk-open body, html.osk-open .rz-body { padding-bottom: var(--osk-height, 360px) !important; }

@media (max-width: 700px) {
  .osk { gap: 6px; padding: 6px 4px 8px; }
  .osk__row { gap: 4px; }
  .osk__key { height: 48px; font-size: 18px; }
}