/* Checkline Time Clock — kiosk */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;background:#0f2a44;color:#fff;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;overflow:hidden}
#app{height:100%;display:flex;flex-direction:column;align-items:center;padding:max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom))}
.top{width:100%;display:flex;justify-content:space-between;align-items:center;max-width:900px}
.brand{font-weight:800;letter-spacing:.12em;font-size:clamp(14px,2.2vw,20px)}
.brand span{font-weight:400;letter-spacing:.02em;opacity:.75;margin-left:.4em}
.fs{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;font-size:20px;width:44px;height:44px;cursor:pointer}
.clock{text-align:center;margin:1vh 0 1.5vh}
.time{font-size:clamp(44px,11vmin,110px);font-weight:300;font-variant-numeric:tabular-nums;line-height:1.05}
.date{font-size:clamp(15px,2.6vmin,24px);opacity:.75}
.pad-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:0}
.prompt{font-size:clamp(17px,3vmin,26px);opacity:.9;margin-bottom:1.5vh;min-height:1.3em;text-align:center}
.prompt.err{color:#ff8a80;opacity:1;font-weight:700}
.dots{display:flex;gap:18px;margin-bottom:2.5vh}
.dots i{width:clamp(16px,3vmin,24px);height:clamp(16px,3vmin,24px);border-radius:50%;border:2px solid rgba(255,255,255,.8)}
.dots i.on{background:#4fc3f7;border-color:#4fc3f7}
.dots.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-12px)}40%,80%{transform:translateX(12px)}}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vmin,18px);
  width:min(92vw,calc((100vh - 290px) * .78),460px);min-width:240px}
.pad button{aspect-ratio:1.25;border:0;border-radius:18px;background:#1d4266;color:#fff;font-size:clamp(28px,6vmin,46px);font-weight:500;cursor:pointer;
  box-shadow:0 3px 0 #0a1d30;transition:background .08s}
.pad button:active,.pad button.hit{background:#2f6aa3;transform:translateY(2px);box-shadow:0 1px 0 #0a1d30}
.pad button.aux{background:#16344f;font-size:clamp(17px,3.4vmin,26px);color:#cfe3f5}
.pad.busy{opacity:.5;pointer-events:none}
.result{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 6vw;gap:2.2vh}
.result[hidden]{display:none}
.result.in{background:#1b5e20}.result.out{background:#0d47a1}.result.err{background:#8e1b1b}
.r-icon{font-size:clamp(54px,12vmin,110px);line-height:1}
.r-main{font-size:clamp(26px,6vmin,58px);font-weight:700;line-height:1.2;max-width:22em}
.r-warn{background:rgba(0,0,0,.25);border-radius:10px;padding:10px 16px;font-size:clamp(16px,2.8vmin,22px);color:#ffe082}
.r-quote{font-size:clamp(19px,3.8vmin,34px);font-style:italic;max-width:30em;line-height:1.35;opacity:.95}
.r-quote cite{display:block;font-style:normal;font-size:.7em;opacity:.8;margin-top:.5em}
.r-sub{font-size:clamp(15px,2.6vmin,22px);opacity:.85}
.r-done{margin-top:1vh;background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:12px;font-size:20px;padding:12px 36px;cursor:pointer}
.r-bar{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(255,255,255,.15)}
.r-bar span{display:block;height:100%;width:100%;background:rgba(255,255,255,.7);transform-origin:left}
@media (max-height:520px) and (orientation:landscape){
  #app{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 4vw}
  .top{position:absolute;top:8px;left:16px;right:16px;max-width:none}
  .clock{align-self:center}
  .pad{width:min(46vw,calc((100vh - 120px) * .9))}
}