/* EarthRoster V1452.141 — Approved Ready-to-clock-in screenshot translated to ACTUAL UI.
   Visual only. Does NOT touch the header, mobile nav, missing-time notice,
   future-shift preview, clock state, PayPal, Messages, permissions, or timesheet calculations.
   Grid areas are the existing live shift data elements — no hardcoded sample content. */
@layer er120 {
@media(max-width:767px){
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift):has(>.er152-btn){
   position:relative!important;isolation:isolate!important;overflow:hidden!important;
   box-sizing:border-box!important;display:grid!important;
   grid-template-columns:minmax(0,1fr) minmax(116px,.75fr)!important;
   grid-template-areas:'label date' 'name name' 'time time' 'hint button'!important;
   grid-template-rows:minmax(29px,auto) auto auto minmax(56px,auto)!important;
   align-items:center!important;justify-content:stretch!important;
   column-gap:12px!important;row-gap:4px!important;
   min-height:182px!important;max-height:none!important;height:auto!important;
   padding:15px 15px 17px 19px!important;margin:0 0 15px!important;
   border:1px solid #81b2be!important;border-left:6px solid #3c93a4!important;
   border-radius:17px!important;
   background:linear-gradient(121deg,#fff 0%,#fbfefe 57%,#e5f3f6 100%)!important;
   box-shadow:0 6px 15px rgba(22,83,99,.10)!important;
   text-align:left!important;
 }
 /* Noninteractive translucent waves deliberately behind every control. */
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift):has(>.er152-btn)::before{
   content:''!important;position:absolute!important;inset:auto -32% -78px auto!important;
   width:92%!important;height:170px!important;border:none!important;border-radius:50% 49% 0 0!important;
   background:linear-gradient(128deg,rgba(212,235,241,.18),rgba(178,215,225,.30))!important;
   z-index:-1!important;pointer-events:none!important;
 }
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift):has(>.er152-btn)::after{
   content:''!important;position:absolute!important;inset:auto -28% -116px auto!important;
   width:105%!important;height:164px!important;border:0!important;border-radius:50% 50% 0 0!important;
   background:linear-gradient(110deg,rgba(207,232,240,.18),rgba(138,191,207,.19))!important;
   z-index:-1!important;pointer-events:none!important;
 }
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift) .er156-clock-label{
   grid-area:label!important;display:inline-flex!important;align-items:center!important;
   gap:8px!important;justify-self:start!important;align-self:center!important;
   width:auto!important;min-width:0!important;max-width:100%!important;
   color:#226c7e!important;font-size:10px!important;line-height:17px!important;
   letter-spacing:1.25px!important;font-weight:790!important;white-space:normal!important;
   padding:0!important;margin:0!important;
 }
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift) .er156-clock-label::before{
   content:''!important;display:block!important;flex:0 0 26px!important;
   width:26px!important;height:26px!important;border-radius:8px!important;
   background-color:#deeff3!important;
   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23206c80' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E")!important;
   background-repeat:no-repeat!important;background-position:center!important;background-size:17px 17px!important;
 }
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift)>small:first-child{
   grid-area:date!important;display:inline-flex!important;align-items:center!important;
   justify-self:end!important;align-self:center!important;gap:7px!important;
   min-width:0!important;width:auto!important;max-width:100%!important;
   text-align:right!important;white-space:normal!important;
   font-size:10px!important;line-height:15px!important;font-weight:570!important;
   color:#355b66!important;background:#e4f1f5!important;
   border:0!important;border-radius:999px!important;
   padding:7px 9px!important;margin:0!important;
 }
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift)>small:first-child::before{
   content:''!important;width:14px!important;height:14px!important;flex:0 0 14px!important;
   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6d7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M7 3v4M17 3v4M3 10h18'/%3E%3C/svg%3E")!important;
   background-repeat:no-repeat!important;background-size:contain!important;
 }
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift) h2{
   grid-area:name!important;align-self:end!important;min-width:0!important;
   margin:1px 0 0!important;max-width:100%!important;
   color:#163e30!important;font-size:20px!important;line-height:25px!important;
   font-weight:790!important;letter-spacing:-.45px!important;
   white-space:normal!important;overflow-wrap:anywhere!important;
 }
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift)>p{
   grid-area:time!important;align-self:start!important;justify-self:start!important;
   margin:0 0 1px!important;min-width:0!important;text-align:left!important;
   color:#4f696c!important;font-size:14px!important;line-height:19px!important;
   font-weight:570!important;white-space:normal!important;
 }
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift) .er156-clock-hint{
   grid-area:hint!important;align-self:center!important;justify-self:stretch!important;
   min-width:0!important;max-width:100%!important;
   padding:10px 0 0!important;margin:0!important;text-align:left!important;
   color:#60777b!important;font-size:10.5px!important;line-height:15.5px!important;
   font-weight:450!important;border-top:1px solid #d8e7eb!important;
 }
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift)>.er152-btn{
   grid-area:button!important;align-self:center!important;justify-self:stretch!important;
   display:inline-flex!important;align-items:center!important;justify-content:center!important;
   gap:7px!important;max-width:none!important;min-width:0!important;
   width:100%!important;height:41px!important;min-height:41px!important;
   padding:8px 9px!important;margin:0!important;
   border:1px solid #15586a!important;border-radius:10px!important;
   background:linear-gradient(135deg,#27869d 0%,#145368 100%)!important;
   color:#fff!important;font-size:12px!important;line-height:18px!important;
   font-weight:740!important;white-space:nowrap!important;
   box-shadow:0 4px 9px rgba(24,86,104,.19)!important;
 }
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift)>.er152-btn svg{
   flex:0 0 15px!important;width:15px!important;height:15px!important;stroke:#fff!important;
 }
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift)>.er152-btn:focus-visible{
   outline:3px solid #81ccdb!important;outline-offset:3px!important;
 }
}
@media(max-width:355px){
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift):has(>.er152-btn){
   grid-template-columns:minmax(0,1fr) minmax(95px,.71fr)!important;
   padding:12px 11px 14px 12px!important;column-gap:8px!important;
 }
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift) .er156-clock-label{font-size:9px!important;letter-spacing:.7px!important;gap:5px!important;}
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift)>small:first-child{font-size:9px!important;padding:5px 6px!important;gap:3px!important;}
 body.er108-employee-clock #page .er152-time .er152-ready:not(.er130-upcoming):not(.er130-no-shift) h2{font-size:18px!important;line-height:23px!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;}}
}