/* EarthRoster V1452.136 — clean actionable Clock card, REAL SOURCE UPDATE.
 * Only employee Time Clock content is affected; app chrome, future-shift card,
 * attendance workflow, notices, messages, billing, and roster remain unchanged.
 */
@layer er120 {
 @media (max-width:767px) {
   body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn) {
     background:linear-gradient(112deg,#ffffff 0%,#ffffff 55%,#f0f7f9 100%)!important;
     border:1px solid #cbdfe4!important;
     border-left:5px solid #36899b!important;
     border-radius:15px!important;
     box-shadow:0 5px 15px rgba(32,83,92,.085)!important;
     min-height:158px!important;
     padding:17px 16px 16px 18px!important;
     margin-bottom:14px!important;
     gap:5px 11px!important;
     isolation:isolate!important;
   }
   body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn)::before {
     width:108px!important;height:108px!important;right:-31px!important;top:-35px!important;
     border:1px solid #d2e5e9!important;background:rgba(234,246,248,.22)!important;
     pointer-events:none!important;
   }
   body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn) .er156-clock-label {
     color:#286f7c!important;letter-spacing:1.15px!important;font-size:9px!important;
   }
   body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn)>small:first-child {
     color:#67828b!important;font-size:10px!important;
   }
   body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn) h2 {
     color:#183b35!important;font-size:19px!important;line-height:24px!important;
     font-weight:760!important;
   }
   body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn)>p {
     color:#466b73!important;font-size:12px!important;line-height:17px!important;
     font-weight:630!important;
   }
   body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn) .er156-clock-hint {
     color:#6b8689!important;
   }
   body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn)>.er152-btn {
     background:linear-gradient(135deg,#257b91 0%,#155569 100%)!important;
     border:1px solid #15546a!important;color:#fff!important;
     border-radius:10px!important;height:43px!important;min-height:43px!important;
     box-shadow:0 3px 8px rgba(19,81,103,.20)!important;
     font-weight:730!important;font-size:12px!important;
   }
   body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn)>.er152-btn svg {
     stroke:#fff!important;
   }
   /* Consistent focus for keyboard/assistive access without altering the handler. */
   body.er108-employee-clock #page .er152-ready:not(.er130-upcoming):has(>.er152-btn)>.er152-btn:focus-visible {
     outline:3px solid #86c9db!important;outline-offset:2px!important;
   }
 }
 @media (prefers-reduced-motion:reduce){
   body.er108-employee-clock #page .er152-ready,
   body.er108-employee-clock #page .er152-ready > .er152-btn {transition:none!important;}
 }
}