/* Text-only dock; the picking number keyboard keeps its existing styles. */
.mobile-keyboard {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  box-sizing: border-box;
  max-height: 68vh;
  max-height: 68dvh;
  overflow-y: auto;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface-sunken, #f2f5ee);
  color: var(--ink, #1b2a23);
  border-top: 1px solid var(--line-control, #7f8d7c);
  box-shadow: 0 -8px 24px rgba(22, 61, 39, .16);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.mobile-keyboard[hidden] { display: none !important; }
.mobile-keyboard-inner { max-width: 1080px; margin: 0 auto; }
.mobile-keyboard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mobile-keyboard-text { flex: 1; min-width: 0; }
.mobile-keyboard-label { color: var(--ink-soft, #465446); font: 600 12px/1.4 var(--font, system-ui); }
.mobile-keyboard-value {
  min-height: 32px;
  font: 500 22px/1.4 var(--font, system-ui);
  overflow-x: auto;
  white-space: pre;
  scrollbar-width: thin;
}
.mobile-keyboard-caret { display: inline-block; height: 1em; border-left: 2px solid var(--focus, #1f6f4a); vertical-align: -.15em; }
.mobile-keyboard-selection { background: var(--lime, #dcecc0); color: var(--ink, #1b2a23); }
.mobile-keyboard-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mobile-keyboard-key {
  box-sizing: border-box;
  flex: 1 1 44px;
  min-width: 44px;
  min-height: 48px;
  max-width: 100px;
  padding: 6px;
  border: 1px solid var(--line-control, #7f8d7c);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface, #fff);
  color: var(--ink, #1b2a23);
  font: 600 20px/1.2 var(--font, system-ui);
  cursor: pointer;
  touch-action: manipulation;
}
.mobile-keyboard-key:active, .mobile-keyboard-key[aria-pressed="true"] { background: var(--lime, #dcecc0); }
.mobile-keyboard-key:focus-visible { outline: 3px solid var(--focus, #1f6f4a); outline-offset: 1px; }
.mobile-keyboard-action { flex-grow: 1.5; max-width: 150px; font-size: 14px; background: var(--off-bg, #eceee9); }
.mobile-keyboard-head .mobile-keyboard-key { flex: 0 0 auto; min-width: 64px; }
.mobile-keyboard-done { background: var(--surface-forest, #183f32); color: var(--on-forest, #fff); font-size: 16px; }
.mobile-keyboard-done:active { background: var(--surface-forest-hover, #12352a); }
.mobile-keyboard-space { flex: 6 1 120px; max-width: none; font-size: 16px; }
.mobile-keyboard-cursor { flex: 0 0 52px; }
body.text-keyboard-open::after { content: ""; display: block; height: calc(var(--text-keyboard-height, 300px) + 16px); }
html:has(body.text-keyboard-open) { scroll-padding-bottom: calc(var(--text-keyboard-height, 300px) + 16px); }
dialog.mobile-keyboard-host {
  max-height: calc(100vh - var(--text-keyboard-height, 300px) - 24px);
  max-height: calc(100dvh - var(--text-keyboard-height, 300px) - 24px);
  margin-top: 12px;
  margin-bottom: calc(var(--text-keyboard-height, 300px) + 12px);
  overflow-y: auto;
}
@media (min-width: 700px) {
  .mobile-keyboard-key { min-height: 54px; }
  .mobile-keyboard-row { gap: 8px; margin-top: 8px; }
}
@media (max-width: 520px) {
  .mobile-keyboard-number-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mobile-keyboard { padding-left: 6px; padding-right: 6px; }
  .mobile-keyboard-row { gap: 4px; }
  .mobile-keyboard-row:not(.mobile-keyboard-bottom) .mobile-keyboard-key { flex-basis: calc(14.28% - 4px); }
  .mobile-keyboard-bottom .mobile-keyboard-action { flex-basis: 80px; }
  .mobile-keyboard-cursor { flex-basis: 44px; }
  .mobile-keyboard-space { flex-basis: 80px; }
}