/* Kiosk mode (static/kiosk/kiosk.js): plain clicks only, and the on-screen
 * keypad in the bench look. Loaded only by /kiosk pages. */
html, body, body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
img, a, svg { -webkit-user-drag: none; }

/* Sean, 29 Oct: the keypad floats over the page, a window the student drags
 * by its top bar (kiosk.js sets left, top and zoom), so the page never moves. */
.kp { position: fixed; left: 0; top: 0; z-index: 70; width: 600px; display: grid; gap: 6px; padding: 0 10px 10px; background: #1F3D2B; border: 3px solid #1B1B1B; box-shadow: 6px 6px 0 #1B1B1B; }
.kp[hidden] { display: none; }
.kp-grip { display: flex; align-items: center; gap: 6px; margin: 0 -10px; padding: 6px 10px; background: #1B1B1B; cursor: grab; touch-action: none; }
.kp-dragging .kp-grip { cursor: grabbing; }
.kp-dragging { opacity: .9; }
.kp-move { flex: 1 1 auto; color: #F5F1E8; font: 600 .95rem/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; letter-spacing: .03em; }
.kp-keys { display: grid; gap: 6px; }
.kp-keys[hidden] { display: none; }
.kp:has(.kp-keys[hidden]) { padding-bottom: 0; }
.kp-row { display: flex; gap: 6px; }
.kp-k { flex: 1 1 0; min-width: 0; min-height: 44px; font: 600 1.2rem/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: #1B1B1B; background: #F3EEE2; border: 3px solid #1B1B1B; box-shadow: 3px 3px 0 #1B1B1B; cursor: pointer; touch-action: manipulation; }
.kp-k:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1B1B1B; background: #D4A017; }
.kp-tab, .kp-word { font-size: 1rem; }
.kp-tab.on, .kp-shift.on { background: #D4A017; }
.kp-small { flex: 0 0 auto; min-height: 36px; padding: 0 .7rem; font-size: .9rem; box-shadow: none; border-color: #5A5A52; }
.kp-space { flex: 3 1 0; }
.kp-back, .kp-next { flex: 1.4 1 0; font-size: 1rem; }
.kp-enter { flex: 1.6 1 0; font-size: 1rem; background: #a04e1d; color: #fff; }
/* Sean, 29 Oct: a long job list scrolls in its own box, about half the screen
 * tall (--kvh is the screen height in page pixels, set by kiosk.js). */
.bb-jobs ol { max-height: calc(var(--kvh, 100vh) * .5); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: auto; scrollbar-color: #1B1B1B #E8E1D0; }
/* Size (Sean, 29 Oct: lab monitors are 27 inch). The landing page is 50%
 * bigger on a wide screen; a bench has a size bar (kiosk.js sets the zoom). */
@media (min-width: 1500px) { html.kland { zoom: 1.5; } }
.ksize { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #F5F1E8; color: #1B1B1B; border: 3px solid #1B1B1B; box-shadow: 4px 4px 0 #1B1B1B; font: 600 .9rem/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; }
.ksize button { width: 40px; height: 40px; font: 700 1.3rem/1 "IBM Plex Mono", ui-monospace, monospace; color: #1B1B1B; background: #F3EEE2; border: 3px solid #1B1B1B; cursor: pointer; touch-action: manipulation; }
.ksize button:active { background: #D4A017; }
.ksize input { width: 140px; accent-color: #C2622F; cursor: pointer; }
.ksize output { min-width: 4ch; text-align: right; }
/* Period timer (Sean, 29 Oct): the button bottom left, the strip across the top. */
.ktimer-btn { position: fixed; left: 16px; bottom: 16px; z-index: 60; min-height: 44px; font: 600 .9rem/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: #1B1B1B; background: #F5F1E8; border: 3px solid #1B1B1B; box-shadow: 4px 4px 0 #1B1B1B; padding: .5rem .9rem; cursor: pointer; }
.ktimer { position: fixed; top: 0; left: 0; right: 0; z-index: 4; display: flex; align-items: baseline; justify-content: center; gap: .8rem; padding: .35rem 9rem .45rem 1rem; background: #1B1B1B; color: #F5F1E8; font: 600 1.1rem/1.2 "IBM Plex Mono", ui-monospace, Consolas, monospace; }
.ktimer[hidden] { display: none; }
.ktimer b { font-size: 2rem; color: #D4A017; letter-spacing: .03em; }
body.ktimer-on { padding-top: 3.4rem; }
/* The day's steps in the timer strip (Sean, 29 Oct): the one in progress lit with its time left. */
.ksteps { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.kstep { font-size: .95rem; padding: .15rem .55rem; border: 2px solid #5A5A52; color: #b9b2a2; }
.kstep.past { opacity: .45; text-decoration: line-through; }
.kstep.on { border-color: #D4A017; color: #1B1B1B; background: #D4A017; font-weight: 700; }
.kstep.on b { font-size: 1.15rem; color: #1B1B1B; }
.ktimer { align-items: center; flex-wrap: wrap; }
/* Refresh (Sean, 29 Oct): beside the period timer button, bottom left. */
.krefresh { position: fixed; left: 16px; bottom: 72px; z-index: 60; min-height: 44px; font: 600 .9rem/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: #1B1B1B; background: #F5F1E8; border: 3px solid #1B1B1B; box-shadow: 4px 4px 0 #1B1B1B; padding: .5rem .9rem; cursor: pointer; }
.krefresh:active, .ktimer-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #1B1B1B; }