/* Shiftpad — a calm, precise time desk. Print keeps its original stylesheet. */
@font-face{font-family:Manrope;src:url('/fonts/manrope-400.woff2?v=a30ddcd349') format('woff2');font-weight:400 800;font-display:swap}
@media screen{
:root{--desk:#eef2f7;--ink:#142c49;--ink-2:#52657b;--rule:#bac9d8;--rule-soft:#e0e7ee;--stub:#f4f7fb;--red:#ae341b;--red-bg:#fff1e8;--f-ui:Manrope,sans-serif;--f-cond:Manrope,sans-serif}
body{font-family:var(--f-ui)}.site,main,.site-foot{max-width:1480px;padding-left:clamp(16px,3.5vw,52px);padding-right:clamp(16px,3.5vw,52px)}
.site{min-height:80px;border-bottom:1px solid #d2dce7;gap:24px}.brand{font-size:24px;letter-spacing:-1px;text-transform:none;display:flex;align-items:center;gap:10px}.brand svg{width:34px;height:34px}.brand span{color:inherit}.site nav a{font-size:15px;font-weight:600}
.intro{grid-template-columns:1fr minmax(0,55ch);padding:30px 0 24px;gap:24px}.intro h1{text-transform:none;font-size:clamp(32px,3.5vw,48px);font-weight:800;line-height:1.12;letter-spacing:-1.6px}.intro p{font-size:16px;line-height:1.65}.toolbar{padding:16px 0 20px}.sample-note{max-width:65ch;font-size:14px}.toolbar-buttons{gap:10px}.btn{border:1px solid #acbdcf;border-radius:8px;min-height:46px;font-size:15px;background:white}.btn.solid{background:#183a61;border-color:#183a61}.btn.ghost{background:transparent}.btn:hover{transform:translateY(-1px)}
.card{grid-template-columns:minmax(0,1fr) 350px;border:1px solid #cbd7e5;border-radius:16px;box-shadow:0 10px 35px #233d5b0b;overflow:clip}.sheet{padding:24px}.sheet-head{grid-template-columns:1fr;gap:16px;border-bottom:1px solid var(--rule-soft);padding-bottom:22px}.sheet-title{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.sheet-title strong{font:700 16px/1.4 var(--f-ui)}.form-no{font-size:12px;letter-spacing:1.5px;color:#58718c}.who{grid-template-columns:1fr 1fr 160px 110px;gap:12px}.field{font-size:13px;text-transform:none;letter-spacing:0;gap:6px}.field input,.field select{background:#fff;border:1px solid #bccbd9;border-radius:6px;min-height:44px;padding:8px 10px;font-size:16px}
.punch{margin-top:16px}.punch thead th{font-size:12px;letter-spacing:.08em;color:#52657b;padding:12px 8px}.punch .unit{font-size:12px}.punch tbody tr.day th,.punch tbody td{padding:10px 8px}.dname{text-transform:none;font-size:16px;letter-spacing:0}.ddate{font-size:12px}.tin,.bin{min-height:44px;border-color:#c4cfdb;border-radius:6px;font-size:16px;padding:7px 9px}.bin.rng{font-size:15px}.punch .dec{font:700 18px/1.3 var(--f-ui)}.punch .hm{font-size:13px}.keys{font-size:14px;line-height:1.7;margin-top:20px}.punch .nextday{font-size:10px;padding:4px}.out-wrap{gap:4px}
.stub{border:0;border-left:1px solid #d4deea;background:var(--stub);padding:24px;gap:18px;position:relative}.stub::before,.stub::after{display:none}.stub h2{font-size:13px;letter-spacing:1.4px;color:#52657b}.stamp{font-size:12px;letter-spacing:1px;top:22px;right:20px;border-width:1px;transform:none;border-radius:4px;padding:4px 7px}.total-block{padding:0 0 18px;gap:5px;border-color:#d5dfea}.total-block .lbl{font:600 14px/1.4 var(--f-ui);letter-spacing:0;text-transform:none}.total-block .big{font:800 60px/1.1 var(--f-ui);letter-spacing:-3px}.total-block .big-hm{font-size:16px}.split{gap:12px}.split>div{background:#fff;padding:12px;border-radius:8px;border:1px solid #d9e3ec}.split dt{font-size:12px;letter-spacing:0;text-transform:none}.split dd span{font:800 22px/1.5 var(--f-ui)}.split dd small{font-size:12px}.split .ot{border-top:3px solid #c64b2b}.rules{padding-top:0}.rules legend{font-size:15px;letter-spacing:0;text-transform:none;margin-bottom:12px;font-weight:800}.rule-grid{gap:14px 10px}.rule-grid .field{font-size:12px}.rule-note{font-size:12px;line-height:1.65}.pay tfoot th{font-size:13px;letter-spacing:0;text-transform:none}.pay tfoot td{font:800 29px/1.2 var(--f-ui)}.pay-note{font-size:13px;line-height:1.65}.pay td{font-size:16px}.pay th span{font-size:12px;overflow-wrap:anywhere}
.week-view{padding:18px 0 2px;border-top:1px solid var(--rule-soft)}.week-view h3{margin:0 0 14px;font-size:13px;font-weight:800}.hours-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;align-items:end}.hours-day{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}.hours-track{height:60px;width:100%;display:flex;align-items:flex-end;background:#e3eaf2;border-radius:4px;overflow:hidden}.hours-track i{display:block;width:100%;height:var(--height,0%);background:#20466e;min-height:0;transition:height .2s}.hours-day.ot .hours-track i{background:#c64b2b}.hours-day small{font-size:11px;color:#52657b}.hours-day b{font:600 11px/1.2 var(--f-ui)}.week-view p{font-size:11px;color:#52657b;margin:12px 0 0;line-height:1.5}.hours-bars+.hours-bars{margin-top:18px}
.how{margin-top:48px}.how h2,.faq h2{font-size:30px;text-transform:none;letter-spacing:-.8px}.how-cols{gap:24px}.how-cols>div{background:#fff;border:1px solid #d8e1eb;padding:24px;border-radius:12px}.site-foot{padding-top:30px;padding-bottom:70px}.mobile-bar{position:static;margin-top:12px;border-radius:10px;box-shadow:none}
@media(max-width:1200px){.card{grid-template-columns:minmax(0,1fr) 330px}.sheet{padding:20px}.who{grid-template-columns:1fr 1fr}.stub{padding:20px}.tin,.bin{padding:6px}.out-wrap{flex-wrap:wrap}.intro{grid-template-columns:1fr;gap:10px}.intro p{max-width:75ch}}
@media(max-width:900px){.card{grid-template-columns:1fr}.stub{border-left:0;border-top:1px solid #d4deea;display:grid;grid-template-columns:1fr 1fr;gap:22px}.stub h2{grid-column:1/-1}.total-block{grid-column:1}.split{grid-column:2}.rules{grid-column:1;grid-row:3/5}.pay{grid-column:2;grid-row:3}.pay-note{grid-column:2}.week-view{grid-column:1/-1}.stamp{top:20px}.site{flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:8px}.site nav{margin-left:auto}.intro{padding-top:24px}}
@media(max-width:600px){.site nav{gap:0;width:100%;justify-content:space-between}.site nav a{font-size:13px;padding:8px 4px}.brand{font-size:23px}.intro h1{font-size:34px}.intro p{font-size:16px}.toolbar-buttons{width:100%;display:grid;grid-template-columns:1fr 1fr}.toolbar-buttons .btn{width:100%}.sheet{padding:16px 10px}.sheet-head{padding:0 6px 18px}.who{gap:12px}.sheet-title strong{white-space:normal}.card{overflow:clip}.punch tbody tr.day{padding:14px 4px}.tin,.bin{font-size:16px;min-height:44px;max-width:none;width:100%;padding:8px}.punch tbody tr.day th,.punch tbody td{padding:4px}.punch .dec{font-size:18px}.punch .hm{font-size:13px}.punch .c-time{width:auto}.stub{display:flex;padding:20px;gap:18px}.total-block .big{font-size:58px}.split>div{padding:14px}.rule-grid .field{font-size:13px}.rule-note{font-size:13px}.pay-note{font-size:14px}.hours-track{height:72px}.hours-day small,.hours-day b,.week-view p{font-size:12px}.how{margin-top:32px}.week-view h3{font-size:15px}.how-cols>div{padding:20px}}
@media(prefers-reduced-motion:reduce){.btn:hover{transform:none}.hours-track i{transition:none}}
}
@media print{.week-view{display:none}}
/* Narrow cards need room for real time strings, not shrunken five-column inputs. */
@media screen and (max-width:600px){
.sheet{display:block;padding:18px 14px}.sheet-head{display:block;padding:0 0 18px}.sheet-title{padding:0 0 14px;border-bottom:0}.who{margin:0;padding:0;border:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{font-size:12px}.field input,.field select{padding:7px 8px;font-size:16px}.punch{display:block;margin:0}.punch colgroup{display:none}.punch thead{position:absolute;clip:rect(0 0 0 0);width:1px;height:1px;overflow:hidden}.punch tbody{display:block}.punch tbody tr.day{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:16px 10px;border-top:1px solid #d8e2ec;border-radius:8px;margin-bottom:10px;background:#f1f5f9}.punch tbody tr.day th{grid-column:1/3;grid-row:1;display:flex;align-items:center;gap:8px;padding:0;border:0}.punch .dname{font-size:16px}.punch .ddate{font-size:12px;min-height:0}.punch tbody tr.day td{padding:0;border:0;min-width:0}.punch tbody tr.day td:nth-child(2){grid-column:1;grid-row:2}.punch tbody tr.day td:nth-child(3){grid-column:2;grid-row:2}.punch tbody tr.day td:nth-child(4){grid-column:3;grid-row:2}.punch tbody tr.day td:nth-child(2)::before{content:'Clock in'}.punch tbody tr.day td:nth-child(3)::before{content:'Clock out'}.punch tbody tr.day td:nth-child(4)::before{content:'Unpaid break'}.punch tbody tr.day td:nth-child(2)::before,.punch tbody tr.day td:nth-child(3)::before,.punch tbody tr.day td:nth-child(4)::before{display:block;font:500 11px/1.4 var(--f-ui);color:#52657b;margin-bottom:6px}.punch tbody tr.day td.num{grid-column:3;grid-row:1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:4px}.punch .dec{font:800 17px/1.2 var(--f-ui)}.punch .hm{font-size:11px;min-height:0}.tin,.bin,.bin.rng{font:600 16px/1.4 var(--f-ui);letter-spacing:-.2px;padding:8px 4px;text-align:center;min-width:0;min-height:44px}.punch .out-wrap{display:block}.punch .nextday{font-size:9px;top:-4px;right:-4px;max-width:100%}.punch .rnd{font-size:11px;flex-basis:100%}.punch tr.msg{display:block;margin-top:-8px;margin-bottom:10px}.punch tr.msg td{display:block;padding:12px;font-size:13px}.punch .wk-sub{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px}.punch .wk-sub th,.punch .wk-sub td{padding:10px 6px;display:block;border:0}.punch .wk-sub .foot-note{max-width:60%;font-size:12px}.punch tfoot{display:block;border-top:2px solid #264764;padding-top:10px}.punch tfoot tr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center}.punch tfoot th,.punch tfoot td{display:block;border:0;padding:4px;font-size:13px}.punch tfoot .num{margin-left:auto}.punch .keys{margin-top:20px}.keys{font-size:13px}body{padding-bottom:0}
}
@media screen{.hours-day b{font-size:13px}.hours-day small,.week-view p{font-size:12px}}