/* Fonts, self-hosted (latin subset only). */
@font-face{
  font-family:'Zilla Slab';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/zillaslab-400.woff2') format('woff2');
}
@font-face{
  font-family:'Zilla Slab';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/zillaslab-500.woff2') format('woff2');
}
@font-face{
  font-family:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/zillaslab-600.woff2') format('woff2');
}
@font-face{
  font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/zillaslab-700.woff2') format('woff2');
}
@font-face{
  font-family:'DotGothic16';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/dotgothic16-400.woff2') format('woff2');
}
@font-face{
  font-family:'Caveat';font-style:normal;font-weight:600 700;font-display:swap;
  src:url('fonts/caveat.woff2') format('woff2');
}

html,body{margin:0;padding:0;}

.desk{
  --card:#EFE6D0; --rule:#7A7263; --print:#241F1A; --stamp:#565073; --pen:#26438C; --warn:#8C3B2E;
  min-height:100vh; background:radial-gradient(120% 80% at 50% 0%, #3E433A 0%, #2B2E28 70%);
  color:#241F1A; font-family:'Zilla Slab',Georgia,serif; padding:22px 14px 60px; box-sizing:border-box;
}
.desk *{box-sizing:border-box;}
.wrap{max-width:430px;margin:0 auto;}
.masthead{color:#D9D2BE;}
.masthead h1{font-size:26px;font-weight:600;margin:0 0 4px;line-height:1.15;}
.masthead p{margin:0;font-size:14px;line-height:1.5;color:#A9A493;max-width:34ch;}

.tiles{display:flex;gap:10px;margin:16px 0;}
.tile{flex:1;min-width:0;text-align:left;background:#EFE6D0;border:0;border-top:5px solid var(--stamp);
  padding:12px 12px 10px;cursor:pointer;font-family:inherit;box-shadow:0 8px 20px rgba(0,0,0,.34);}
.tile.now{border-top-color:var(--pen);}
.tile .tag{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6B6355;}
.tile .figure{display:block;font-family:'Caveat',cursive;font-weight:700;font-size:44px;line-height:1;
  color:var(--pen);margin:4px 0 2px;}
.tile .sub{display:block;font-size:12.5px;line-height:1.35;color:#4A4438;}
.tile .cue{display:block;margin-top:7px;font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:#8A8271;}
.tile:focus-visible{outline:2px solid #C9C2A8;outline-offset:2px;}

.actions{display:flex;gap:8px;margin:0 0 16px;flex-wrap:wrap;}
.btn{font-family:'Zilla Slab',serif;font-size:14px;font-weight:600;border:1px solid #6E6A5A;
  background:#413F37;color:#E7E0CC;padding:9px 14px;border-radius:2px;cursor:pointer;}
.btn.key{background:var(--stamp);border-color:var(--stamp);color:#F1EEFF;}
.btn:disabled{opacity:.55;cursor:default;}
.btn:focus-visible{outline:2px solid #C9C2A8;outline-offset:2px;}

.card{background:var(--card);padding:16px 18px 24px;box-shadow:0 14px 34px rgba(0,0,0,.45);position:relative;}
.cardhead{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--print);padding-bottom:7px;margin-bottom:12px;}
.cardhead span:last-child{font-weight:500;letter-spacing:.02em;text-transform:none;color:#6B6355;}

.grid{border:1px solid var(--print);}
.row{display:flex;border-bottom:1px solid var(--rule);min-height:34px;}
.row:last-child{border-bottom:0;}
.row .lab{width:34%;display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--print);font-weight:600;font-size:14px;}
.row .val{flex:1;display:flex;align-items:center;gap:8px;padding:0 8px;background:none;border:0;
  width:100%;text-align:left;font:inherit;cursor:pointer;color:inherit;}
.row .val:focus-visible{outline:2px solid var(--stamp);outline-offset:-2px;}
.punched{font-family:'DotGothic16',monospace;font-size:15px;color:var(--stamp);}
.dur{margin-left:auto;font-family:'Caveat',cursive;font-weight:700;font-size:18px;color:var(--pen);white-space:nowrap;}
.dur.flag{color:var(--warn);}
.hint{color:#9C9481;font-size:13px;font-style:italic;}
.row.editing{background:#E5DBC2;}
.editor{display:flex;gap:6px;padding:8px;align-items:center;flex-wrap:wrap;}
.editor input{font-family:'DotGothic16',monospace;font-size:14px;padding:6px 7px;border:1px solid var(--rule);
  background:#F7F1E1;color:var(--stamp);border-radius:2px;}
.mini{font-size:13px;font-weight:600;border:0;background:none;padding:6px 4px;cursor:pointer;
  color:var(--print);text-decoration:underline;}
.mini.go{color:var(--pen);}
.mini.drop{color:var(--warn);}
.more{width:100%;background:none;border:0;border-top:1px dashed var(--rule);padding:8px;
  font:600 13px 'Zilla Slab',serif;color:#7A7263;cursor:pointer;}

.totals{margin-top:18px;}
.tline{display:flex;align-items:flex-end;gap:8px;font-weight:700;font-size:15px;margin-bottom:12px;}
.tline .fill{flex:1;border-bottom:1px solid var(--print);}
.tline .num{font-family:'Caveat',cursive;font-weight:700;font-size:22px;color:var(--pen);line-height:1;
  min-width:56px;text-align:center;border-bottom:1px solid var(--print);padding-bottom:2px;}
.tline input.num{border:0;border-bottom:1px solid var(--print);background:transparent;width:66px;}
.tline input.num:focus{outline:none;}
.big{font-size:16px;}
.big .num{font-size:34px;min-width:88px;}

.aside{margin-top:16px;color:#CFC8B4;font-size:14px;line-height:1.55;}
.aside h2{font-size:15px;font-weight:600;color:#E7E0CC;margin:0 0 6px;}
.daybox{border-top:1px solid #4C5049;padding:10px 0 12px;}
.dayhead{display:flex;justify-content:space-between;align-items:center;color:#EFE6D0;font-weight:600;font-size:14px;}
.copy{background:none;border:1px solid #5E6257;color:#C6BFAB;font:600 12px 'Zilla Slab',serif;
  padding:3px 9px;border-radius:2px;cursor:pointer;}
.shift{display:flex;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px dotted #4C5049;font-size:14px;}
.shift .n{width:16px;color:#8A8877;font-size:12px;}
.shift .span{flex:1;}
.shift b{font-weight:600;color:#EFE6D0;font-variant-numeric:tabular-nums;}
.shift .mins{width:58px;text-align:right;color:#8A8877;font-size:12px;}
.daytotal{display:flex;justify-content:space-between;padding-top:7px;font-size:14px;}
.daytotal b{color:#EFE6D0;font-weight:600;}
.small{font-size:13px;margin:6px 0 0;}
.warn{color:#E9A08E;}
.err{background:#4A2E27;border-left:3px solid var(--warn);color:#F0C9BC;padding:10px 12px;font-size:14px;margin:12px 0;}

.stage{position:fixed;inset:0;background:#15170F;z-index:40;display:flex;flex-direction:column;}
.stagebar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;
  color:#D9D2BE;font-size:14px;font-weight:600;background:#1F221B;}
.stagebody{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.stagebody video,.stagebody img{display:block;width:auto;height:auto;max-width:100%;
  max-height:calc(100vh - 172px);max-height:calc(100svh - 172px);}
.guide{position:absolute;border:2px dashed rgba(239,230,208,.65);width:34%;height:78%;pointer-events:none;}
.shutterbar{display:flex;justify-content:center;align-items:center;gap:14px;padding:16px;background:#1F221B;}
.readnote{color:#C9C2A8;font-size:14px;font-weight:600;text-align:center;min-height:1.2em;letter-spacing:.01em;}
.shutter{width:66px;height:66px;border-radius:50%;border:4px solid #EFE6D0;background:#565073;cursor:pointer;}
.shutter:focus-visible{outline:2px solid #C9C2A8;outline-offset:3px;}

.frame{position:relative;display:inline-block;line-height:0;max-width:100%;touch-action:none;}
.frame img{pointer-events:none;}
.cropbox{position:absolute;border:1px solid #EFE6D0;box-shadow:0 0 0 9999px rgba(10,12,8,.62);cursor:move;}
.cropbox .third{position:absolute;background:rgba(239,230,208,.28);}
.hand{position:absolute;width:30px;height:30px;background:none;border:0;padding:0;cursor:pointer;touch-action:none;}
.hand::after{content:'';position:absolute;width:16px;height:16px;border:3px solid #EFE6D0;}
.hand.nw{left:-15px;top:-15px;}.hand.nw::after{left:7px;top:7px;border-right:0;border-bottom:0;}
.hand.ne{right:-15px;top:-15px;}.hand.ne::after{right:7px;top:7px;border-left:0;border-bottom:0;}
.hand.sw{left:-15px;bottom:-15px;}.hand.sw::after{left:7px;bottom:7px;border-right:0;border-top:0;}
.hand.se{right:-15px;bottom:-15px;}.hand.se::after{right:7px;bottom:7px;border-left:0;border-top:0;}

.scan{position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;
  background:linear-gradient(180deg,rgba(86,80,115,0) 0%,rgba(86,80,115,.22) 80%,rgba(86,80,115,.55) 100%);
  animation:sweep 1.5s ease-in-out infinite;}
@keyframes sweep{0%{transform:translateY(-45%)}100%{transform:translateY(255%)}}
.ink{animation:hit .32s ease-out both;}
@keyframes hit{from{opacity:0;transform:translateY(-3px) scale(1.06)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.scan{animation:none;opacity:.25}.ink{animation:none}}