.staff-time-clock{display:flex;align-items:center;justify-content:space-between;gap:18px;width:min(1180px,calc(100% - 32px));margin:16px auto 2px;padding:16px 18px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:linear-gradient(110deg,rgba(255,255,255,.08),rgba(255,255,255,.035));box-shadow:inset 0 1px rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.12)}
.staff-time-clock-copy{display:grid;gap:3px;min-width:0}.staff-time-clock-kicker{color:var(--accent,#c9a962);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.staff-time-clock-copy strong{font-size:15px;color:var(--text,#f4f4f1)}.staff-time-clock-copy span:last-child{color:var(--text-muted,#a8a8ad);font-size:12px}.staff-time-clock-button{flex:none;min-height:42px;padding:9px 18px;border:1px solid #f4f4f1;border-radius:7px;background:#f4f4f1;color:#101012;font:700 13px/1 Inter,Arial,sans-serif;cursor:pointer;transition:transform .18s,background .18s}.staff-time-clock-button:hover{transform:translateY(-1px);background:#deded9}.staff-time-clock-button.clocked-in{background:transparent;color:#f4f4f1;border-color:rgba(255,255,255,.32)}.staff-time-clock-button:disabled{opacity:.55;cursor:wait;transform:none}@media(max-width:620px){.staff-time-clock{width:calc(100% - 24px);margin-top:12px;padding:14px;align-items:flex-end}.staff-time-clock-button{min-width:94px;padding-inline:12px}.staff-time-clock-copy strong{font-size:14px}}