/* public/css/keypad.css: the answer keypad on phones (Round 8 note 13; DECISIONS 69; docs/design/round8-keypad.md §5, §7, §8). Tokens only (themes.css holds every color). One set of height tokens draws the dock and reserves its space, so the space kept free at the bottom of the page always equals the dock. Nothing here animates: keys switch color instantly. */ :root { --kp-key: clamp(48px, 7.2svh, 60px); --kp-gap: 6px; --kp-pad: 8px; --kp-safe: max(8px, env(safe-area-inset-bottom)); --kp-field: 52px; --kp-rows: 4; --kp-grid-h: calc(var(--kp-rows) * var(--kp-key) + (var(--kp-rows) - 1) * var(--kp-gap)); --kp-h-keys: calc(var(--kp-pad) + var(--kp-field) + var(--kp-gap) + var(--kp-grid-h) + var(--kp-safe)); --kp-h-next: calc(var(--kp-pad) + 56px + var(--kp-safe)); --kp-h-lazy: calc(var(--kp-pad) + var(--kp-grid-h) + var(--kp-safe)); /* the landing page: no field row */ } /* Landscape and short screens: an 8 × 2 grid of 44 px keys under a 44 px field row, about 160 px in all. */ @media (max-height: 480px) { :root { --kp-key: 44px; --kp-field: 44px; --kp-rows: 2; } } /* ---- reserved space, from the first paint (keypad.js mirrors the dock's mode on ) ---- */ html[data-keypad="on"]:not([data-kp-mode]) body:has(input[data-kp]:not([data-kp-lazy])) { padding-bottom: var(--kp-h-keys); } html[data-keypad="on"][data-kp-mode="keys"] body { padding-bottom: var(--kp-h-keys); } html[data-keypad="on"][data-kp-mode="lazy"] body { padding-bottom: var(--kp-h-lazy); } html[data-keypad="on"][data-kp-mode="next"] body { padding-bottom: var(--kp-h-next); } html[data-keypad="on"][data-kp-mode] { scroll-padding-bottom: calc(var(--kp-h-keys) + 8px); } html[data-keypad="on"][data-kp-mode="next"] { scroll-padding-bottom: calc(var(--kp-h-next) + 8px); } html[data-keypad="on"][data-kp-mode="hidden"] { scroll-padding-bottom: 0; } /* ---- what the keypad replaces, and keyboard-only words ---- */ html[data-keypad="on"][data-kp-mode="keys"] [data-kp-dup], html[data-keypad="on"][data-kp-mode="lazy"] [data-kp-dup], html[data-keypad="on"][data-kp-mode="next"] [data-kp-dup] { display: none !important; } html[data-keypad="on"] .kbd-only { display: none !important; } html:not([data-keypad="on"]) .kp-only { display: none !important; } html[data-keypad="on"] .choice, html[data-keypad="on"] .untimed-choices .button { min-height: 48px; } /* ---- the dock ---- */ .kp-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; /* under the flight HUD (49), moments and flyers (50), sparks (51) */ box-sizing: border-box; width: 100%; max-width: 28rem; margin: 0 auto; padding: var(--kp-pad) var(--kp-pad) var(--kp-safe); background: var(--bg); background-image: none; border-top: 1px solid var(--rule); color: var(--ink); touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } html:not([data-keypad="on"]) .kp-dock, .kp-dock[data-mode="hidden"] { display: none; } .kp-dock .kp-next { display: none; } .kp-dock[data-mode="next"] .kp-field, .kp-dock[data-mode="next"] .kp-grid, .kp-dock[data-mode="lazy"] .kp-field { display: none; } .kp-dock[data-mode="next"] .kp-next { display: block; width: 100%; height: 56px; margin: 0; font-size: 1.125rem; font-weight: 800; } .kp-dock[data-mode="next"] .kp-next[data-ready="0"] { opacity: 0.85; } /* The field row: the real answer field (with its $, % or unit) and the keyboard button. */ .kp-field { display: flex; align-items: stretch; height: var(--kp-field); margin: 0 0 var(--kp-gap); } .kp-field > * { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s2, 8px); margin: 0; } .kp-field input { flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; box-sizing: border-box; font-size: max(16px, 1.5rem); } .kp-field .answer-input { padding: 4px 8px; } .kp-field .affix { font-size: 1.5rem; } .kp-field .affix.unit { font-size: var(--fs-body, 1rem); } .kp-field .ob-field { height: 100%; box-sizing: border-box; border-width: 2px; } /* The keyboard button beside the field (keypad-native / keypad-show). */ .kp-wrap { display: flex; align-items: center; gap: var(--s2, 8px); flex: 1 1 8rem; min-width: 0; } .answer-row > .kp-wrap .answer-input { flex: 1 1 auto; } .kp-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule); border-radius: 6px; background: var(--bg); color: var(--ink); cursor: pointer; touch-action: manipulation; } .kp-toggle[hidden] { display: none; } .kp-toggle svg { width: 24px; height: 24px; } /* The grid: digits in phone-dial order, backspace, the format key, a tall Go (placed by keypad.js). */ .kp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); grid-template-rows: repeat(4, var(--kp-key)); gap: var(--kp-gap); } .kp-grid[data-shape="wide"] { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(2, var(--kp-key)); } .kp-key { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; margin: 0; padding: 0; font: 500 1.5rem/1 var(--font-ui); border: 1px solid var(--rule); border-radius: 6px; background: var(--field); color: var(--ink); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .kp-key:active, .kp-key[data-down] { background: var(--mark); } .kp-key[data-key="back"], .kp-key[data-key="minus"], .kp-key[data-key="slash"], .kp-key[data-key="comma"] { font-size: 1.375rem; } .kp-go { font-size: 1.125rem; font-weight: 800; background: var(--ink); color: var(--bg); border-color: var(--ink); } .kp-go:active, .kp-go[data-down] { background: var(--ink); color: var(--bg); opacity: 0.8; } .kp-key[aria-disabled="true"] { opacity: 0.5; } .kp-blank { display: block; } /* ---- themes (tokens only) ---- */ html[data-theme="terminal"] .kp-key, html[data-theme="terminal"] .kp-toggle, html[data-theme="terminal"] .kp-next { border-radius: 0; font-family: var(--font-ui); } html[data-theme="high-contrast"] .kp-key, html[data-theme="high-contrast"] .kp-toggle { border: 2px solid var(--ink); } /* A page wider than the phone makes a mobile browser zoom out, and a fixed dock then sits partly below the screen. The focus bar's compact level (lv 40 · 16 / 8,670 +16) beside a four-digit wallet overflowed 375 px: let the level give way. */ html[data-keypad="on"] .site-header.focus .level-stat.compact { min-width: 0; overflow: hidden; }