/* JPF compact keyboard and number pad (floor_keyboard.js). Light-only brand:
   navy glass panel, cream keys, gold actions. Landscape stays well under half
   the screen; the panel is translucent and "Peek" makes it nearly clear.
   Rules are scoped to #jpfKeyboard and reset with `all: unset` so the app's
   64px floor-touch button sizing and colours cannot reshape the keys. */
#jpfKeyboard {
  --kb-navy: #082F57; --kb-navy-key: rgba(28, 74, 120, .95); --kb-cream: #F7F4EA;
  --kb-gold: #F4C430; --kb-gold-ink: #122B42;
  /* Five key rows + echo + gaps fit in half the visible height (dvh follows Chrome's URL bar). */
  --kb-key: clamp(30px, calc((50vh - 90px) / 5), 50px); --kb-gap: 6px;
  position: fixed; z-index: 2147483000; left: 8px; right: 8px; bottom: 8px; top: auto; margin: 0 auto;
  width: min(calc(100vw - 16px), 880px); max-height: 50vh; overflow-x: hidden; overflow-y: auto; box-sizing: border-box;
  padding: 8px; border-radius: 16px; background: rgba(8, 47, 87, .78);
  box-shadow: 0 10px 28px rgba(8, 47, 87, .35); color: var(--kb-cream);
  font: 600 16px/1 "Segoe UI Variable Text", "Aptos", "Segoe UI", Roboto, system-ui, sans-serif;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: opacity .12s ease; animation: jpf-kb-in .14s ease-out;
}
#jpfKeyboard[hidden] { display: none; }
#jpfKeyboard[data-dock="top"] { top: 8px; bottom: auto; }
#jpfKeyboard.is-numpad { --kb-key: clamp(32px, calc((50vh - 104px) / 4), 56px); width: min(320px, calc(100vw - 16px)); margin: 0; }
#jpfKeyboard.is-numpad[data-side="right"] { left: auto; right: 8px; }
#jpfKeyboard.is-numpad[data-side="left"] { left: 8px; right: auto; }
@supports (height: 1dvh) {
  #jpfKeyboard { --kb-key: clamp(30px, calc((50dvh - 90px) / 5), 50px); max-height: 50dvh; }
  #jpfKeyboard.is-numpad { --kb-key: clamp(32px, calc((50dvh - 104px) / 4), 56px); }
}
#jpfKeyboard.is-peeking { opacity: .12; }
#jpfKeyboard.is-dragging { transition: none; }
#jpfKeyboard.is-returning { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
#jpfKeyboard.is-dragging .jpf-kb-grip { cursor: grabbing; }
/* Top-layer suggestions must not catch a release/tap while the keys return. */
.jpf-kb-moving :is(.jpf-picker-results, .search-or-select-list) { pointer-events: none !important; }
/* Fade only: a moving panel would be measured in the wrong place while it settles. */
@keyframes jpf-kb-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #jpfKeyboard, #jpfKeyboard.is-returning { animation: none; transition: none; } }
@media print { #jpfKeyboard { display: none !important; } }

#jpfKeyboard button {
  all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  min-width: 0; text-align: center; cursor: pointer; font: inherit; touch-action: manipulation;
}
#jpfKeyboard button[hidden] { display: none; }

/* The value being typed is always visible here, even if the field is covered. */
#jpfKeyboard .jpf-kb-echo { display: flex; align-items: center; gap: var(--kb-gap); min-height: 40px; }
/* Long labels wrap and grow the row rather than spill over the keys. */
#jpfKeyboard .jpf-kb-echo-label { flex: 0 0 auto; max-width: min(36%, 16em); white-space: normal; overflow-wrap: anywhere; font-size: 12px; line-height: 13px; opacity: .92; }
#jpfKeyboard .jpf-kb-echo-value {
  display: block; flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 10px; border-radius: 9px; box-sizing: border-box;
  background: rgba(255, 255, 255, .96); color: var(--kb-navy); font-size: 21px; line-height: 40px;
  font-variant-numeric: tabular-nums; white-space: pre; overflow: hidden;
}
#jpfKeyboard .jpf-kb-echo-value::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--kb-gold-ink); animation: jpf-kb-caret 1s steps(1) infinite; }
#jpfKeyboard .jpf-kb-echo-value.is-empty::before { content: attr(data-hint); color: #6A7F96; font-weight: 500; }
@keyframes jpf-kb-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #jpfKeyboard .jpf-kb-echo-value::after { animation: none; } }
#jpfKeyboard .jpf-kb-tool {
  flex: 0 0 auto; min-width: 56px; height: 40px; padding: 0 10px; border-radius: 9px;
  border: 1px solid rgba(247, 244, 234, .6); color: var(--kb-cream); font-size: 14px; position: relative;
}
/* 40px look, 48px touch target: the hit area (inside the 1px border, so -5px) reaches into the panel padding and the key gap only. */
#jpfKeyboard .jpf-kb-tool::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
#jpfKeyboard .jpf-kb-tool:active { background: rgba(247, 244, 234, .22); }
#jpfKeyboard .jpf-kb-grip { touch-action: none; cursor: grab; min-width: 48px; }
#jpfKeyboard .jpf-kb-grip span { display: grid; grid-template-columns: 4px 4px; gap: 3px; pointer-events: none; }
#jpfKeyboard .jpf-kb-grip i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
#jpfKeyboard.is-numpad .jpf-kb-echo { display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto 40px; height: auto; row-gap: 4px; }
#jpfKeyboard.is-numpad .jpf-kb-echo-label { grid-column: 1 / -1; max-width: none; margin: 2px 2px 0; }
#jpfKeyboard.is-numpad .jpf-kb-tool { min-width: 48px; padding: 0 6px; font-size: 13px; }
#jpfKeyboard.is-numpad [data-kb-tool="peek"] { display: none; }
#jpfKeyboard.is-numpad [data-kb-tool="done"] { display: none; }

#jpfKeyboard .jpf-kb-keys { margin-top: var(--kb-gap); }
#jpfKeyboard .jpf-kb-row { display: flex; gap: var(--kb-gap); }
#jpfKeyboard .jpf-kb-row + .jpf-kb-row { margin-top: var(--kb-gap); }
#jpfKeyboard .jpf-kb-key {
  flex: 1 1 0; height: var(--kb-key); border-radius: 9px;
  background: rgba(247, 244, 234, .93); color: var(--kb-navy); box-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  font-size: 21px; font-variant-numeric: tabular-nums;
}
#jpfKeyboard .jpf-kb-key:active { background: var(--kb-gold); color: var(--kb-gold-ink); }
#jpfKeyboard .jpf-kb-key:disabled { opacity: .28; cursor: default; }
#jpfKeyboard .jpf-kb-key:is(.is-back, .is-shift, .is-symbols, .is-letters, .is-enter, .is-clear, .is-sign) {
  background: var(--kb-navy-key); color: var(--kb-cream); font-size: 17px; box-shadow: inset 0 0 0 1px rgba(247, 244, 234, .18);
}
#jpfKeyboard .jpf-kb-key.is-shift[aria-pressed="true"] { background: var(--kb-cream); color: var(--kb-navy); }
#jpfKeyboard .jpf-kb-key.is-shift.is-locked { box-shadow: inset 0 -4px 0 var(--kb-gold); }
#jpfKeyboard .jpf-kb-key:is(.is-next, .is-done) { background: var(--kb-gold); color: var(--kb-gold-ink); font-size: 18px; flex-grow: 1.5; }
#jpfKeyboard .jpf-kb-key.is-back { flex-grow: 1.4; font-size: 22px; }
#jpfKeyboard .jpf-kb-key.is-shift { flex-grow: 1.3; font-size: 22px; }
#jpfKeyboard .jpf-kb-key.is-space { flex-grow: 4.2; font-size: 15px; color: #4A6380; }
#jpfKeyboard .jpf-kb-key:is(.is-symbols, .is-letters) { flex-grow: 1.3; font-size: 15px; }
#jpfKeyboard.is-numpad .jpf-kb-key { font-size: 26px; }
#jpfKeyboard.is-numpad .jpf-kb-key:is(.is-next, .is-done, .is-clear) { font-size: 17px; }
#jpfKeyboard.is-numpad .jpf-kb-key.is-sign { font-size: 26px; }
#jpfKeyboard.is-numpad .jpf-kb-row > .jpf-kb-key:last-child { flex-grow: 1.25; }

/* The field being filled gets a gold ring so it is easy to find behind the glass. */
/* Drawn inside the field so footers and scroll areas with overflow:hidden cannot clip it. */
.jpf-kb-target { outline: 3px solid #F4C430 !important; outline-offset: -3px !important; }

#jpfKeyboard .jpf-kb-keys[hidden], #jpfKeyboard .jpf-kb-choices[hidden] { display: none; }
#jpfKeyboard .jpf-kb-choices p { margin: 8px 0; font-size: 13px; line-height: 1.3; }
#jpfKeyboard .jpf-kb-lot-list { max-height: min(180px, 23dvh); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
#jpfKeyboard .jpf-kb-lot {
  display: flex; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px;
  padding: 8px 12px; margin-bottom: 6px; border-radius: 9px; text-align: left;
  background: var(--kb-cream); color: var(--kb-navy); line-height: 1.3;
}
#jpfKeyboard .jpf-kb-lot strong { overflow-wrap: anywhere; }
#jpfKeyboard .jpf-kb-lot span { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
#jpfKeyboard .jpf-kb-manual { min-height: 44px; padding: 6px 12px; width: 100%; border: 1px solid var(--kb-cream); border-radius: 9px; }
#jpfKeyboard .jpf-kb-lot:active, #jpfKeyboard .jpf-kb-manual:active { background: var(--kb-gold); color: var(--kb-gold-ink); }
#jpfKeyboard .jpf-kb-close { min-width: 48px; min-height: 48px; padding: 4px; }
#jpfKeyboard .jpf-kb-close svg { display: block; width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2; }