/* =============================================================================
   Alive · on-screen keyboard
   .osk.reach  — kiosk: docked in the comfortable reach band (≈44–76% height)
   .osk.bottom — console / desktop touchscreens: docked to the bottom
   ========================================================================== */
.osk-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(8, 3, 5, .82); animation: oskFade .2s; }
.osk { position: fixed; z-index: 101; left: 0; right: 0; display: flex; flex-direction: column; gap: .6em;
  font-family: var(--sans, system-ui); color: var(--text, #f8efe7); animation: oskUp .28s cubic-bezier(.2, .7, .2, 1); user-select: none; -webkit-user-select: none; }
@keyframes oskFade { from { opacity: 0; } }
@keyframes oskUp { from { opacity: 0; transform: translateY(24px); } }

/* Header: prompt + live value + predictions. Sits right above the keys so the eye never travels far. */
.osk .head { display: flex; flex-direction: column; gap: .55em; }
.osk .prompt { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.osk .prompt b { font-family: var(--serif, Georgia); font-weight: 400; font-size: 1.6em; line-height: 1.1; }
.osk .prompt .x { font-size: .9em; padding: .4em .8em; border-radius: 999px; border: 1px solid rgba(255, 232, 214, .2); color: rgba(248, 239, 231, .7); }
.osk .val { display: flex; align-items: center; min-height: 2.6em; padding: .5em .9em; border-radius: .7em; background: #fff8ef; color: #1c0d10; font-size: 1.5em; font-weight: 600; letter-spacing: .01em; overflow: hidden; white-space: nowrap; }
.osk .val .ph { color: rgba(28, 13, 16, .4); font-weight: 500; }
.osk .val .caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; background: #c9405f; animation: oskBlink 1s steps(2) infinite; vertical-align: middle; }
.osk .val .clr { margin-left: auto; padding: .1em .45em; border-radius: 999px; font-size: .8em; color: rgba(28, 13, 16, .5); }
.osk .val.bad { box-shadow: inset 0 0 0 2px #e07a2e; }
.osk .val.good { box-shadow: inset 0 0 0 2px #3fa463; }
@keyframes oskBlink { 50% { opacity: 0; } }
.osk .hint { font-size: .8em; color: rgba(248, 239, 231, .6); min-height: 1.1em; }
.osk .preds { display: flex; gap: .45em; overflow-x: auto; scrollbar-width: none; min-height: 2.6em; }
.osk .preds::-webkit-scrollbar { display: none; }
.osk .preds button { flex: none; padding: .55em 1.1em; border-radius: 999px; background: rgba(255, 238, 226, .1); border: 1px solid rgba(255, 232, 214, .16); font-weight: 600; font-size: 1em; }
.osk .preds button.dom { background: rgba(244, 205, 130, .16); border-color: rgba(244, 205, 130, .4); color: #f4cd82; }

/* Keys */
.osk .keys { display: flex; flex-direction: column; gap: .42em; padding: .6em; border-radius: 1em; background: #1e0e14; border: 1px solid rgba(255, 232, 214, .1); box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, .6); }
.osk .r { display: flex; gap: .42em; justify-content: center; }
.osk .k { flex: 1 1 0; min-width: 0; height: 3.3em; border-radius: .55em; background: #3a2028; color: #fff4ea; font-size: 1.15em; font-weight: 600;
  border: 0; border-bottom: 3px solid #241016; display: flex; align-items: center; justify-content: center; transition: transform .06s, background .1s; touch-action: manipulation; }
.osk .k:active, .osk .k.down { transform: translateY(2px); border-bottom-width: 1px; background: #5a2e3a; }
.osk .k.fn { background: #2a151c; font-size: .95em; color: rgba(255, 244, 234, .8); }
.osk .k.on { background: #f4cd82; color: #2a0f18; border-bottom-color: #b8914b; }
.osk .k.space { flex-grow: 4.5; }
.osk .k.go { flex-grow: 1.9; background: linear-gradient(135deg, #e9a356, #c9405f); color: #fff; border-bottom-color: #7d1d34; font-weight: 800; }
.osk .k.go[disabled] { opacity: .4; }
.osk .k.w15 { flex-grow: 1.5; }
.osk .pad .k { height: 3.6em; font-size: 1.6em; }
.osk .pad .k.go { font-size: 1.15em; }
.osk .r.half { padding: 0 4.5%; }

/* Kiosk reach-band dock: header ~36–44% of screen height, keys ~44–76%. */
.osk.reach { top: 27vh; height: auto; padding: 2vh 4vw 2.2vh; font-size: clamp(14px, 1.55vh, 32px); background: linear-gradient(180deg, #1a0b10, #120709); border-top: 1px solid rgba(255,232,214,.12); border-bottom: 1px solid rgba(255,232,214,.12); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.osk.reach .keys { height: 32vh; justify-content: space-between; }
.osk.reach .r { flex: 1; }
.osk.reach .k { height: auto; }
.osk.reach.pad-mode .keys { width: 70%; margin: 0 auto; }

/* Bottom dock for console/desktop touch */
.osk.bottom { bottom: 0; padding: .8em 1em calc(.8em + env(safe-area-inset-bottom, 0px)); font-size: 15px; background: rgba(14, 6, 8, .96); border-top: 1px solid rgba(255, 232, 214, .12); }
.osk.bottom .keys { max-width: 980px; width: 100%; margin: 0 auto; }
.osk.bottom .head { max-width: 980px; width: 100%; margin: 0 auto; }
.osk.bottom.inline .head .val, .osk.bottom.inline .head .prompt { display: none; }  /* editing a visible textarea */
.osk.bottom.pad-mode .keys { max-width: 460px; }
@media (max-width: 520px) { .osk.bottom { font-size: 13px; padding-left: .4em; padding-right: .4em; } .osk .r { gap: .3em; } .osk .keys { gap: .3em; padding: .4em; } }